Someone wanted to learn this too, so Grasp built them a personal learning path.

Text Structure with HTML

Hello! Welcome back to your front-end programming course.

In our first lesson, we set up the fundamental "skeleton" of a webpage using the <!DOCTYPE html>, <html>, <head>, and <body> elements. You learned that the <body> is where all the visible content lives.

Today, we'll start adding that content. This lesson focuses on how to structure text on a webpage. Our goal is to learn how to use common HTML elements for text content, including headings, paragraphs, and lists.

As a designer, you're already an expert in creating clear information hierarchy through typography and layout. Today, you'll learn the HTML tags that create this same hierarchy semantically, providing structure that is understood not just by users, but also by browsers, search engines, and assistive technologies.

1. The Foundation of Text: Headings and Paragraphs

Imagine you have a block of text for a webpage. If you just paste it into your HTML file, the browser won't understand its structure. Line breaks and spacing in your code editor are mostly ignored by the browser. We need to explicitly tell the browser what's a heading and what's a paragraph.

This video provides an excellent introduction to the two most fundamental text elements: paragraphs (<p>) and headings (<h1> through <h6>).

HTML & CSS for Beginners Part 3: Paragraphs and Headings

Watch this video from Kevin Powell's 'HTML & CSS for Beginners' series. It clearly demonstrates why we need specific tags for paragraphs and how to use the heading tags to create a hierarchy.

Watch from the beginning (or 00:52) to 05:04. Pay close attention to how the browser renders text without tags versus with tags, and the visual and structural differences between the heading levels.

Key Concepts from the Video:

Paragraphs (<p>): You must wrap each paragraph of text in <p> tags. This creates a distinct block of text, with space separating it from other elements. You can't just press "Enter" in your code to create a new paragraph.
Headings (<h1> - <h6>): These elements are used for titles and subtitles. <h1> is the most important heading, and <h6> is the least important.

2. The Importance of Semantic Hierarchy

As the video mentioned, headings aren't just for making text look big and bold. They create a meaningful structure for your document. This is one of the most important concepts in HTML, and it aligns directly with your work in design.

<h1>: This should be the main title of your page. For best practice, you should only have one <h1> per page.
<h2>: These are major section titles, like chapters in a book.
<h3> to <h6>: These are for sub-sections, sub-sub-sections, and so on.

A logical heading structure is crucial for:

Accessibility: Screen reader users can navigate a page by its headings. A clear hierarchy allows them to quickly understand the page layout and jump to the section they need.
SEO (Search Engine Optimization): Search engines like Google analyze headings to understand the main topics of your page, which can influence your search ranking.

Best Practice: Never skip heading levels (e.g., going from an <h1> to an <h3>). This creates a disconnected structure that is confusing for both screen readers and search engines. Think of it as creating an outline for a document; you wouldn't skip a major bullet point level.

To dive deeper into the "why" behind this structure, the Mozilla Developer Network (MDN) has an excellent article.

Headings and paragraphs - Learn web development | MDN

This MDN article, 'Headings and paragraphs', is a fantastic reference that reinforces what you saw in the video and explains the concept of semantic HTML in more detail.

Read the sections 'Implementing structural hierarchy', 'Why do we need structure?', and 'Why do we need semantics?'. This will solidify your understanding of why using the correct tag for the job is so important.

3. Organizing Content with Lists

Lists are another fundamental tool for structuring content. HTML provides three different types of lists for different scenarios.

Unordered List (<ul>): For a list of items where the order does not matter. This renders with bullet points by default.
Ordered List (<ol>): For a list of items where the order is important, like a set of instructions. This renders with numbers by default.
Description List (<dl>): For a list of terms and their corresponding descriptions, like a glossary.

This next video provides a clear, practical tutorial on how to create all three.

HTML Lists Tutorial | HTML5 List Types: Ordered, Unordered & Description

This 'HTML Lists Tutorial' by Dave Gray walks through creating ordered, unordered, and description lists, showing the specific tags for each.

Watch the following segments: 'Creating Ordered Lists' (02:37 - 04:26), 'Creating Unordered Lists' (04:26 - 06:38), and 'Creating Description Lists' (06:59 - 09:03).

List Structure Summary:

Unordered & Ordered Lists:
- The entire list is wrapped in either <ul> or <ol>.
- Each individual item within the list is wrapped in an <li> (list item) tag.
Description Lists:
- The entire list is wrapped in a <dl> tag.
- Each term is wrapped in a <dt> (description term) tag.
- Each description is wrapped in a <dd> (description details) tag.

For a handy text reference and some interactive practice, the MDN "Lists" article is perfect.

Lists - Learn web development | MDN

This MDN article on 'Lists' provides clear code examples and explanations for all list types, including how to nest one list inside another.

Skim through the sections on 'Unordered lists', 'Ordered', 'Nesting lists', and 'Description lists'. You don't need to read every word, but notice the structure and use cases for each. Feel free to try the interactive examples.

4. Practice: Structuring a Project Page

Now, let's apply what you've learned. Open the index.html file you created in the last lesson. Replace the content inside the <body> tags with the following structured content. This example mirrors something you might create in a design portfolio: a simple project description page.

<body>
    <h1>Project: Mobile Banking App Redesign</h1>

    <p>This project focused on redesigning the user interface and experience for a mobile banking application to improve usability and user engagement.</p>

    <h2>Project Goals</h2>
    <ul>
        <li>Create a modern and intuitive user interface.</li>
        <li>Streamline the process for checking balances and transferring funds.</li>
        <li>Ensure the design is accessible for all users.</li>
    </ul>

    <h2>Design Process</h2>
    <ol>
        <li>User Research & Persona Creation</li>
        <li>Wireframing & Information Architecture</li>
        <li>High-Fidelity Prototyping in Figma</li>
        <li>User Testing & Feedback Iteration</li>
    </ol>
</body>

After you've added this code, save the file and look at it with Live Server. Notice how the tags you've used create a clear, readable structure on the page.

Conclusion

Excellent work! You've now moved beyond the basic document shell and can structure text content in a meaningful way. This skill is the foundation for building any content-driven website, from a simple blog post to a complex application.

Key Takeaways:

Use <p> tags to define paragraphs of text.
Use <h1> through <h6> to create a logical and semantic hierarchy for your content. Do not skip levels.
Use <ul> for bulleted lists where item order is not important.
Use <ol> for numbered lists where item order matters.
Use <dl> for term/definition pairs.
The structure you create with these tags is vital for accessibility and SEO.

In our next lesson, we will explore how to use HTML attributes to add metadata and functionality to elements. We'll see how attributes can give our tags new capabilities, such as turning a piece of text into a clickable link.

Previous lesson

Structuring Your First HTML Document

Next lesson

HTML Attributes: Metadata and Functionality

Can't find a good explanation? Sign up and we'll make it for you