Beginner30 minutesTheoryPracticeProject

Working with Text Elements

🎯 📝 Text is Everywhere

Think about every website you visit: blogs, news sites, social media, online stores. What do they all have in common? Text! How that text looks and is organized makes the difference between a professional site and a messy one.

Did you know that 90% of web content is text-based? Learning to structure and format text properly is one of the most important skills in web development.

Quick Reflection:

Have you noticed how some websites have clear, organized text while others look cluttered?
Why do headings on a page get smaller as you go down?
How does proper text structure help people read faster?

In this lesson, you'll master the art of organizing and formatting text—skills you'll use on every single website you build.

Learning Objectives

By the end of this lesson, you'll be able to:

✓ Understand Understand heading hierarchy (h1-h6) and why it matters for SEO and accessibility
✓ Apply Apply semantic text formatting elements (strong, em, mark) correctly
✓ Write web content that is clear, scannable, and useful to readers
✓ Create Create well-structured content with paragraphs and line breaks
✓ Build organized lists (ordered, unordered, and description lists)

Why This Matters:

Text structure is the backbone of content on the web. Master this and you'll create websites that are easy to read, rank well in search engines, and are accessible to everyone—including people using screen readers.

Writing for the Web

Writing for websites is different from writing essays, reports, or printed brochures. People rarely read web pages from top to bottom at first. They scan headings, look for useful words, and decide quickly whether the page answers their question.

Good web writing helps readers find their next step. It uses clear headings, short paragraphs, meaningful lists, and plain language so the page works for busy visitors, mobile readers, search engines, and people using assistive technology.

Print-style writing

Welcome to our restaurant, where we are pleased to offer a wide range of carefully prepared meals, beverages, and dining experiences for guests who are looking for an enjoyable evening in a warm and welcoming setting.

Web-ready writing

Book a Table at Black Swan Bistro

Enjoy modern Australian food in a relaxed dining room.

Dinner: Tuesday to Saturday
Sunday lunch available
Vegetarian options on every menu

Why Web Writing Uses Structure

Headings let readers and screen reader users jump to the section they need.
Short paragraphs make content easier to read on phones and small screens.
Lists turn dense information into quick decisions.
Specific link and button text tells people what will happen next.

Suggested HTML Pattern

Getting Ready to Code

Before we start, you can choose how you want to code along with this tutorial:

Local Editor

Use your preferred code editor:

Create a new file: text.html
Use VS Code, Sublime, or any text editor
Save and open in your browser

Online Editor

Use an online coding platform:

Practice Area

Use our built-in editor:

Interactive examples below
Try code and see results
No setup required

Tip: For beginners, we recommend using the Practice Area or an online editor to focus on learning rather than setup.

Understanding Heading Hierarchy

HTML provides six levels of headings, from <h1> to <h6>.

Example:

Main Title

Major Section

Subsection

Minor Section

Small Heading

Smallest Heading

Best Practices for Headings

Use only one <h1> per page
Don't skip heading levels (e.g., don't go from h2 to h4)
Keep your heading hierarchy logical
Use headings to create a clear content structure

Text Formatting

HTML provides various ways to format and structure your text:

Key Text Elements:

Black Swan Bistro

Where elegance meets culinary excellence

Experience fine dining in a relaxed atmosphere. Our chef creates seasonal menus using the finest local ingredients.

Now taking bookings for Valentine's Day!

Open Monday-Saturday: 5pm-10pm
Sunday Brunch: 10am-3pm

Text Element Reference

<p> - Paragraphs
<strong> - Important text
<em> - Emphasized text
<br> - Line break
<hr> - Horizontal rule
<small> - Smaller text
<mark> - Highlighted text

Further Reading: Check the MDN documentation on text elements for detailed information.

Working with Lists

HTML provides two main types of lists for organizing content:

List Examples:

Why Choose Us?

Farm-to-table ingredients
Award-winning chef
Waterfront location
Private dining available

Today's Specials

Butternut Squash Soup
Grilled Sea Bass
Chocolate Lava Cake

Types of Lists

<ul> - Unordered list (bullet points)
<ol> - Ordered list (numbers)
<li> - List items

Practice Project: Restaurant Website

Create a complete restaurant page using all the elements we've learned:

Code

Preview

Your Restaurant Name

Your Task

Now that you've learned about headings, text formatting, and lists, let's put it all together! You'll create a restaurant menu page that uses all these elements effectively.

What You'll Practice:

Using heading hierarchy (h1-h6)
Formatting text for emphasis and readability
Creating organized lists
Structuring content logically

⏸️ ⏸️ Pause & Check: Text Formatting

Before the practice exercise, test your understanding:

What's the difference between <strong> and <b> tags?
When would you use <em> instead of <i>?
How do you create a nested list (a list within a list)?
What's the proper heading hierarchy and why does it matter?

