HTML Page Structure Summary | AI Coding Educator

HTML Structure Summary

HTML structure organizes content into meaningful areas such as the header, navigation, main content, sections, and footer. These elements help people, browsers, and search engines understand how the page is arranged.

<header>Site Header</header>
<nav>Navigation</nav>
<main>
	<section>Page Section</section>
</main>
<footer>Site Footer</footer>

The Body Contains The Visible Page

The visible content of an HTML page goes inside the body element. HTML structure elements are placed inside the body to organize that content.

<body>
	<header>Site Header</header>
	<main>Main Content</main>
	<footer>Site Footer</footer>
</body>

The body is the outer container for the visible page. The elements inside it describe the different parts of the layout.

A Common HTML Structure

Many websites use the same basic structure: a header at the top, navigation, one main content area, and a footer at the bottom.

<header>
	<h1>My Website</h1>
</header>

<nav>
	<a href="index.html">Home</a>
	<a href="about.html">About</a>
</nav>

<main>
	<section>
		<h2>Welcome</h2>
		<p>This is the main page content.</p>
	</section>
</main>

<footer>
	<p>Copyright 2026</p>
</footer>

The exact design can change, but this structure works for many simple websites.

The Header Element

The header element contains introductory content for a page or section. A site header often contains the site name, logo, or introductory text.

<header>
	<h1>Mountain Club</h1>
	<p>Weekend hikes for new climbers.</p>
</header>

A page can contain more than one header. A section or article may have its own header, but the main site header usually appears near the top of the page.

The Navigation Element

The nav element groups the main navigation links for a page or section.

<nav>
	<a href="index.html">Home</a>
	<a href="trips.html">Trips</a>
	<a href="contact.html">Contact</a>
</nav>

Not every group of links needs a nav element. Use it for important navigation that helps visitors move through the website or a major part of the page.

The Main Element

The main element contains the primary content of the page. It should hold the information that makes this page different from other pages on the site.

<main>
	<h1>Upcoming Trips</h1>
	<p>Choose a trip to learn more.</p>
</main>

A page should normally have only one visible main element. Repeated site content such as the header, navigation, and footer belongs outside it.

The Section Element

The section element groups content about one topic. A section should usually have a heading that explains what the section is about.

<section>
	<h2>Beginner Hikes</h2>
	<p>These trails are short and easy to follow.</p>
</section>

Sections are useful when the main content contains several distinct topics that belong on the same page.

Article And Aside Elements

The article element contains content that can stand on its own, such as a blog post, news story, review, or forum post.

<article>
	<h2>My First Mountain Hike</h2>
	<p>This story describes one complete trip.</p>
</article>

The aside element contains related information that is not part of the main flow, such as a short note, sidebar, definition, or list of related links.

<aside>
	<h2>What To Bring</h2>
	<p>Carry water, sunscreen, and a map.</p>
</aside>

The Footer Element

The footer element contains information that belongs at the end of a page or section. A site footer often includes copyright text, contact information, or secondary links.

<footer>
	<p>Copyright 2026 Mountain Club</p>
	<a href="contact.html">Contact Us</a>
</footer>

Like a header, a footer can belong to the whole page or to a smaller article or section.

Semantic Elements Describe Their Purpose

Elements such as header, nav, main, section, article, aside, and footer are called semantic elements. Their names describe the kind of content they contain.

A div is still useful when you need a general-purpose box for styling or layout. Use a semantic element when its meaning fits the content, and use a div when no more specific element fits.

<section>
	<h2>Club News</h2>
	<div class="news-grid">
		News cards go here.
	</div>
</section>

HTML Structure Uses Nested Elements

Page structure is built by placing smaller elements inside larger elements. This is called nesting.

<main>
	<section>
		<h2>Featured Trip</h2>
		<p>Trip details go here.</p>
	</section>
</main>

The heading and paragraph are inside the section. The section is inside the main element. Indentation makes this relationship easier to see in the code.

Structure And Design Are Different

HTML describes the purpose and order of the page content. CSS controls how those areas look and where they appear.

A footer is still a footer even if CSS moves it, changes its color, or places it beside another element. Choose HTML elements based on what the content means, not only where it appears on the screen.

Structure