The <header> tag is a semantic HTML element that defines the introductory or navigational part of a webpage or section, usually containing titles, links, or key information.
- A page can have multiple <header> tags, but only one main site header.
- It can include titles, logos, navigation menus, search bars, or introductory text.
- The <header> provides context, not all content.
- It helps users understand and navigate different sections of the page.
- Defines a webpage header with a title and navigation links.
- Styles the header with a green background, white text, centered content, and spaced links.
Note: Header tag cannot be placed within a <footer>, <address>, or another <header> element.
Syntax:
<header> . . . . </header>
Example
The <header> tag is used inside the <article> element to define introductory content for that article.
- Displays a webpage with a main title and subtitle.
- Includes an article with a header containing a subheading, author, and description.
- Uses inline CSS to style font size and heading colors.
Note: The <header> can be used for each article or section to show key context like the title, author, and a brief description, not just the main page header.
HTML <header> Tag Attributes
The <header> tag has no unique attributes but:
- Supports global HTML attributes like id, class, style, role, lang, data-*, and tabindex.
- Can be styled with CSS to control its appearance and behavior.
- Supports event attributes such as onclick and onmouseover to add interactivity and enhance user experience.
- Displays a webpage with a main title and subtitle.
- Uses a <header> to include a heading, subheading, and metadata for the section.
- Creates a webpage with a main title, subtitle, and a <header> containing multiple navigation links.
- Includes a simple search bar within the header for user input.
