HTML Text Formatting, Headings & Typography

Master heading hierarchy, semantic text emphasis, quotations, code snippets, lists, and screen reader typography rules.

1. Heading Hierarchy & Document Outline (<h1> to <h6>)

HTML provides 6 levels of headings. Headings are structural signposts used by search engine web scrapers and assistive screen readers to generate a table-of-contents outline of your webpage:

💡 Real-World Analogy: Book Chapters & Subsections

Think of heading hierarchy like the table of contents in a textbook:
• <h1> is the Book Title (Only 1 per page representing the main topic).
• <h2> represents major Chapters.
• <h3> represents Sub-topics under that chapter.
• Never skip heading levels (e.g. going directly from <h1> to <h4>) just to get smaller visual font sizing — always use CSS for font size!

<h1>Fullstack Web Engineering Guide 2026</h1>
  <h2>Module 1: HTML5 & Modern Semantic Web</h2>
    <h3>Section A: Document Anatomy</h3>
    <h3>Section B: Accessibility & ARIA</h3>
  <h2>Module 2: CSS3 Architecture</h2>
    <h3>Flexbox & CSS Grid Layouts</h3>

2. Semantic Emphasis: <strong> vs <b> and <em> vs <i>

While visual browsers render both bold and italics, their semantic implications for assistive technologies differ radically:

Semantic: <strong> & <em>

Conveys Real Meaning & Pitch

<strong>: High urgency / serious importance (screen readers announce with heavier inflection).
<em>: Stressed emphasis changing sentence meaning.

<p>Warning: <strong>Do not</strong> share your OTP.</p>
<p>I <em>love</em> JavaScript.</p>

Stylistic: <b> & <i>

Pure Visual Styling

<b>: Draw attention without added importance (e.g. keywords in a product review).
<i>: Alternate voice, technical terms, idioms, ship names, or foreign words.

<p>Species: <i>Homo sapiens</i></p>
<p>The <b>bolded</b> product code.</p>

3. Quotations, Citations & Code Snippets

HTML Source Code typography.html

<blockquote>
  <p>The Web does not just connect machines, it connects people.</p>
</blockquote>

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy <code>let score = 100;</code></p>

<p>Learn <abbr title="Cascading Style Sheets">CSS3</abbr> & <strong>Web APIs</strong>.</p>

Rendered Browser Output ● Live Preview

"The Web does not just connect machines, it connects people."

Press Ctrl + C to copy let score = 100;

Learn CSS3 & Web APIs.

4. Lists: Unordered (<ul>), Ordered (<ol>) & Description (<dl>)

List Type	Tags Used	When to Use
Unordered List	`<ul>` & `<li>`	Items where sequence order does not matter (bulleted list, navbar links, feature items).
Ordered List	`<ol>` & `<li>`	Sequential step-by-step instructions, rankings, or algorithm pipelines.
Description List	`<dl>`, `<dt>` (term), `<dd>` (desc)	Key-value pairs, glossaries, product spec sheets, metadata rosters.

HTML Source Code description-list.html

<dl>
  <dt>HTTP</dt>
  <dd>Hypertext Transfer Protocol for web communication.</dd>
  
  <dt>DOM</dt>
  <dd>Document Object Model tree of parsed elements.</dd>
</dl>

Rendered Browser Output ● Live Preview

HTTP: Hypertext Transfer Protocol for web communication.
DOM: Document Object Model tree of parsed elements.

5. HTML Typography Interview Quiz Deck

Test your knowledge with 5 text formatting and typography placement questions:

⭐ Medium • Semantic vs Stylistic <strong> vs <b>

What is the primary difference between <strong> and <b> in HTML5?

A) <strong> is deprecated; <b> is the modern standard.

B) <strong> indicates strong importance for accessibility & SEO, while <b> is purely stylistic bolding.

C) <strong> only works inside <h1> tags.

D) <b> renders twice as thick as <strong>.

⭐ Easy • Heading Outlines Document Hierarchy

Why should web developers avoid skipping heading levels (e.g., jumping from <h1> directly to <h3>)?

A) It confuses screen reader users who navigate via heading outlines.

B) The browser parser throws a fatal DOMException error.

C) It completely halts CSS stylesheet loading.

D) Headings are strictly required inside <header> tags only.

⭐ Easy • Typography Tags Keyboard Inputs

Which HTML tag represents user keyboard keystrokes (such as Ctrl + S)?

A) <key>

B) <kbd>

C) <button>

D) <input>

⭐ Medium • HTML Lists Description Lists

What element pair is used inside a Description List (<dl>)?

A) <li> and <lu>

B) <dt> (term) and <dd> (description/definition)

C) <th> and <td>

D) <p> and <span>

⭐ Easy • Semantic Tags <mark> Highlighting

What is the semantic role of the <mark> tag in HTML5?

A) Creates a checklist checkbox.

B) Highlights relevant search query match keywords or reference markers.

C) Underlines grammatical spelling errors.

D) Inserts a bookmark anchor link.

🎯 Placement Interview Takeaways

Q: Can multiple `<h1>` elements be present on a single webpage?
Ans: While HTML5 technically permits an <h1> inside nested <article> or <section> elements, modern SEO best practices and WCAG accessibility standards strongly recommend exactly ONE `<h1>` per page representing the master page topic.
Q: What is the difference between `<pre>` and `<code>`?
Ans: <code> is an inline semantic tag indicating code syntax. <pre> is a block container that preserves exact whitespaces, indents, and line breaks. They are combined as <pre><code>...</code></pre> for multi-line code blocks.