Header element
The HTML header element represents introductory content or navigational aids for a document or section.
Build a Website with ChatGPT
The header element is an HTML element representing introductory content for a page or section.
- How it is used
- Introduces a page or site with identifying content before its main content.
- How deep it goes
- Defines header markup, typical contents, and basic CSS customization without detailing HTML specifications.
- Examples
- Demonstrates logo, title, and tagline headers for book clubs, journals, interest sites, galleries, and catalogs.
- What you can do after
- Apply it via ChatGPT prompts to generate a page header with specified branding and styling.
Read how Build a Website with ChatGPT explains header element →
Web Design Playground, Second Edition
The HTML header element represents introductory content for a page or section, commonly including a title, logo, or related introductory material.
- How it is used
- Marks the introductory area of a page, commonly grouping a logo and primary title.
- How deep it goes
- Defines the element and builds it into styled gallery and portfolio layouts, without exploring specification-level rules.
- Examples
- Uses Semantics Depot, Ampersand Photography, and This Old Book headers with logos, titles, and navigation.
- What you can do after
- Build it from scratch by wrapping introductory logo and heading content in a semantic header.
Read how Web Design Playground, Second Edition explains header element →
Related concepts
- article elementpart of · The HTML article element represents a self-contained composition that can stand independently or be distributed or reused.
- HTMLpart of · HTML (HyperText Markup Language) is the standard markup language for structuring content and elements in web documents.
- blogpart of · A blog is a regularly updated website or online publication containing dated or organized posts, articles, or multimedia entries.
- flex containeruses · A flex container is an element whose children are laid out as flex items according to the CSS Flexible Box Layout model.
- nav elementhas part · The HTML nav element represents a section of a document containing navigation links or other navigation-related content.
- title elementhas part · The HTML title element specifies a document’s title, which browsers and other technologies use in tabs, history, bookmarks, search results, and accessibility contexts.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.

