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.

📋 Lists

Lists are everywhere on the web: navigation menus, feature lists, instructions, shopping carts. HTML provides two main types.

Unordered lists

Use <ul> when the order doesn't matter. Each item is wrapped in <li> (list item):

<!DOCTYPE html>
<html>
  <body>
    <h3>Shopping List</h3>
    <ul>
      <li>Apples</li>
      <li>Bread</li>
      <li>Milk</li>
    </ul>
  </body>
</html>

Open Sandbox

Ordered lists

Use <ol> when sequence matters (steps, rankings, etc.):

<!DOCTYPE html>
<html>
  <body>
    <h3>How to make tea</h3>
    <ol>
      <li>Boil water</li>
      <li>Add tea bag to cup</li>
      <li>Pour hot water</li>
      <li>Wait 3-5 minutes</li>
      <li>Enjoy!</li>
    </ol>
  </body>
</html>

Open Sandbox

You can also nest lists inside each other for sub-items. Try adding a <ul> inside one of the <li> elements above!

🔗 Links

Links are what make the web a web. The <a> (anchor) element creates clickable links to other pages, files, or locations.

<!DOCTYPE html>
<html>
  <body>
    <h3>Useful Links</h3>
    <p>
      Visit <a href="https://google.com">Google</a>
    </p>
    <p>
      Opens in new tab:
      <a href="https://github.com" target="_blank">GitHub</a>
    </p>
    <p>
      <a href="#bottom">Jump to bottom</a>
    </p>

    <div style="height: 200px;"></div>
    <p id="bottom">You're at the bottom!</p>
  </body>
</html>

Open Sandbox

Key attributes:

href — The URL or path to link to (required)
target="_blank" — Opens in a new tab
href="#section" — Links to an element with id="section" on the same page

Oh no! 😱

It seems like you haven’t enrolled in the course yet!

Join many other students today and learn how to create bespoke, interactive graphs with d3.js and React!

Enroll

Or Login

← Previous

Your first website

VS Code