HTML Page Structure Summary | AI Coding Educator

HTML Structure Summary

HTML structure organizes visible page content into meaningful areas such as the header, navigation, main content, sections, and footer.

<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. 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 content.

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>Mountain Club</h1>
</header>

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

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

<footer>
	<p>Copyright 2026 Mountain Club</p>
</footer>

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

Common Structure Elements

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

The nav element groups important navigation links that help visitors move through the website or a major part of the page.

The main element contains the primary content of the page. A page should normally have only one visible main element.

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

The footer element contains information that belongs at the end of a page or section, such as copyright text, contact information, or secondary links.

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.

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