HTML Meta Tags

Understanding essential document metadata tags for SEO and responsiveness.

Metadata is data (information) about the HTML document. Metadata is not displayed directly, but is parsed by browsers, search engines, and other web services.

Crucial Meta Attributes

<meta charset="UTF-8">: Declares character encoding (UTF-8 handles almost all characters/symbols).
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Commands the viewport size and initial scaling, enabling responsive web design on mobile devices.
<meta name="description" content="...">: Short description of your site, displayed in Google search result snippets.
<meta name="keywords" content="...">: Defines page keywords (largely ignored by modern search engines, but historically used).
<meta name="author" content="...">: Specifies the page author.

Examples

html

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description">

<meta name="keywords">

<meta name="author">

Interview questions

Why is the viewport meta tag necessary for responsive web layouts?

Without the viewport meta tag, mobile browsers render desktop-sized pages and shrink them down, making content tiny and unreadable. The viewport tag tells the browser to set the viewport width matching the physical device width (`width=device-width`) and sets the initial zoom ratio to 100% (`initial-scale=1.0`).

Practice

Write the HTML meta tag that sets up character encoding and viewport settings for mobile-responsive design.

Hint: Create a <meta charset='UTF-8'> and a <meta name='viewport' content='width=device-width, initial-scale=1.0'>.