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 1

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
Example of Semantic HTML Structure:
<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