HTML <header> Tag
Today we will cover HTML Tag header examples. By using examples, we anticipate meeting the learning objectives.
The HTML <header> tag represents a container for introductory content or a group of introductory content in a web page. It is typically used to contain headings, logos, navigation menus, search bars, and other top-level content that appears at the top of a web page.
The <header> element is a semantic tag, which means that it provides information about the meaning and structure of the content it contains. This helps search engines and other web tools understand the purpose and context of the content, which can improve accessibility and search engine optimization (SEO).
The <article> header is as follows:
Example:
Header of a page:
Example:
Here is a complete example of the <header> tag:
Example:
Tag Header Usage
The <header> element functions as a holding area for introductory content or a set of navigational links.
Typically, a <header> element includes:
- Contains several headings (h1-h6)
- Icon or logo
- The author’s details
Browser Compatibility
Numbers in the table indicate when the element <header> was first fully implemented by a browser.
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <header> | 5.0 | 9.0 | 4.0 | 5.0 | 11.1 |
Attributes
Global
The Tag header <header> is compatible with the Global Attributes in HTML.
Event
The Tag header <header> is compatible with the Event Attributes in HTML.
Predefined CSS
The <header> element is frequently generated with the given default values:
header {
display: block;
}HTML <header> Tag Benefits
The HTML <header> tag provides several benefits when used properly in web page design and development:
- Using the <header> tag helps screen readers and other assistive technologies better understand the structure and purpose of the content. This makes it easier for users with disabilities to navigate and access the content on a web page.
- The <header> tag provides search engines with additional information about the content and structure of the page. This can improve the page’s visibility and ranking in search results.
- By using the <header> tag, web designers and developers can establish a consistent structure for the header section of a web page. This helps create a cohesive design and improves the user experience.
- The <header> tag can be used to contain navigation menus and links, making it easier for users to find and access the main sections of a website.
- The <header> tag can be easily styled using CSS to create a unique and visually appealing design for the header section of a web page. This can help improve the overall look and feel of a website.
