HTML is powerful

In the previous lesson, we created our first HTML file and learned the basic structure of a webpage. Now it's time to explore the building blocks that make HTML so powerful.

HTML has dozens of built-in elements, each designed for a specific purpose. Using the right element for the right job makes your pages more accessible, better for SEO, and easier to maintain.

Let's explore the most important ones you'll use every day.

Members only

4 minutes read

📝 Text Elements

Text is the foundation of most web content. HTML gives you several elements to structure and style it.

Headings

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). Use them to create a clear hierarchy in your content.

<!DOCTYPE html>
<html>
  <body>
    <h1>Main Title (h1)</h1>
    <h2>Section Title (h2)</h2>
    <h3>Subsection (h3)</h3>
    <h4>Sub-subsection (h4)</h4>
    <h5>Minor heading (h5)</h5>
    <h6>Smallest heading (h6)</h6>
  </body>
</html>

Open Sandbox

Pro tip: Each page should have exactly one <h1>. It's typically the main title. Search engines use headings to understand your page structure.

Text formatting

Sometimes you need to emphasize certain words or phrases. HTML has semantic elements for this:

<!DOCTYPE html>
<html>
  <body>
    <p>This is <strong>important</strong> text.</p>
    <p>This is <em>emphasized</em> text.</p>
    <p>This is <mark>highlighted</mark> text.</p>
    <p>This is <del>deleted</del> and <ins>inserted</ins> text.</p>
    <p>This is <code>inline code</code>.</p>
  </body>
</html>

Open Sandbox

Notice the difference: <strong> and <em> carry meaning (important, emphasized), while <b> and <i> are purely visual. Prefer the semantic versions when the emphasis matters.

Oh no! 😱

This lesson is not ready yet.

But we're working hard on it, releasing 1-2 lessons per week. If you're a student, check the discord channel for announcements! ( logo above. )

🙇

← Previous

Your first website

VS Code