Home/HTML/Text Elements

Text Elements in HTML

HTML Basics•Reading time: 6 min

Text elements are the building blocks of content on the web. HTML provides various elements to structure and format text in meaningful ways.

In this tutorial, you'll learn about headings, paragraphs, emphasis, and other text elements that will help you create well-structured, semantic HTML documents.

1Headings

HTML offers six levels of headings, from h1 (most important) to h6 (least important). Headings help organize your content hierarchically.

html

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>

Best Practices:

Use only one h1 per page
Don't skip heading levels (e.g., don't go from h2 to h4)
Use headings to create a logical document outline

Visual Example:

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

2Paragraphs

The paragraph element p is used to group related sentences and thoughts.

html

<p>This is a paragraph. It contains multiple sentences and represents a block of text. Browsers automatically add space before and after paragraphs.</p>

<p>This is another paragraph. Notice the space between this paragraph and the one above.</p>

Visual Example:

This is a paragraph. It contains multiple sentences and represents a block of text. Browsers automatically add space before and after paragraphs.

This is another paragraph. Notice the space between this paragraph and the one above.

3Text Formatting

HTML provides several elements for emphasizing or highlighting text:

html

<p>This text is <strong>bold</strong> and this is <em>italic</em>.</p>

<p>This text is <mark>highlighted</mark> with a yellow background.</p>

<p>This is <small>smaller text</small> often used for fine print.</p>

<p>This text contains a <sub>subscript</sub> and a <sup>superscript</sup>.</p>

Visual Example:

This text is bold and this is italic.

This text is highlighted with a yellow background.

This is smaller text often used for fine print.

This text contains a _subscript and a ^superscript.

Semantic Elements:

strong - indicates importance
em - indicates emphasis
mark - indicates relevance

Presentational Elements:

b - bold text without importance
i - italic text without emphasis
u - underlined text

4Try It Yourself

Create an HTML document with various text elements to see how they work. Experiment with different combinations!

index.html

Example Code

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Text Elements Practice</title>
</head>
<body>
  <h1>My First Web Page</h1>
  
  <h2>About Me</h2>
  <p>Hello! My name is <strong>Your Name</strong> and I'm learning <em>HTML</em>.</p>
  
  <h2>My Hobbies</h2>
  <p>I enjoy reading, especially books about <mark>web development</mark>.</p>
  
  <h3>Chemical Formula</h3>
  <p>Water is H<sub>2</sub>O and the equation is E=mc<sup>2</sup>.</p>
</body>
</html>

Pro Tip

When working with text elements, focus on semantics first. Choose elements that best describe the purpose of the content, not just how it should look. This improves accessibility and makes your HTML more meaningful.

Summary

✓
Use h1 through h6 to create a hierarchical document structure
✓
Group related text in p elements
✓
Apply semantic text formatting with strong, em, and other appropriate elements
✓
Choose elements based on meaning, not just appearance

Previous: Create a Webpage Next: Lists in HTML