HTML5

Chapter 2 — HTML Text & Content Tags

📚 Chapter Overview

Structuring text is the primary job of HTML. In this chapter, you will learn how to use Headings, Paragraphs, and Text Formatting tags to make your content readable and professional.

Learning Objectives:

2.1 Headings and Hierarchy

Part 1 — Definition

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). Proper use of headings helps Search Engines (SEO) understand your page structure and helps users scan content quickly.

Part 2 — Syntax

<h1>Main Title</h1>
<h2>Sub-heading</h2>
<h3>Section Title</h3>

Part 3 — Example

Problem: Structure a news article with a headline and a sub-headline.

index.html 
<h1>Breaking: New Technology Released</h1>
<h2>How it affects your daily life</h2>
<p>Today, engineers announced...</p>

Output: The headline appears largest, followed by a slightly smaller sub-headline and normal body text.

Part 4 — Video

Video: Coming Soon

2.2 Text Formatting

Part 1 — Definition

Formatting tags are used to change the visual or logical emphasis of text. <strong> makes text bold and indicates importance, while <em> italicizes text for emphasis.

Part 2 — Syntax

<strong>Bold Text</strong>
<em>Italic Text</em>
<mark>Highlighted Text</mark>

Part 3 — Example

Problem: Highlight a warning message in a paragraph.

index.html 
<p>Note: <strong>Always</strong> save your work. <mark>Unsaved changes will be lost.</mark></p>

Output: "Always" is bold, and the warning is highlighted in yellow.

Part 4 — Video

Video: Coming Soon

🏆 Chapter Challenge

Challenge Objective

Create a "Recipe Page" using only text and formatting tags.

Requirements

Step-by-Step Process

  1. Structure the page with headings.
  2. Write the content in paragraphs.
  3. Apply <strong> to measurement units (e.g., 200g).
  4. Use <hr> to separate sections.

Expected Deliverables

Solve in Editor