Check Your Answers

<strong> indicates semantic importance (meaning), while <b> is just visual boldness without meaning. Use <strong> for better accessibility and SEO.
Use <em> when you want to emphasize something for meaning/importance. Use <i> for technical terms, foreign words, or titles where italics is just a visual style.
Place a complete <ul> or <ol> element inside an <li> element of the parent list.
Start with h1 (main title), then h2 (sections), h3 (subsections), etc. Don't skip levels. This helps screen readers, SEO, and logical document structure.

How confident are you with this concept?

😕 Still confused | 🤔 Getting there | 😊 Got it! | 🎉 Could explain it to a friend!

Restaurant Menu Task

Using the content below, create a well-structured restaurant menu page. Think about how to organize the information to make it easy to read and navigate.

Restaurant Information:

Restaurant Name: Black Swan Bistro
Tagline: Elegant Dining, Modern Australian Cuisine

Description: Welcome to Black Swan Bistro, where we blend traditional Australian 
flavors with modern culinary techniques. Our innovative menu showcases the finest 
local ingredients in a sophisticated yet welcoming atmosphere.

Special Announcement: Join us for our Winter Degustation Series!

Hours of Operation:
Tuesday-Saturday: 5:30pm-10pm
Sunday Lunch: 12pm-3pm
Closed Mondays

Menu Sections:

STARTERS
Small Plates
- Sydney Rock Oysters
- Kangaroo Carpaccio
- Native Mushroom Bruschetta

Soups & Salads
- Pumpkin & Macadamia Soup
- Quinoa & Roasted Vegetable Salad
- Grilled Prawns & Mango Salad

Remember to:

Use <h1> for the restaurant name
Use <h2> for main menu sections (Starters, Main Courses, Desserts)
Use <h3> for subsections (From the Garden, From the Sea, etc.)
Use <strong> for emphasis where appropriate
Use <em> for the tagline
Use <mark> for the special announcement
Use <small> for the hours of operation
Use lists (<ul>) for menu items

Exercise Solutions

HTML Text Elements

You have learned how to structure and format text content using HTML. Compare your solution to the example solutions below for the Black Swan Bistro. Now apply what you've learned about text and headings to the Personal Profile Page for Alex Chen, using the bio as a paragraph, the skills as a list, and the interests as a separate section.

Basic Page Structure

Solution showing how to structure the restaurant's basic information

Lesson checkpoint

Test Your Knowledge

5 questions

Strengthen your understanding of Html Text by answering the quiz below.

Html Text Quiz

Test your understanding of Html Text concepts.

🏁 Lesson Complete: You're a Text Master!

Key Takeaways:

Semantic HTML elements like <strong> and <em> convey meaning, not just visual styling
Proper heading hierarchy (h1→h2→h3) creates accessible and SEO-friendly documents
Lists (ul, ol, dl) organize information clearly for both humans and machines
Text formatting elements make content scannable and emphasize important points
Combining these elements creates professional, well-structured content

Learning Objectives Review:

Look back at what you set out to learn. Can you now:

✅ Use semantic text elements for bold, italic, and emphasis Check!
✅ Create proper heading hierarchies in HTML documents Got it!
✅ Build ordered, unordered, and description lists Can explain it!
✅ Apply text formatting for readability and meaning Could teach this!
✅ Structure restaurant menu content with proper HTML Check!

If you can confidently answer "yes" to most of these, you're ready to move on!

Think & Reflect:

🧠 Semantic Thinking

Look at a news article online. How many different heading levels can you spot?
Why do you think accessibility tools like screen readers need semantic HTML?

💼 Professional Practice

Browse through some restaurant websites. Notice how they use headings, lists, and formatting. What makes some menus easier to read than others?

🤔 Real-World Test:

Every blog post, article, documentation page, and content-heavy website relies on the text formatting you learned today. These are the most frequently used HTML elements in professional web development!

🎯 Looking Ahead:

In the next lesson, Working with Links, you'll learn how to connect pages together and create navigation—the foundation of the web itself!

Recommended Next Steps

Continue Learning

Ready to move forward? Continue with the next tutorial in this series:

Links & Navigation

Practice Projects

Apply what you've learned with these hands-on projects:

Recipe Page

Create a recipe page with various text formatting

HTMLTextFormatting

Start Project

Additional Resources

Deepen your understanding with these helpful resources:

MDN: HTML text fundamentals - Guide to HTML text elements
GOV.UK: Writing for GOV.UK - Practical guidance on writing clear, task-focused web content
Nielsen Norman Group: How Users Read on the Web - Research-backed explanation of why people scan web pages
Nielsen Norman Group: Be Succinct - Guidelines for making web text shorter, clearer, and easier to scan

Progress tracking is disabled. Enable it in to track your completed tutorials.