A header element defines the introductory area of a web page. It usually sits at the top of the page and commonly contains a logo or icon, a page or site title, and an optional tagline. A header often spans the page width, while the page content itself can remain narrower for easier reading. section 4.2.1
Mark header content by placing it between opening <header> and closing </header> tags. Add a heading for the title, a paragraph for the tagline, and an image for the logo when needed. A different background color can help visually separate the introduction from the rest of the page. section 4.2.1
A simple site header
This header combines a logo, title, and tagline. In a prompt, name the image file and spell out the exact title and tagline you want generated. section 4.2.1
<header>
<img src="logo.png" alt="Code & Prose logo">
<h1>Code & Prose</h1>
<p>Diving deep into the narrative side of code</p>
</header>
Inspect the opening and closing header tags around a logo image, heading, and tagline. section 4.2.1
Use a header as part of a clear page layout:
- Place navigation after or alongside the header when visitors need links to other site areas. section 12.2.1
- Keep page-specific material in the main element; headers, navigation, and footers are often reused across site pages. section 12.2.1
- Use a footer for closing material such as copyright, contact information, or social links. section 12.2.1
- Customize header colors, text sizes, logo position, margins, and padding in CSS after generating the initial page. section 4.2.6 section 9.6
Headers adapt to the kind of page: a book club or journal can use a logo, title, and tagline; an information site can add navigation; an interest-site home page can use a hero image; and a course catalog can arrange images, logo, title, and subtitle across the header. section 5.1 section 7.3.2 section 13.5
