HTML Mastery · Chapter 2
Text, Headings & Typography Tags
HTML provides a rich set of tags for displaying and formatting text — from headings and paragraphs to bold, italic, quotes and code.
Heading Tags — h1 through h6
Headings create a document hierarchy and are critical for accessibility and SEO. There should only be one <h1> per page.
h1 — Page Title (use only once)
h2 — Major Section
h3 — Sub-section
h4 — Sub-sub-section
h5 — Minor heading
h6 — Smallest heading
SEO Rule: Search engines use headings as signals of page structure. Use headings in order — never skip from h1 to h4. Headings are not for styling; use CSS for size changes.
Paragraph & Inline Text Formatting Tags
| Tag | Rendered Result | Meaning / Use |
|---|---|---|
| <p> | A block of text with margin above and below. | Standard paragraph. Block-level element. Browser adds spacing automatically. |
| <strong> | Bold, important text | Marks text as important (semantic). Bold visually. Use for emphasis that matters to meaning. |
| <em> | Italic, emphasized text | Marks stressed emphasis (semantic). Italic visually. Screen readers change tone of voice. |
| <b> | Bold text (no semantic weight) | Bold without semantic importance. Use for stylistic bold like product names. |
| <i> | Italic text (no semantic weight) | Italic without emphasis. Used for technical terms, foreign words, thoughts. |
| <u> | Underlined text | Underline — avoid for decorative use as it looks like a link. Use for annotations. |
| <s> | Marks text that is no longer accurate or relevant. Used for price comparisons. | |
| <del> | Marks content removed from a document. Has semantic meaning for change tracking. | |
| <ins> | Inserted content | Marks content added to a document. Displays as underlined. |
| <mark> | Highlighted text | Highlights text (like a marker pen). Used for search results or context relevance. |
| <small> | Small print text | Reduces text size. Semantically means fine print, disclaimers, copyright notices. |
| <sub> | H2O | Subscript text — below the baseline. Used in chemical formulas. |
| <sup> | x2 | Superscript text — above the baseline. Used for exponents, footnotes. |
| <span> | Inline container (no default style) | Generic inline container used to apply CSS or JavaScript to a portion of text. |
| <br> | Line break | Self-closing. Forces a line break. Use sparingly — prefer CSS margins for spacing. |
| <wbr> | Word break opportunity | A hint to the browser where to break a long word if needed. Invisible otherwise. |
| <hr> | Horizontal rule — a thematic break between content sections. Self-closing. |
Code, Preformatted & Technical Text Tags
| Tag | Purpose | Example Output |
|---|---|---|
| <code> | Inline code snippet. Browser renders in monospace font. | print("Hello") |
| <pre> | Preformatted text — preserves spaces, tabs, and line breaks exactly as written. | col1 col2 val1 val2 |
| <kbd> | Keyboard input. Represents keys the user should press. | Press Ctrl + C |
| <samp> | Sample output from a computer program. | Error: File not found |
| <var> | A variable in programming or a mathematical expression. | x = y + 2 |
| <abbr> | An abbreviation or acronym. The title attribute shows the full form on hover. | HTML |
| <dfn> | The defining instance of a term. Semantically marks where a term is first defined. | HTML is a markup language. |
| <cite> | A reference to a cited work (book, article, website). | MDN Web Docs |
| <time> | A specific time or date. The datetime attribute provides machine-readable format. | |
| <address> | Contact information for the nearest <article> or <body> ancestor. Rendered in italic. | 123 Web St, Internet |
| <bdi> | Bi-directional isolation — isolates text that may be in a different direction from surrounding text. | User: مرحبا |
| <bdo> | Bi-directional override — overrides the text direction of its content. | Hello |
Quotation & Citation Tags
| Tag | Purpose | Display |
|---|---|---|
| <blockquote> | A long quotation from an external source. Block-level, indented by browsers. The cite attribute can hold the URL of the source. | The best way to learn HTML is by writing it every day. |
| <q> | An inline quotation. Browsers automatically add quotation marks around the content. | She said HTML is fun! |
Common Text-Related Attributes
| Attribute | Applies To | Purpose |
|---|---|---|
| title | Any element | Tooltip text shown on hover. Used by <abbr> and <dfn> to show full form. |
| lang | Any element | Specifies the language of the element's content. Overrides the document lang. |
| dir | Any element | Text direction: ltr, rtl, or auto. |
| datetime | <time>, <del>, <ins> | Machine-readable date/time string. Format: YYYY-MM-DD or YYYY-MM-DDThh:mm. |
| cite | <blockquote>, <q>, <del>, <ins> | URL of the source document for citations. |
Chapter Summary
- Use
<h1>–<h6>in order to create semantic document hierarchy - Prefer
<strong>/<em>over<b>/<i>for meaningful emphasis <mark>,<del>,<ins>all carry semantic meaning beyond visual style- Use
<code>+<pre>for code samples;<kbd>for keyboard shortcuts - Add
titleto<abbr>so screen readers can expand abbreviations