Chapter 3 of 10
Text is the core of most web content. HTML has a precise set of elements for structuring text — each one carries meaning beyond just visual appearance.
HTML has six heading levels: <h1> through <h6>. They go from most important to least important. <h1> is the main page heading — there should only be one per page. <h2> through <h6> are subheadings.
<h1>Main Page Title (one per page)</h1>
<h2>Major Section Heading</h2>
<h3>Sub-section Heading</h3>
<h4>Smaller heading</h4>
<h5>Even smaller</h5>
<h6>Smallest heading</h6>WARNING
Don't use headings for size. Beginners often pick heading levels based on how big they want the text to look. That's wrong — use headings to show document structure and use CSS to control size. Search engines and screen readers depend on correct heading hierarchy.
<p>This is a paragraph. HTML ignores extra whitespace,
so it doesn't matter how you format it in the code file.</p>
<p>This is a second paragraph. Each <code>p</code> element
creates its own block with spacing above and below.</p>
<!-- A line break (use sparingly — prefer paragraphs) -->
Line one<br />
Line two<strong>This text is important</strong>
<!-- Renders bold AND signals importance to screen readers -->
<em>This text is emphasised</em>
<!-- Renders italic AND signals emphasis -->
<b>Visually bold but not important</b>
<!-- Use for stylistic bold only — prefer <strong> -->
<i>Visually italic but not emphasised</i>
<!-- Use for technical terms, foreign words — prefer <em> -->
<mark>Highlighted text</mark>
<s>Struck-through text</s>
<code>Inline code</code>
<small>Small print</small>NOTE
Semantic meaning matters. <strong> and <em> carry meaning — they tell assistive technology that the content is important or emphasised. <b> and <i> are purely visual. Use semantic elements whenever you can.