Meta Tag In HTML

In HTML, <meta> tags are used to provide metadata about an HTML document. Metadata is data about data, which means it gives information about the HTML document itself rather than the content displayed on the page.

<meta>tags are typically placed inside the < head > tag of an HTML document and do not have a closing tag because they are self closing tags.

Commonly Used of <meta> Tags and Their Purposes:

1. Character Encoding : Specifies the character encoding used for the document. UTF-8 is the most widely used encoding, supporting a vast range of characters from various languages and scripts.

2. Viewport : In this section, we will define the properties of the viewport or displayed area. This is crucial for responsive and visually appealing web page design. It also ensures that the display appears consistently across different devices.

Attributes of Viewport in Meta Tag.

1. Shrink to fit 
2. Viewport to fit
3. Height
4. Width
5. User Scalable
6. Maximum Scale
7. Minimum Scale
8. Initial Scale

3. Description : It Provides the description of the content of the web page. Syntax : <meta name=”description” content=”description content”>

4. Keywords : In this section ,we declare all the keywords related to or similar to the content on the webpage. Keywords help search engine compare the content of the page with user queries, and they can also provide context for the page's content. Syntax : <meta name=”keywords” content=”keyword1, keyword2,....”>

5. Author : In this section,we define the identification of the author or creator name of the content displayed on the webpage. Syntax : <meta name=”author” content=”Author’s Name”>

6. Robots : In this section, we specify how search engines should index the page and follow the links on it.
Attribute of Robots are :
1. Index : It allows the search engine to index the page and include it in the search engine result.

2. Noindex : It prevents the search engine from indexing the page and excludes it from search results.

3. Follow : This allows the search engine to follow the links on the page

4. Unfollow : This instructs the search engine not to follow any links on the page.



Quiz Time
1.What is the primary purpose of the <meta> tag in HTML?
To display text on a webpage
To provide metadata about the HTML document
To create hyperlinks
To define the document's structure

2.Which <meta> tag attribute specifies the character encoding for the document?
Name
Http-equiv
Charset
Content
3.Which attribute of the <meta> tag specifies the viewport settings for responsive web design?
Name
Content
viewport
Charset
4.What is the purpose of the </meta"> tag?
To instruct search engines not to index the page
To prevent search engines from following links on the page
To set the character encoding to UTF-8
To provide a description of the page for search engines
5.Which of the following <meta"> tags will prevent search engines from indexing the page but allow following the links on it?
<meta name="robots" content="noindex, nofollow">
<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, follow">
<meta name="robots" content="index, nofollow">
6.What does the "Meta" tag in the "Head" section generally contain?
Content to be displayed to the user
Links to external resources
Metadata about the HTML document
Internal CSS rules
7.How would you use the <meta"> tag to specify that the document should be responsive on mobile devices?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="responsive" content="yes">
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
<meta name="viewport" content="user-scalable=no">
8.To specify the author of an HTML document using a <meta> tag, which attribute should be used?
Name
Http-equiv
Author
Content
9.How can you include a description of the page's content for search engines using the <meta> tag?
<meta name="description" content="A brief description of the page">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Your Name">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
10.Which of the following is NOT a valid "name" attribute value for the <meta"> tag?
Description
Viewport
Robots
Content