Text and Headings

Text and Headings

Text is the foundation of web content. In this tutorial, you’ll learn how to organize and emphasize text using HTML’s heading and text elements.

What you’ll learn:

• How to use heading levels (h1 through h6)
• Creating paragraphs and line breaks
• Emphasizing text with bold and italic
• The difference between semantic and non-semantic emphasis
• Best practices for readable content

Prerequisites:

• Completed Your First HTML Page

---

Headings: Six Levels of Importance

HTML provides six heading levels: <h1> through <h6>. Use them to structure your content from most to least important.

HTML

<h1>This is a Heading 1</h1> <p>The most important heading on the page. Usually the page title.</p> <h2>This is a Heading 2</h2> <p>Section headings. Use these to divide your content into topics.</p> <h3>This is a Heading 3</h3> <p>Subheadings under h2 sections.</p> <h4>This is a Heading 4</h4> <h5>This is a Heading 5</h5> <h6>This is a Heading 6</h6> <p>Less common, but available for very detailed content.</p>

Result ▶ Run

Heading Best Practices

Note

Every page should have exactly one <h1> — This is your main title. Think of it as the headline of a newspaper article.

Use headings in order. Don’t jump from <h1> directly to <h3>. This confuses both readers and search engines:

<!-- Good: Logical progression -->
<h1>Blog Post Title</h1>
<h2>Introduction</h2>
<h2>Main Topic</h2>
<h3>Subtopic A</h3>
<h3>Subtopic B</h3>

<!-- Bad: Skips levels -->
<h1>Blog Post Title</h1>
<h3>Subtitle</h3>

---

Paragraphs and Line Breaks

The Paragraph Element

Use <p> for blocks of text:

HTML

<p>This is a paragraph. It contains a complete thought or idea.</p> <p>This is another paragraph. Notice how they're separated with space.</p> <p>Paragraphs automatically add margin above and below themselves.</p>

Result ▶ Run

Line Breaks

Sometimes you need a line break without creating a new paragraph. Use <br>:

HTML

<p> Roses are red<br> Violets are blue<br> Line breaks keep related text together<br> Without creating new paragraphs </p>

Result ▶ Run

Caution

Don’t use multiple <br> tags to create space. Use CSS for layout. Line breaks are for semantic breaks in content (like poetry or addresses).

---

Emphasis: Bold and Italic

HTML provides two ways to emphasize text. The key difference is semantic meaning:

Strong Importance: <strong>

Use <strong> when text has strong importance or urgency:

HTML

<p> This food is <strong>not</strong> safe to eat. </p> <p> The deadline is <strong>December 25th</strong>. Do not miss it. </p>

Result ▶ Run

Emphasis: <em>

Use <em> to emphasize part of a sentence (like italic text):

HTML

<p> I <em>really</em> enjoyed that movie. </p> <p> She said she was <em>not</em> going to the party. </p>

Result ▶ Run

The Bold and Italic Elements

Sometimes you just need styling without semantic meaning. Use <b> for bold and <i> for italic:

HTML

<p> The scientific name is <i>Canis lupus familiaris</i>. </p> <p> The ship <b>Titanic</b> sank in 1912. </p>

Result ▶ Run

What’s the Difference?

Element	Meaning	When to Use
<strong>	Strong importance	Warnings, critical info, urgent text
<b>	Bold styling	Product names, technical terms (no meaning)
<em>	Emphasis	Stress in a sentence (would change meaning if italicized)
<i>	Italic styling	Scientific names, foreign words, titles

---

Combining Emphasis

You can combine emphasis elements:

HTML

<p> This is <strong>very <em>very</em> important</strong>. </p> <p> The book <i><strong>To Kill a Mockingbird</strong></i> is a classic. </p>

Result ▶ Run

---

Creating Well-Structured Content

Here’s a realistic example combining all these elements:

HTML

<h1>How to Bake Chocolate Chip Cookies</h1> <h2>Ingredients</h2> <p>You will need the following items. <strong>Do not</strong> substitute the butter.</p> <h2>Instructions</h2> <h3>Step 1: Prepare</h3> <p>First, <em>carefully</em> preheat your oven to 375°F.</p> <h3>Step 2: Mix Dry Ingredients</h3> <p>In a bowl, combine flour, sugar, and <strong>baking soda</strong>.</p> <h3>Step 3: Bake</h3> <p>Bake for 10-12 minutes until golden brown.</p>

Result ▶ Run

---

Try It Yourself

Write a short article about your favorite topic:

HTML

<h1>My Favorite Topic</h1> <h2>Introduction</h2> <p>Write an introduction paragraph here.</p> <h2>Why I Like It</h2> <p>Explain what makes this topic interesting to you.</p> <h2>Fun Facts</h2> <p>Share some interesting <strong>facts</strong> or details.</p>

Result ▶ Run

Experiment with:

1. Adding more headings and paragraphs
2. Using <strong> for important words
3. Using <em> to emphasize key points
4. Try combining <strong> and <em>

---

Common Mistakes

Don't Skip Heading Levels

Going from <h1> to <h4> confuses screen readers and search engines. Always use sequential levels: h1, h2, h3, etc.

Using <br> for Spacing

Never do this:

<p>Paragraph 1</p>
<br><br><br>
<p>Paragraph 2</p>

Use CSS margins instead. <br> is for content, not layout.

Overusing Emphasis

If everything is bold or italic, nothing stands out. Use emphasis sparingly for actual important content.

---

Summary

• Use <h1> through <h6> to structure content hierarchically
• Each page should have exactly one <h1>
• Use <p> for paragraphs
• Use <strong> for important content, <b> for styling
• Use <em> for emphasis, <i> for italics without semantic meaning
• Emphasis elements should enhance readability, not replace headings

---

Next Steps

Links & Images

Connect pages with links and add visual content with images. Continue →

Lists

Organize information with unordered and ordered lists. Continue →