03. Text, Headings, and Semantic Content

Good HTML describes the meaning of content. Headings organize ideas, paragraphs hold related sentences, and semantic text elements add useful emphasis.

Build a clear heading hierarchy

Use one main <h1> for the page topic. Use <h2> for major sections and <h3> for subsections. Do not select headings only because of their visual size.

<h1>Beginner Web Development</h1>
<h2>HTML Basics</h2>
<p>HTML gives a web page its structure.</p>
<h3>Why semantics matter</h3>
<p>Meaningful markup helps people and search engines understand content.</p>

Useful text elements

• <strong> marks important content.
• <em> adds spoken emphasis.
• <blockquote> identifies a longer quotation.
• <code> identifies computer code.
• <abbr title="..."> explains an abbreviation.

Practice activity

Add an article to your page with one main heading, two sections, and at least one example of strong or emphasized text. Read the page without considering its styling: the structure should still make sense.