3

Text, Links, Images & Page Structure

Day 3 of 30

Learning Objectives

By the end of this chapter, you will be able to:

• Structure written content clearly using headings and text elements
• Use links correctly for navigation, external sites, and actions
• Add and manage images properly in a webpage
• Understand and apply basic semantic page structure
• Improve readability, accessibility, and clarity of content
• Think intentionally about how users read web pages
• Use AI prompts to refine content structure and clarity

Vibe Learning Mindset (Chapter Focus)

"Good web design starts with clear communication."

Before colors, layouts, or animations - content and structure come first.

This chapter teaches you how to:

• Organize ideas
• Guide attention
• Make pages readable and usable

What You're Building Today

You'll upgrade your starter homepage into a more complete, readable, and structured page by:

• Improving text hierarchy
• Adding meaningful links
• Managing images correctly
• Using semantic layout elements intentionally

1. How People Read on the Web

Users do not read websites line by line.

They:

• Scan headings
• Skim paragraphs
• Look for links and visuals
• Decide quickly whether to stay or leave

Your job as a web designer is to guide the eye.

Visual Hierarchy (Without CSS Yet)

Even with plain HTML, you control hierarchy by using:

• Headings (h1-h3)
• Paragraph spacing
• Lists
• Section grouping

HTML alone already communicates structure.

2. Headings: Your Page's Skeleton

Heading Levels and Meaning

Rules to remember:

• One <h1> per page
• Headings should be meaningful
• Don't use headings just to make text "big"

Exercise 1 - Improve Heading Structure

Look at your current page:

• Do sections have clear titles?
• Are headings ordered logically?

Refactor if needed.

3. Paragraphs, Line Breaks & Emphasis

Paragraphs

Keep paragraphs short:

• 2-4 sentences max
• One idea per paragraph

Emphasis

<strong> importance

<em> emphasis

These are semantic, not visual.

Line Breaks (Use Sparingly)

Use

instead of stacking
tags.

4. Links: Navigation & Actions

Links are the core of the web.

Basic Link

Opening in a New Tab

Email Link

Common Beginner Mistake

? "Click here"

Use descriptive text:

Exercise 2 - Improve Your Links

Replace vague link text

• Add at least:
• One external link
• One email link

5. Images: Meaningful, Not Decorative

Images can:

• Support content
• Guide attention
• Build emotional connection

They should never be random.

Basic Image Tag

Rules:

• alt is required
• Describe the image's purpose
• Be concise but clear

Folder Organization (Best Practice)

Exercise 3 - Image Audit

For each image on your page:

• Why is it there?
• What does it communicate?
• Is the alt text meaningful?

6. Semantic Page Structure (Expanded)

HTML provides elements that describe purpose, not appearance.

Common Layout Structure

Example: Improved Page Layout