Chapter 5 introduced the HTML document skeleton: the <!DOCTYPE>, the <html> element, the <head>, the <body>, and the basic structure that every page shares. You learned how to write a valid starter page and how to nest elements correctly.

This chapter goes inside the <body> and teaches you how to structure written content. Most of what exists on the web is text — headings, paragraphs, articles, descriptions, instructions, labels, and explanations. HTML gives you specific elements for all of these, and the choice of element matters. Not for decoration, but for meaning.

By the end of this chapter you will understand why <h1> is not just a way to make text bigger, why <p> is not just a way to add space, and why elements like <main>, <section>, <article>, <header>, <footer>, and <aside> exist alongside simple headings and paragraphs. You will understand semantic HTML — writing code that says what things are, not just what they look like.

Open almost any web page and look at what it contains. A news article has a title, a publication date, several paragraphs of body text, and maybe a pull quote. A documentation page has a large heading, several sub-headings, code blocks, and explanatory paragraphs. A product page has a product name, a price, a description, a list of features, and customer reviews.

All of this is text content. And all of it carries structure — not just visual structure, but logical structure. A product name is more important than a feature description. A section heading divides one topic from another. A paragraph groups a single idea together.

HTML was designed to encode this logical structure. When you write an HTML document, you are not designing a visual layout. You are describing what each piece of content is. Visual layout is CSS's job. Structure and meaning is HTML's job.

HTML provides six heading elements:

These six elements represent a hierarchy, not a set of font sizes. <h1> is the highest-level heading on the page — the main title or primary subject. <h2> introduces major sections under that title. <h3> introduces sub-sections inside an <h2> section. And so on through <h6>, which is rarely used.

Most pages you build in this course will use <h1> through <h3> regularly, and <h4> occasionally. You will rarely have reason to use <h5> or <h6> in a typical page.

The most important rule about headings is: do not skip levels. A page that jumps from <h1> to <h3> has broken its outline. A page with two different <h1> elements in the same main content area may confuse assistive technologies about what the primary subject is.

Think of headings like an outline you might write before an essay:

Each level of that outline maps to a heading level in HTML.

As a strong general guideline for this course, use exactly one <h1> per page. It should represent the single most important heading on that page — the title of the article, the name of the product, the main subject the page covers. If your site's name lives in a <header> as a logo, the <h1> should still identify the content of that particular page, not just the site name.

Headings are not ways to make text big or bold. Many beginners reach for <h2> because it makes text a certain size in the browser's default stylesheet. This is a mistake. Size is a CSS concern. If you want text to be large, set its font-size in CSS. Choose your heading level based on the document's structure, not its visual appearance.

The paragraph element <p> wraps a unit of related text that belongs together as a single thought or idea:

Each <p> element is a separate block. Browsers insert spacing between paragraphs by default, which you will later control with CSS.

A <p> element should contain prose — sentences that read together as connected text. You should not put block-level elements like headings, lists, or other paragraphs inside a <p>. Nesting a block inside a <p> creates invalid HTML that browsers may silently correct in unpredictable ways.

The <h3> should live outside the paragraph, not inside it.

A common beginner question is: "What is the difference between ending a paragraph and inserting a line break?"

HTML provides <br> — a self-closing element — for a single line break within flowing content. A line break is not a new paragraph; it is a hard line break within the same paragraph.

This is a typical use of <br>: an address that needs lines to break without starting a new paragraph. Addresses are a single unit of information, so they belong in one <p>, but they are traditionally formatted on separate lines.

Not all text belongs in a <p>. A list item goes in <li>. A table cell goes in <td>. A navigation link sits in an <a> inside a list. A heading uses one of the <h1> through <h6> elements. As this chapter continues, you will see many other ways to contain and organize text content.

HTML provides two inline elements for emphasizing text within a paragraph or heading:

The <em> element marks text that has stress emphasis — the kind of vocal stress you would apply when reading aloud. Compare these two sentences:

The <strong> element marks text that is strongly important — content that carries weight, severity, or urgency:

Browsers render <strong> in bold by default. Again, the semantic meaning is importance, not visual boldness. Use CSS to control visual weight.

Do not use these elements for purely visual effect. If you want italic or bold text for stylistic reasons — naming a book title or highlighting a term — HTML provides other elements, or you can apply CSS directly.

You have already seen <br> for line breaks. Two additional minor elements are worth covering briefly.

As covered above, <br> creates a single hard line break within a paragraph or other inline content. It is self-closing and does not take a closing tag:

Use <br> only when the line break is meaningful — addresses, poetry, song lyrics, and similar content where line breaks carry semantic or conventional significance. Do not use <br> to add visual spacing between sections. Use CSS margins and padding for spacing.

The horizontal rule element <hr> represents a thematic break between sections of content within a document — a shift in scene in a story, a section break in a long article, or a major topic transition:

Browsers render <hr> as a horizontal line by default. You can style it with CSS. <hr> is a void element, meaning it has no content and no closing tag.

