Frontend Developer Roadmap
Step 1 / 1890 min

HTML

Web Foundations

Explanation

HTML structures content on the web with semantic elements like headings, paragraphs, lists, forms, and links.

Code example

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Page</title>
  </head>
  <body>
    <header>
      <h1>Hello, XirfadHub</h1>
      <nav>
        <a href="#about">About</a>
      </nav>
    </header>
    <main>
      <section id="about">
        <p>I am learning frontend development.</p>
      </section>
    </main>
  </body>
</html>

Helpful resources

Exercise

Build a personal intro page with a header, navigation, two sections, and a footer using semantic HTML.

Quiz

HTML Basics Quiz

Check your understanding of semantic HTML fundamentals.

  1. 1. Which HTML element is best for the main page heading?

    • <h1>
    • <header>
    • <title>
    • <strong>
  2. 2. What does the <nav> element represent?

    • A section of navigation links
    • A table of data
    • An image container
    • A form input