iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A web page has two broad layers: the document’s <head>, which holds its title, metadata and resource references, and its <body>, which holds the content and controls people use. Within the body, semantic HTML elements describe the roles and relationships of regions such as navigation, main content and supporting information. CSS can change how those regions look and where they appear without changing what they mean.
What are the main parts of a web page?
A common page structure includes a header, navigation, a main content area, perhaps an aside, and a footer. This is a useful pattern, not a required template: the right structure depends on what the page contains.
The document head
The <head> contains document-level information and references to resources, such as stylesheets. The document title identifies the page in browser interfaces and assistive contexts; it is not the visible article content. A page may include other metadata, but not every metadata field is mandatory.
Free tools Windows power users keep installed
One-click scans. No signup required.
The body
The <body> contains the material presented to visitors: headings, text, images, links, forms and other controls. Semantic elements within the body identify meaningful regions and content roles. MDN’s page-structuring lesson illustrates one workable arrangement: body > header + nav + main + footer, with an article, sections and possibly an aside inside main.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
What do the semantic page elements mean?
Choose an element for the role its content plays, not for the shape or position you want it to have on screen. These elements communicate structure to browsers and assistive technologies as well as to people reading the source.
Header and footer
A <header> introduces a page or a section. It might contain site identity, introductory material or a heading. A <footer> closes a page or a section and may contain related metadata or closing information. Either element can appear in a nested article or section, so a header or footer is not automatically a page-wide landmark just because of its tag; context matters.
Navigation and main content
Use <nav> for a significant block of navigation links, not as a generic wrapper for every group of links. A page can have more than one navigation region; distinguish them when that helps users understand their purpose.
<main> identifies the page’s central, unique content. It gives visitors a way to move past repeated material such as global navigation and reach the reason they opened the page. W3C WAI’s H101 guidance explains how semantic regions can provide landmarks for assistive-technology navigation.
Rank #3
Article, section and aside
These three elements are easy to confuse if you choose by layout alone. Consider whether the content can stand independently, whether it is a thematic part of a larger whole, and how it relates to the main flow.
| Element | Use it for | Example |
|---|---|---|
<article> |
A self-contained composition that could make sense on its own. | A news story or blog post. |
<section> |
A distinct thematic part of a document when no more specific semantic element fits; give it a heading when it has a name or topic. | A headed chapter or topic area within a longer page. |
<aside> |
Meaningful complementary material related to, but separate from, the main flow. | A related note or sidebar content. The sidebar is a possible presentation, not the definition. |
MDN’s HTML elements reference describes these and other elements. A <div> remains useful when no semantic element fits, but by itself it does not tell a reader or assistive technology what role its contents play.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
How do semantics, accessibility and CSS work together?
Semantic markup exposes the organization of a page to software, helping assistive-technology users move among regions instead of traversing all preceding content. W3C WAI’s Page Structure Tutorial also discusses page orientation and presenting the main content in reading modes. Structure is one part of accessibility, not a guarantee on its own.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Keep the underlying document sensible when read without visual styling. MDN’s HTML accessibility guidance emphasizes semantic HTML alongside useful source order, meaningful links, image text alternatives and labeled form controls. For data tables, use proper header cells so their relationships are clear.
HTML supplies structure and meaning; CSS supplies presentation and layout. A visually attractive arrangement can still lack meaningful organization if it is built only from generic containers or positioned elements. Conversely, semantic markup does not dictate a particular design: CSS can arrange the same meaningful regions in different ways.
Quick Recap
How should you structure an HTML page?
- Identify the content’s roles. Decide what is the page’s central content, what is significant navigation, and whether supporting material belongs in the main flow or alongside it.
- Choose semantic elements by meaning. Use
mainfor the central content,navfor significant navigation,articlefor an independent composition,sectionfor a thematic part, andasidefor complementary material. - Organize the source in a sensible reading order. Make the document understandable without relying on CSS to reveal which content comes first or what belongs together.
- Add headings and accessible details. Start named sections with meaningful headings, make link text informative, provide text alternatives for informative images, and associate labels with form controls.
- Style the structure with CSS, then validate the markup. CSS should control appearance rather than substitute for semantic structure. MDN’s page-structuring lesson recommends checking markup with the W3C HTML Validator.
What should you avoid?
- Do not treat the common pattern as mandatory. A page does not need every familiar region; include elements that fit its content.
- Do not select elements for visual effect. A box is not an
asidesimply because CSS places it in a side column, and a collection of links is not necessarily anav. - Do not assume every header or footer is page-wide. Nested elements belong to their local article or section context.
- Do not rely on semantics alone. Good element choices need to be accompanied by sensible reading order, headings, link text, image alternatives and form labels.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
