Mark up text with the right HTML elements — headings h1–h6, paragraphs, line breaks, bold, italic, highlight, links, subscript, and superscript.
Why: headings define the document outline — screen readers let users navigate by heading level, and search engines use them to understand page structure. When: one h1 per page as the main title, then nest h2–h6 in order without skipping levels.
<h1>Page Title — only one per page</h1>
<h2>Major Section</h2>
<h3>Sub-section</h3>
<h4>Sub-sub-section</h4>
<h5>Rarely needed</h5>
<h6>Deepest level</h6>Why: <p> is the correct element for any block of prose — it carries semantic meaning and browsers automatically add vertical spacing between paragraphs. When not to: never use <br><br> to fake paragraph breaks; use a new <p> instead.
<p>
This is a paragraph. It is a block-level element,
so it starts on a new line and takes up full width.
</p>
<p>
This is a second paragraph. Browsers add
vertical margin between paragraphs automatically.
</p>When <br>: only inside paragraphs where a line break is meaningful — addresses, poetry, song lyrics. When <hr>: between sections that shift topic. Why not for decoration: use a CSS border instead if you just want a visual divider without the semantic weight.
<!-- <br> — line break inside the same paragraph -->
<p>Line one.<br />Line two, same paragraph.</p>
<!-- <hr> — thematic break between sections -->
<section>
<p>First topic.</p>
</section>
<hr />
<section>
<p>Second topic.</p>
</section>Why <strong> over <b>: screen readers announce <strong> as important, giving users who cannot see bold styling an audible signal. Why <pre>: it preserves every space and newline exactly as written — ideal for code samples or any fixed-width text.
<!-- <strong> = semantic importance (bold) -->
<p>Read the <strong>warning</strong> before proceeding.</p>
<!-- <b> = stylistically bold, no extra meaning -->
<p>The keyword is <b>async</b>.</p>
<!-- <pre> = preserves whitespace and line breaks exactly -->
<pre>
function greet(name) {
return "Hello, " + name;
}
</pre>Why <em> over <i>: screen readers stress <em> when reading aloud, conveying emphasis to users who cannot see italics. When <mark>: when text is highlighted because it is currently relevant — search matches, key terms in a tutorial, not for general visual styling.
<!-- <em> = semantic emphasis (italic) -->
<p>You <em>must</em> save before closing.</p>
<!-- <i> = alternate voice, technical terms, etc. -->
<p>The phrase <i>carpe diem</i> means seize the day.</p>
<!-- <mark> = highlighted / currently relevant text -->
<p>Search results for <mark>html course</mark>.</p>When <sub>: chemical formulas (H₂O, CO₂) and footnote markers. When <sup>: mathematical exponents (mc²) and ordinal suffixes (1st, 2nd). Why not just CSS: these elements carry semantic meaning that assistive technologies and math parsers can interpret.
<!-- <sub> — subscript -->
<p>Water is H<sub>2</sub>O.</p>
<p>CO<sub>2</sub> is carbon dioxide.</p>
<!-- <sup> — superscript -->
<p>E = mc<sup>2</sup></p>
<p>It's the 1<sup>st</sup> of June.</p>Why rel="noopener noreferrer" with target="_blank": without it, the opened page can access and redirect your page via window.opener — a real security risk. When to use anchor links (#id): let users jump to a section without a page load, great for long pages and skip-to-content links.
href required — The URL to navigate to. Can be an absolute URL, a relative path, an #id anchor, mailto:, or tel:.target — "_blank" opens in a new tab. "_self" (default) opens in the same tab.rel — Relationship to the linked page. Always use "noopener noreferrer" with target="_blank" to prevent the opened page accessing your page.download — Tells the browser to download the file instead of navigating to it. The value becomes the suggested filename.aria-label — Accessible label when the link text alone is not descriptive enough (e.g. multiple "Read more" links on the same page).<!-- External link -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
Visit Example
</a>
<!-- Relative link (same site) -->
<a href="/about">About Us</a>
<!-- Anchor link — jump to an id on the page -->
<a href="#section-2">Skip to Section 2</a>
<h2 id="section-2">Section 2</h2>
<!-- Email and phone -->
<a href="mailto:hello@example.com">Email us</a>
<a href="tel:+15551234567">Call us</a>