HTML Metadata Named Tags: An Basic Introduction

INTRODUCTION

The <meta> element with name attribute is used to provide webpage related metadata in terms of name-value pairs. The name of metadata is specified by name attribute and value is specified by using content attribute.

Standard Metadata Names

The Standard metadata names which can be defined using <meta> element are listed below.

• application-name
• author
• description
• generator
• keywords
• referrer
• theme-color
• color-scheme
• viewport

1. application-name

It is used to specify the name of web-application that the webpage represents.

Example:

<meta name="application-name" content="amazon">

2. author

It is used to specify the name of author of the webpage.

Example:

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

3. description

The meta description is short summary of webpage. This description appears in search engine results. It should be concise and relevant. It generally informs users what the page is about.

Example:

<meta name="description" content="This is sample description">

4. generator

It is used to specify name of software used to create the webpage.

Example:

<meta name="generator" content="wordpress 6.7.1">

5. keywords

They are similar to tags of social media that can be used to give additional information about webpage to search engines. The are written as a comma separated list.

Example:

<meta name="keywords" content="seo, cpc, keyword stuffing">

5. referrer

referrer attribute is used to define the HTTP header referrer for the outgoing links from the current webpage.

The HTTP Referrer header contains the address of the previous page from which a request was made. It makes possible to identify the referring website. This header is commonly used for analytics, logging, access control and security purposes.

In the below example a user is on website-A and clicks on a link that points to website-B. The user's browser makes an HTTP request to the server of website-B. In this case the referrer is website-A. In the HTTP request referrer header contains address of website-A.

http-referrer-header

The values for the content attribute referrer header can take are listed below.

• no-referrer: Do not send HTTP referrer header.
• origin: send the origin of the webpage.
• no-referrer-when-downgrade: When the destination webpage is atleast as secure as the current page(HTTP(S) -- HTTPS ) send the full URL as referrer, and if its less secure(HTTPS -- HTTP ) send no referrer. This the default option.
• origin-when-cross-origin: when request comes from same-origin send full URL and for other cases send only origin.
• same-origin: when request comes from same-origin send full URL and for Cross-origin no referrer header will be sent.
• strict-origin: When the destination webpage is atleast as secure as the current page(HTTP(S) -- HTTPS ) send the origin as referrer, and if its less secure (HTTPS -- HTTP ) send no referrer.
• strict-origin-when-cross-origin: when request comes from same-origin send full URL. When the destination webpage is atleast as secure as the current page(HTTP(S) -- HTTPS ) send the origin as referrer. Otherwise send no referrer.
• unsafe-URL: whether request comes from same-origin or cross-origin send full URL. This case is unsafe because it can leak origins and paths to insecure origins.

6. theme-color

theme-color is name meta attribute which let you define the color for UI. The color value is specified using content attribute. The media attribute specifies which media the color theme should be applied to. Its value is a media-query and its default value is all if this attribute is not specified.

<meta name="theme-color" content="#E7E9F0" media="print">

7. color-scheme

This attribute specifies the color scheme with which the document is compatible being rendered with. This value is used in conjunction with device-settings to select the color-scheme. You can specify one or more values. It is generally used to indicate compatibility with light and dark color modes. The values of content property for color-scheme are listed below.

a. normal

The value indicates that webpage is not aware of any color-scheme and it should be rendered using browsers default theme.

b. light, light dark, dark, dark light

It specifies one or more color-scheme supported by the webpage. When multicolor schemes are specified, it indicates that the first scheme is preferred by the webpage.

c. only light

It specifies that the webpage is compatible with only light mode. If a dark mode is selected on webpage, it will result in unreadable/ unexpected content.

For example, the code below indicates that it prefers dark mode but light mode is also supported.

<meta name="color-scheme" content="dark light" />

8. viewport

Viewport represents the visible area of screen. In the browser, it refers to the part of webpage which is currently visible. The viewport attribute defines the size and scale of viewport. It is the first step towards responsive web design.

A general meta tag for viewport looks like this. The content defines the size of viewport. The various possible options available are listed below.

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

a. width

This attribute defines the size of viewport's width in pixels. Its value can be a positive integer or the text device-width.

device-width will be equal to 100% of the device width. This keyword works with all the different screen sizes.

b. initial-scale

It specifies the level of zoom when a page loads. It can take any value between 0.0 to 10. The default value is 1. The figure below depicts its effect at various zoom levels.

c. height

This attribute defines the size of viewport's height in pixels. Its value can be a positive integer or the text device-height.

d. maximum-scale

It specifies the maximum level user can zoom in. User cannot zoom beyond the maximum-scale level. It must be greater than or equal to minimum-scale. The default value is 10.

e. minimum-scale

It specifies the minimum level user can zoom out. User cannot zoom below the minimum-scale level. It must be smaller than or equal to maximum-scale. The default value is 0.1.

f. user-scalable

It specifies whether the user can zoom the webpage or not. The allowed values are yes or no. when set to no the user is not able to zoom in. The default value is yes.

g. viewport-fit

It specifies whether the user can zoom the webpage or not. The allowed values are yes or no. when set to no the user is not able to zoom in. The default value is yes.

Frequently Asked Questions (FAQ)