HTML Formatting

HTML Text Formatting

Formatting text helps convey meaning and structure.

Example: Bold Text, Important Text, Italic Text, Emphasized Text, H₂O, E=mc²

Semantic vs. Presentational Elements

HTML has elements for formatting text. It’s important to distinguish between presentational elements (which just change the appearance) and semantic elements (which add meaning to the text).

While some elements might look the same in browsers by default (like ** and **), using semantic elements is crucial for:

• Accessibility: Screen readers use semantic meaning to interpret the page for visually impaired users.
• SEO: Search engines use semantics to understand the structure and importance of content.
• Maintainability: Semantic HTML is easier to understand and style consistently with CSS.

Modern best practice favors using semantic elements whenever the meaning applies. Use presentational elements only when there’s no specific semantic meaning, just a stylistic difference. Most visual styling should be handled by CSS.

Common Formatting Elements

** (Bold) vs. ** (Strong Importance)

The ** element represents text that is stylistically offset from normal prose (like keywords, product names) without conveying extra importance. It typically renders as bold.

<p>This is normal text. **This text is bold** but not necessarily more important.</p>

The ** element indicates strong importance, seriousness, or urgency. It also typically renders as bold.

<p>This is normal text. **Warning:** Do not proceed without caution.</p>

<i> (Italic) vs. <em> (Emphasis)

The <i> element represents text in an alternate voice or mood, such as a technical term, a foreign phrase, a thought, or a taxonomic designation. It typically renders as italic.

<p>The Latin phrase <i>carpe diem</i> means "seize the day".</p>

The <em> element indicates stress emphasis on a word or phrase, affecting the meaning of the sentence. It also typically renders as italic.

<p>You <em>must</em> complete the assignment by Friday.</p>

Guideline	Use ** and <em> when the meaning fits. Use ** and <i> for stylistic offsets where importance or emphasis doesn’t apply.

<small> (Smaller Text)

The <small> element represents side comments or fine print, like copyright notices or legal disclaimers. It typically renders in a smaller font size.

<p>This is the main content.</p>
<p><small>Copyright &copy; 2024 Example Corp.</small></p>

<mark> (Marked/Highlighted Text)

The <mark> element represents text marked or highlighted for reference or notation purposes, due to its relevance in a particular context. It typically renders with a yellow background.

<p>Search results often <mark>highlight</mark> the search terms.</p>

<del> (Deleted Text)

The <del> element represents deleted or removed text. It typically renders as strikethrough text.

<p>Price: <del>$19.99</del> $9.99</p>

<ins> (Inserted Text)

The <ins> element represents inserted or added text. It typically renders as underlined text.

<p>My favorite <ins>color</ins> is blue.</p>

<sub> (Subscript)

The <sub> element defines subscript text, which appears smaller and lower than the surrounding text (e.g., chemical formulas).

<p>The chemical formula for water is H<sub>2</sub>O.</p>

<sup> (Superscript)

The <sup> element defines superscript text, which appears smaller and higher than the surrounding text (e.g., exponents, footnotes).

<p>Einstein's famous equation: E = mc<sup>2</sup>.</p>

HTML Text Formatting Elements Summary

Tag	Semantic Meaning / Typical Presentation
**	Stylistically offset text (bold)
**	Strong importance (bold)
	Alternate voice/mood (italic)
	Emphasis (italic)
	Side comments/fine print (smaller)
	Highlighted/marked text
	Deleted text (strikethrough)
	Inserted text (underline)
	Subscript
	Superscript

Remember to use CSS for purely visual styling whenever possible.