You have now encountered <h1> through <h6>, <p>, <em>, <strong>, and a few other elements. All of them share an important quality: they communicate what something is, not just how it should look.

This is the core principle of semantic HTML. The word "semantic" means "relating to meaning." Semantic HTML is HTML that uses elements chosen to match the meaning of the content, not the desired visual appearance.

Compare these two approaches to the same recipe content:

Both might look similar in a browser if the CSS is designed that way. But only the second version tells a machine — a screen reader, a search engine, a browser's reading mode, or a developer — what the content actually is.

The <div> element is a generic block container with no semantic meaning. It groups content visually but says nothing about what that content represents. The <span> element is the inline equivalent — also generic, also meaningless on its own.

<div> and <span> are useful tools, and you will use them in this course, especially when you need a container for CSS layout purposes. But they should not replace semantic elements when semantic elements exist and apply. The principle is: use the most specific semantic element that correctly describes your content.

Chapter 5 introduced the three-part skeleton: <html>, <head>, and <body>. Everything visible to the user lives inside <body>. But <body> can contain many different kinds of content — primary content, navigation, sidebars, headers, and footers. HTML5 introduced several landmark elements to describe the roles of these regions.

The <main> element wraps the primary, unique content of the page. There should be exactly one <main> element per page, and it should not contain content that repeats across pages, like navigation menus, site headers, or site footers.

The <section> element represents a standalone thematic section of a document or page — a group of related content that has a heading. It is not a general-purpose container. If you are reaching for <section> but cannot give the section a heading, you may want <div> instead.

Each <section> groups a distinct theme — one for web design, one for graphic design — and each has its own <h2>.

The <article> element represents a piece of content that is self-contained and independently distributable. If you could take the content out of the page, publish it somewhere else, and it would still make complete sense on its own, it is likely an <article>. News articles, blog posts, product listings, forum posts, and user reviews are good candidates:

The distinction is not always obvious. Here is a simple test:

These elements can also nest. An <article> can contain multiple <section> elements. A <section> can contain <article> elements. The structure should reflect the content, not your desired layout.

Three more landmark elements help describe the regions of a page or a piece of content.

The <header> element represents introductory content for its parent element. There are two common uses.

Page-level header: At the top of the page, the <header> typically contains the site name or logo, the main navigation, and sometimes a search bar.

Article-level header: Inside an <article>, a <header> introduces that article — its title, author, and publication date.

A page can have multiple <header> elements — one at the page level and one inside each article — because each introduces the content of its parent element.

The <footer> element works like <header> in reverse. At the page level, it typically contains copyright information, legal links, contact details, and secondary navigation. Inside an article, it might contain the author's biography, related links, or a citation.

Like <header>, a page can have multiple <footer> elements.

The <aside> element represents content that is tangentially related to the surrounding content — content that could be removed without affecting the main content flow. Pull quotes, sidebars, related links, advertisements, and supporting background information are typical uses.

An <aside> can appear inside an <article> as supplemental content within that article, or it can appear as a sibling of <main> to serve as a page sidebar.

The elements you learned in Sections 6.7 and 6.8 — <main>, <section>, <article>, <header>, <footer>, and <aside> — are called landmark elements. They identify the major regions of a page. There is one more landmark element that belongs in this list: <nav>.

The <nav> element marks a set of navigation links — links that help the user move around the site or page. A page can have multiple <nav> elements: one for the primary site navigation, one for a table of contents, one for footer links.

The aria-label attribute on <nav> gives the navigation a human-readable name, which helps screen reader users distinguish between multiple navigation regions on the same page. You will learn more about aria-* attributes in Chapter 29.

When a page uses landmark elements correctly, users of assistive technologies can do something remarkable: they can jump directly to any major region of the page. Screen readers provide keyboard shortcuts and menus that let users say, "Go to main content," "Go to navigation," or "Go to footer" — and the screen reader jumps immediately to the correct <main>, <nav>, or <footer> element.

Here is what a well-structured page outline looks like using landmark elements:

This structure might seem like a lot of elements for a simple page. For very short pages — a single article, a contact form, a landing page — you will use fewer of these elements. But for any page with multiple regions, meaningful sections, and navigation, this kind of structure is appropriate and expected.

This section brings together everything covered in the chapter. You will build a structured, semantically correct article page step by step. The page represents a single article on an educational website. It has a site header with navigation, a main content area with the article, a sidebar with related links, and a footer.

Before writing code, identify what each piece of content actually is:

• Site name and main navigation → <header> containing the site name and <nav>
• Article title → <h1> inside <article> inside <main>
• Article publication info → <header> inside <article>
• Article sections → <section> inside <article>, each with an <h2>
• Emphasized terms → <em> or <strong> inside <p>
• Sidebar with related links → <aside> inside <main>
• Footer copyright and legal links → <footer>

Start with the HTML document structure from Chapter 5, then add landmark regions:

This page has no CSS attached yet. It will look plain in a browser — black text on a white background, with browser default sizes and spacing. That is expected. In Part III you will attach stylesheets that make it look like a real article page. The HTML structure you have built here will support any visual design you create.