Text Formatting

HTML provides several elements to add meaning and emphasis to text. These elements fall into two categories: semantic (meaningful) and presentational.

Semantic Text Elements

Semantic elements convey meaning, not just appearance:

Semantic elements:

• <strong> - Strong importance (usually bold)
• <em> - Emphasis (usually italic)
• <mark> - Highlighted/relevant text
• <del> - Deleted text
• <ins> - Inserted text

Bold and Italic

When to use each:

• <strong>: Important text (screen readers announce it differently)
• <b>: Stylistically bold without extra importance
• <em>: Stressed emphasis (like verbal emphasis)
• <i>: Text in an alternate voice (technical terms, thoughts, foreign words)

Subscript and Superscript

Use cases:

• <sub> - Chemical formulas, footnote numbers
• <sup> - Exponents, ordinals (1st, 2nd)

Quotations

Quotation elements:

• <q> - Short inline quotes (adds quotation marks)
• <blockquote> - Longer block quotes
• <cite> - Citation or title of a work

Abbreviations and Definitions

• <abbr> - Abbreviation (hover to see full form)
• <dfn> - Definition of a term

Small, Time, and Other Elements

More useful elements:

• <small> - Side comments, fine print
• <time> - Dates and times (machine-readable)
• <kbd> - Keyboard input
• <samp> - Sample output

Exercise: Format a Recipe

Format a recipe using semantic text elements:

Semantic text formatting improves both accessibility and SEO while adding meaning to your content!