Previous: HTML Basics Next: Images

HTML Text & Content

Master text formatting, semantic markup, and content structure in HTML

Introduction to HTML Text

What is HTML Text Content?

HTML Text Content refers to the textual elements and formatting options available in HTML to structure and present written content on web pages. Proper text markup is essential for readability, accessibility, and SEO.

HTML provides a wide range of elements to structure text content, from basic paragraphs and headings to more complex semantic elements that convey meaning to both browsers and assistive technologies.

Why Text Structure Matters:

  • Accessibility: Proper structure helps screen readers navigate content
  • SEO: Search engines use text structure to understand content hierarchy
  • Readability: Well-structured content is easier for users to scan and understand
  • Maintainability: Semantic HTML is easier to style and update
Basic Text Structure Example:
<article>
    <h1>Article Title</h1>
    <p>This is an introductory paragraph.</p>
    <h2>Section Heading</h2>
    <p>This is another paragraph with <strong>important</strong> text.</p>
</article>

HTML Headings

HTML headings are defined with the <h1> to <h6> tags. They create a hierarchical structure for your content, with <h1> being the most important and <h6> the least.

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5
This is a Heading 6

Heading Best Practices:

  • Use only one <h1> per page for the main title
  • Maintain a logical hierarchy (don't skip heading levels)
  • Use headings to structure content, not just for styling
  • Keep headings concise and descriptive
SEO Tip: Search engines use headings to understand page structure and content relevance. Proper heading hierarchy can improve your search rankings.

HTML Paragraphs

The <p> element defines a paragraph in HTML. Browsers automatically add some margin before and after each paragraph.

This is a paragraph of text. It contains multiple sentences and demonstrates how text flows within a paragraph element.

This is another paragraph. Notice the spacing between paragraphs created by the browser's default styles.

Paragraph Formatting Options:

Line Breaks

Use <br> for line breaks within a paragraph:

<p>First line<br>Second line</p>
Horizontal Rules

Use <hr> for thematic breaks between content:

<p>First section</p>
<hr>
<p>Second section</p>

Text Formatting

HTML provides various elements for formatting text with special meaning. These elements convey semantic meaning in addition to visual styling.

Element Description Example Visual Result
<strong> Important text <strong>Important</strong> Important
<em> Emphasized text <em>Emphasized</em> Emphasized
<mark> Highlighted text <mark>Highlighted</mark> Highlighted
<small> Smaller text <small>Small text</small> Small text
<del> Deleted text <del>Deleted</del> Deleted
<ins> Inserted text <ins>Inserted</ins> Inserted
<sub> Subscript text H<sub>2</sub>O H2O
<sup> Superscript text E=mc<sup>2</sup> E=mc2
Note: Avoid using <b> and <i> for styling purposes. Use CSS for visual styling and semantic HTML elements for meaning.

Semantic HTML Elements

Semantic HTML elements clearly describe their meaning to both the browser and the developer. HTML5 introduced many semantic elements that improve accessibility and SEO.

Element Description Usage
<header> Introductory content or navigation Page header, article header
<nav> Navigation links Main menu, table of contents
<main> Main content of the document Primary content area
<article> Self-contained composition Blog post, news article
<section> Thematic grouping of content Chapter, tabbed content
<aside> Content indirectly related to main content Sidebars, pull quotes
<footer> Footer for its nearest sectioning content Page footer, article footer
<figure> & <figcaption> Self-contained content with caption Images, diagrams, code snippets
<time> Specific period in time Dates, times, durations

Simple Examples

Each example below uses one or two semantic tags so you can see what they mean in isolation before combining them on a full page.

1. Page layout — <header>, <nav>, <main>, <footer>

Tells browsers and screen readers which part is the site title, menu, primary content, and bottom info.

<header>
  <h1>My Blog</h1>
</header>

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

<main>
  <p>Welcome to the main content area.</p>
</main>

<footer>
  <p>&copy; 2025 My Blog</p>
</footer>
2. Blog post — <article> + <section>

<article> wraps a self-contained post; <section> groups related parts inside it.

<article>
  <h2>How to Learn HTML</h2>

  <section>
    <h3>Step 1: Basics</h3>
    <p>Start with headings and paragraphs.</p>
  </section>

  <section>
    <h3>Step 2: Practice</h3>
    <p>Build a small page every day.</p>
  </section>
</article>
3. Sidebar tip — <aside>

Use <aside> for content that supports the main topic but is not the main story (tips, ads, related links).

<main>
  <h2>Main Article</h2>
  <p>This is the primary content.</p>
</main>

<aside>
  <h3>Quick tip</h3>
  <p>Use semantic tags instead of only <code>div</code>.</p>
</aside>
4. Image with caption — <figure> + <figcaption>

Groups media and its description so assistive tech knows they belong together.

<figure>
  <img src="chart.png" alt="Sales growth chart">
  <figcaption>Figure 1: Sales increased in Q4</figcaption>
</figure>
5. Date and time — <time>

The datetime attribute gives a machine-readable date; the text inside is what users see.

<p>
  Published on
  <time datetime="2025-05-23">May 23, 2025</time>
</p>

<p>
  Event starts at
  <time datetime="2025-06-01T10:00">10:00 AM, June 1</time>
</p>
6. Text meaning — <mark>, <abbr>

Inline semantic tags describe text, not page regions.

<p>
  Search results: learn <mark>semantic HTML</mark> today.
</p>

<p>
  <abbr title="HyperText Markup Language">HTML</abbr>
  is the standard for web pages.
</p>

Rendered: Search results: learn semantic HTML today. HTML is the standard for web pages.

Remember: Semantic tags describe what content is (navigation, article, aside), not how it looks. Use CSS for colors and layout.
Full page example — combining semantic tags:
<article>
    <header>
        <h1>Article Title</h1>
        <p>Published on <time datetime="2025-10-15">October 15, 2025</time></p>
    </header>
    
    <section>
        <h2>Introduction</h2>
        <p>Article content goes here...</p>
        
        <figure>
            <img src="diagram.jpg" alt="Descriptive text">
            <figcaption>Figure 1: Description of the diagram</figcaption>
        </figure>
    </section>
    
    <footer>
        <p>Written by Author Name</p>
    </footer>
</article>
Benefits of Semantic HTML: Improved accessibility, better SEO, easier maintenance, and future-proof code.

Quotations

HTML provides specific elements for marking up quotations and citations.

Block Quotations

Use <blockquote> for longer quotations that form their own block:

<blockquote cite="source-url">
  <p>Quoted text here...</p>
  <footer>— Author Name</footer>
</blockquote>

The only way to do great work is to love what you do.

Steve Jobs
Inline Quotations

Use <q> for shorter, inline quotations:

<p>As the saying goes, <q>Practice makes perfect</q>.</p>

As the saying goes, Practice makes perfect.

Citations

Use <cite> to reference creative works:

<p>From the book <cite>The Great Gatsby</cite> by F. Scott Fitzgerald.</p>

From the book The Great Gatsby by F. Scott Fitzgerald.

Accessibility

Creating accessible HTML content ensures that your website can be used by people with disabilities, including those using screen readers and other assistive technologies.

Accessibility Best Practices for Text Content:
  • Use proper heading hierarchy (<h1> to <h6>)
  • Provide meaningful link text (avoid "click here")
  • Use semantic HTML elements for structure
  • Ensure sufficient color contrast for text
  • Use alt attributes for images
  • Make forms accessible with proper labels
  • Ensure keyboard navigation works correctly

ARIA Landmarks

ARIA (Accessible Rich Internet Applications) landmarks help screen readers navigate page content:

ARIA Role HTML5 Equivalent Purpose
role="banner" <header> Site-oriented content
role="navigation" <nav> Navigation links
role="main" <main> Main content
role="complementary" <aside> Supporting content
role="contentinfo" <footer> Information about the content
Tip: Use native HTML5 semantic elements instead of ARIA roles when possible, as they provide built-in accessibility features.

Best Practices

Following HTML best practices ensures your code is clean, maintainable, accessible, and SEO-friendly.

Content Structure
  • Use a single <h1> per page
  • Maintain proper heading hierarchy
  • Use semantic elements appropriately
  • Keep paragraphs focused and concise
  • Use lists for related items
Accessibility
  • Provide alternative text for images
  • Ensure sufficient color contrast
  • Use descriptive link text
  • Make forms accessible
  • Test with screen readers
SEO Optimization
  • Use relevant keywords in headings
  • Write descriptive meta descriptions
  • Use semantic markup for content
  • Optimize page loading speed
  • Create a logical URL structure
Code Quality
  • Write valid, well-formed HTML
  • Use consistent indentation
  • Separate content from presentation
  • Comment complex sections
  • Validate your HTML
Pro Tip: Always test your HTML with the W3C Validator (validator.w3.org) to ensure it follows web standards.
Previous: HTML Basics Next: Images