Main
The HTML main element identifies the dominant content of a document or application view, excluding shared navigation and peripheral content.
Build a Website with ChatGPT
A main element is an HTML element that identifies the principal content of a document.
- How it is used
- Marks the page-specific content area while separating it from repeated header, navigation, and footer content.
- How deep it goes
- Defines main, limits it to one per page, and shows its usual placement; defers detailed HTML semantics.
- Examples
- Demonstrates main in home pages, book-club pages, journals, galleries, portfolios, articles, and course catalogs.
- What you can do after
- Apply it by requesting or writing page layouts that isolate unique content in one main element.
Web Design Playground, Second Edition
Main content is the primary subject matter of a web page, excluding shared navigation and peripheral regions.
- How it is used
- Marks the page area containing content unique to the current page.
- How deep it goes
- Defines placement and single-use rules, then applies main to gallery and portfolio layouts without detailing browser internals.
- Examples
- Uses a header-and-navigation layout, a thumbnail photo gallery, and a portfolio containing several sections.
- What you can do after
- Build it from scratch by wrapping page-specific content in one semantic main element.
Read how Web Design Playground, Second Edition explains main →
Web Design Playground
The primary content area of a page that carries the central information or purpose of the page.
- How it is used
- Marks the current page’s unique central content and provides a container for page-specific layouts.
- How deep it goes
- Defines semantic placement, nesting, and flexbox behavior, while stopping short of deeper accessibility guidance.
- Examples
- Uses personal-page text, article-and-sidebar layouts, and photo galleries containing linked, wrapping thumbnails.
- What you can do after
- Build it from scratch by placing unique content in <main> and arranging its regions with semantic HTML and flexbox.
Related concepts
- article elementhas part · 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.
- home pagepart of · A home page is a website’s primary or default introductory page and an entry point to its main content or sections.
- flex-growconfigured by · The CSS flex-grow property specifies a nonnegative factor determining a flex item’s proportional share of available free space.
- introductionhas part · An introduction is an opening section or explanation that presents a subject, purpose, scope, or entity and prepares an audience for what follows.
- blogpart of · A blog is a regularly updated website or online publication containing dated or organized posts, articles, or multimedia entries.
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.