Building a sample HTML page

Let’s put our knowledge of text and structural elements into action! Here’s a sample HTML page showcasing various elements:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Sample Page</title>
  </head>
  <body>
    <header>
      <h1>Welcome to My Website!</h1>
    </header>

    <main>
      <h2>About Me</h2>
      <p>
        I'm a web development enthusiast passionate about creating user-friendly
        and informative websites.
      </p>

      <h2>My Skills</h2>
      <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
      </ul>

      <h2>Projects</h2>
      <p>Here are some of my projects:</p>
      <ul>
        <li><a href="project1.html">My First Project</a></li>
        <li><a href="project2.html">Another Cool Project</a></li>
      </ul>

      <h2>Contact</h2>
      <p>Feel free to reach out!</p>
      <p><a href="mailto:me@example.com">Email: me@example.com</a></p>

      <h2>Fun Fact</h2>
      <p>Did you know that the first website went live in 1991?</p>
      <img src="funfact.jpg" alt="Image of a globe" />
    </main>

    <footer>
      <p>&copy; 2024 My Sample Page</p>
    </footer>
  </body>
</html>

Explanation:

We start with the basic HTML structure, including the DOCTYPE declaration <!Doctype>, <html>, <head>, <body>, and closing tags.
The <header> contains the main heading (<h1>) for our website.
The <main> element holds the primary content:
- <h2> elements define subheadings for different sections.
- Paragraphs (<p>) provide descriptive text.
- An unordered list (<ul>) displays skills with list items (<li>).
- Links (<a>) within the list connect to project pages.
- An image (<img>) with an appropriate alt text for accessibility is included.
The <footer> contains copyright information.