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
✓ 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.

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

What's Next?

Great work! You've learned how to:

Structure content with headings
Format text for emphasis and readability
Create organized lists
Build real-world page layouts

In the next lessons, you'll learn about:

Links

Connect your pages and link to external content

Start Links Tutorial

Images

Add visual content to make your pages engaging

Start Images Tutorial

Pro Tip: Practice what you've learned by updating your restaurant menu or Rottnest activities page as you complete the next tutorials. Try adding links to booking pages and images of the food or activities!

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

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