<meta>

The <meta> element provides metadata such as character encoding, author info, and viewport settings, typically found in the <head> section for document processing and SEO.

`<meta>` Tag

The <meta> tag in HTML supplies metadata about the document. Located within the <head> section, it defines details such as character encoding, author, viewport settings, and more.

Syntax

index.html

<meta name="name" content="value">

Example

Describing metadata within an HTML document:

All meta information goes in the head section...

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <p>All meta information goes in the head section...</p>
</body>
</html>

Attributes

Attribute	Value	Description
`charset`	character_set	Defines the character encoding used in the HTML document
`content`	text	Specifies the value associated with either the `http-equiv` or `name` attribute
`http-equiv`	`content-security-policy` `content-type` `default-style` `refresh`	Sets an HTTP header that provides information or assigns a value to the `content` attribute
`name`	`application-name` `author` `description` `generator` `keywords` `viewport`	Assigns a name for metadata within the document

Examples

Define keywords for search engines:

index.html

<meta name="keywords" content="HTML, CSS, JavaScript">

Define a description of your web page:

index.html

<meta name="description" content="Free Web tutorials for HTML and CSS">

Define the author of a page:

index.html

<meta name="author" content="John Doe">

Refresh document every 30 seconds:

index.html

<meta http-equiv="refresh" content="30">

Setting the viewport to make your website look good on all devices:

index.html

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

Configuring the Viewport

The viewport represents the portion of a webpage visible to the user. Its size varies based on the device—being smaller on mobile phones and larger on desktops.

To ensure proper scaling and responsiveness, include the following <meta> tag in your web pages:

index.html

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

This tag helps the browser adjust the page's layout and scaling behavior.

The width=device-width setting ensures the page width matches the screen size of the device.
The initial-scale=1.0 setting establishes the default zoom level when the page loads.

Below, you can compare a webpage without this viewport tag and one with it applied.

If you're using a mobile device or tablet, try both versions to observe the difference in display and responsiveness.

The <meta> tag provides essential information about an HTML document, including character encoding, description, keywords, author, and viewport settings. Found within the <head> section, this data is not displayed on the page but is utilized by browsers, search engines, and other tools for content management and optimization. It also allows web designers to manage the viewport.

Key Points

Purpose: Delivers crucial document information for browsers and search engines.
Usage: Commonly used to set character encoding, page descriptions, keywords, and viewport settings.
Placement: Must be included within the <head> section of the HTML document.

Conclusion

The <meta> tag in HTML provides metadata about a webpage, such as character encoding, page description, and viewport settings. It helps optimize websites for search engines, improve accessibility, and ensure responsiveness across devices. Positioned within the <head> section, these tags support better web performance and user experience.

<!DOCTYPE>

The <!DOCTYPE> declaration defines the document type and version of HTML, ensuring the browser renders the page correctly.

<link>

The HTML <link> element defines the connection between the current document and external resources, often used to link stylesheets, icons, and other files within the <head> section.