ā† Back to Curriculum

Text Elements and Formatting

šŸ“š Lesson 3 of 20 ā±ļø 25 min

Text Elements and Formatting

25 min

HTML provides a rich set of elements for structuring and formatting text content, enabling you to convey meaning and emphasis beyond simple visual styling. These semantic text elements help both browsers and assistive technologies understand the importance and purpose of different text segments. While CSS handles visual presentation, HTML text elements provide the semantic foundation that makes content accessible and meaningful.

Headings are defined with the <h1> through <h6> tags, creating a hierarchical structure for your document. <h1> represents the most important heading (typically used once per page for the main title), while <h6> represents the least important. This hierarchy is crucial for both SEO and accessibility, as search engines and screen readers use heading structure to understand document organization. Proper heading hierarchy means you should never skip levelsā€”if you use <h1>, your next heading should be <h2>, not <h3>.

Text emphasis elements include <strong> for important text (conveying strong importance) and <em> for emphasized text (conveying emphasis). While these were historically used for bold and italic styling, their semantic meaning is more important than their default visual appearance. <strong> indicates that the text has strong importance, seriousness, or urgency, while <em> indicates stress emphasis. Screen readers may change their tone when encountering these elements, making them essential for accessibility.

The <code> element is used to represent computer code, typically displayed in a monospace font. For inline code snippets, use <code>, while for code blocks, use <pre><code> to preserve formatting and whitespace. Other text elements include <mark> for highlighted text, <small> for fine print, <sub> and <sup> for subscripts and superscripts, and <del> and <ins> for deleted and inserted text.

Proper use of text formatting elements improves document structure, accessibility, and SEO. Search engines use heading hierarchy to understand page structure, screen readers use semantic elements to convey meaning, and proper markup makes content easier to maintain and style. Avoid using presentational elements like <b> and <i> when semantic alternatives like <strong> and <em> are more appropriate.

Best practices include using only one <h1> per page, maintaining proper heading hierarchy, choosing semantic elements over presentational ones, and ensuring that text formatting enhances rather than replaces clear, well-written content. Remember that these elements provide meaning, not just appearanceā€”CSS handles the visual styling.

Key Concepts

  • Headings (<h1> to <h6>) create document hierarchy.
  • <strong> indicates strong importance; <em> indicates emphasis.
  • <code> represents computer code, typically in monospace font.
  • Heading hierarchy should never skip levels (h1 to h2, not h1 to h3).
  • Semantic elements convey meaning, not just appearance.

Learning Objectives

Master

  • Using heading elements to create proper document hierarchy
  • Applying semantic text formatting elements (<strong>, <em>, <code>)
  • Understanding the difference between semantic and presentational elements
  • Maintaining proper heading hierarchy for SEO and accessibility

Develop

  • Semantic HTML thinking and document structure
  • Understanding accessibility implications of text elements
  • Creating well-structured, meaningful content

Tips

  • Use only one <h1> per page for the main title.
  • Never skip heading levelsā€”maintain sequential hierarchy.
  • Prefer semantic elements (<strong>, <em>) over presentational ones (<b>, <i>).
  • Use <code> for inline code and <pre><code> for code blocks.

Common Pitfalls

  • Skipping heading levels (e.g., h1 to h3), breaking document structure.
  • Using multiple <h1> tags, confusing document hierarchy.
  • Using <b> and <i> when <strong> and <em> are more appropriate.
  • Forgetting that text elements provide meaning, not just styling.

Summary

  • Headings create hierarchical document structure.
  • Semantic elements (<strong>, <em>, <code>) convey meaning.
  • Proper heading hierarchy is essential for SEO and accessibility.
  • Text elements provide semantic meaning, not just visual appearance.
  • Use semantic elements over presentational ones when possible.

Exercise

Use different text formatting tags like <strong>, <em>, and <code>.

<p>This is <strong>important</strong> text.</p>
<p>This is <em>emphasized</em> text.</p>
<p>This is computer code: <code>console.log('Hello');</code></p>

Exercise Tips

  • Try using <h1> through <h6> to create a heading hierarchy.
  • Experiment with <mark> for highlighted text.
  • Use <pre><code> for multi-line code blocks.
  • Check how screen readers interpret these semantic elements.

Code Editor

Output