HTML meta Tag
HTML <meta> Tag
The <meta> tag in HTML is used to provide metadata or additional information about an HTML document. It is placed within the <head> section of an HTML document and does not require a closing tag.
Here’s an example of how the <meta> tag can be used:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is a sample webpage.">
<meta name="keywords" content="HTML, metadata, example">
<title>Example Page</title>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
In the example above, several <meta> tags are used to provide different types of metadata:
- The
charsetattribute specifies the character encoding for the document. In this case, it is set to UTF-8, which is a widely used character encoding for handling various languages. - The
viewportattribute sets the viewport properties for responsive web design. The example above sets the width to the device width and scales the content to fit the device. - The
descriptionattribute provides a brief description of the webpage’s content. This description may be used by search engines or other applications that process the webpage. - The
keywordsattribute specifies a comma-separated list of keywords relevant to the webpage’s content. These keywords can help search engines understand the page’s topic or content.
There are various other attributes and values that can be used with the <meta> tag to provide different types of metadata. Some examples include setting the author, specifying the document’s language, indicating the expiration date, and more. The choice of which metadata to include depends on the specific requirements and purpose of the webpage.
Table contains:
Example
Describe metadata within an HTML document:
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>Definition and Usage
The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
<meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.
There is a method to let web designers take control over the viewport (the user’s visible area of a web page), through the <meta> tag (See “Setting The Viewport” example below).
More Examples
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, JavaScript">
Define a description of your web page:
<meta name="description" content="HTML and CSS">
Define the author of a page:
<meta name="author" content="Mahabul Alam">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Setting the viewport to make your website look good on all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Setting the Viewport
The viewport is the user’s visible area of a web page. It varies with the device – it will be smaller on a mobile phone than on a computer screen.
You should include the following <meta> element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML header Tag
HTML header Tag defines a head section of the web page or head section of another section of the web page. HTML header tag is semantic part of HTML5. HTML header tag usually contain introductory part.
Syntax of HTML header Tag
The Syntax of HTML header Tag is shown below, It has both starting and ending tags.
<header>
</header>Usage of HTML header Tag
HTML header Tag is used in HTML5 to specify the opening section. HTML header section mostly contain the headings, logo, navigation menu, slider, banner, video etc.
One web page can contain more than one HTML header tags, mostly header tag is the first section of a web page but you can use it later as well.
HTML header tag cannot be used inside footer tag, address tag or inside any other header tag.
HTML header tag is a block level element.
Example of HTML header Tag
Simple example of HTML header Tag is shown below.
<header>
<nav>
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contact Us</a></li>
</ul>
</nav>
<h1>HowToCodeSchool.com</h1>
<p>Learn HTML online!</p>
</header>Contain Table:
The <header> tag in HTML is used to define a container for introductory content or a group of navigational links at the top of a document or a section. It represents the header section of a webpage or a specific section within the document.
Here’s an example of how to use the <header> tag in HTML:
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
</head>
<body>
<header>
<h1>Welcome to Example Page</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<!-- Rest of the content -->
</body>
</html>
In the example above, the <header> tag is used to contain the introductory content of the webpage. It includes an <h1> heading element for the page title and a <nav> element for navigation links. The <header> tag is placed within the <body> section of the HTML document.
By using the <header> tag, you can semantically structure your webpage and separate the introductory content or navigation from the main content. It helps in organizing the different sections of your webpage and enhances accessibility and SEO (Search Engine Optimization).
