Learn › Web Development › HTML Fundamentals — Structure & Semantic Elements

HTML Fundamentals — Structure & Semantic Elements

⏱ 12 min read read

HTML (HyperText Markup Language) defines the structure and content of every web page. HTML5 introduced semantic elements that give meaning to your structure — not just visual appearance.

Block vs Inline Elements:
Block elements start on a new line and take the full width available: <div>, <p>, <h1>–<h6>, <section>, <article>, <ul>, <li>.
Inline elements sit inside text and only take as much space as needed: <span>, <a>, <strong>, <em>, <img>.

Semantic HTML5 Elements:
<header> — page or section header
<nav> — navigation links
<main> — the primary content of the page (only one per page)
<section> — a thematic grouping of content
<article> — self-contained content (blog post, news item)
<aside> — sidebar or supplementary content
<footer> — page or section footer

Why semantics matter:
Screen readers use semantic elements to help blind users navigate.
Search engines weight semantic content more heavily for SEO.
Your code becomes self-documenting and easier to maintain.

Links and Images:
<a href="page.html"> — links to another page (relative)
<a href="https://google.com" target="_blank"> — opens in new tab
<img src="photo.jpg" alt="Description"> — ALWAYS include alt text!

IMPORTANT: The alt attribute is not optional. It is required for accessibility and SEO.

Lists:
<ul> — unordered list (bullet points)
<ol> — ordered list (numbered)
<li> — list item (used inside both)

Forms — The Gateway to Interactivity:
<form action="/submit" method="POST">
<input type="text"> — text field
<input type="email"> — email field with built-in validation
<input type="password"> — hidden text
<input type="checkbox"> — tick box
<select> — dropdown
<textarea> — multi-line text
<button type="submit"> — submit the form

ALWAYS pair every input with a <label> — it improves accessibility and usability.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Fundamentals</title>
</head>
<body>

  <!-- Semantic page structure -->
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="#">Home</a> |
      <a href="#">About</a> |
      <a href="#">Contact</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>My First Post</h2>
      <p>This is a paragraph of <strong>important</strong> and <em>emphasized</em> text.</p>

      <!-- Image with alt text (required!) -->
      <img src="https://picsum.photos/400/200" alt="A random placeholder image">

      <!-- Unordered list -->
      <h3>Things I Love</h3>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>

      <!-- Ordered list -->
      <h3>Steps to Build a Website</h3>
      <ol>
        <li>Plan your content</li>
        <li>Write the HTML</li>
        <li>Style with CSS</li>
        <li>Add interactivity with JavaScript</li>
      </ol>
    </article>

    <!-- A simple contact form -->
    <section>
      <h2>Contact Me</h2>
      <form>
        <label for="name">Your Name:</label><br>
        <input type="text" id="name" name="name" placeholder="Alice" required><br><br>

        <label for="email">Email Address:</label><br>
        <input type="email" id="email" name="email" placeholder="alice@email.com" required><br><br>

        <label for="message">Message:</label><br>
        <textarea id="message" name="message" rows="4" cols="40"></textarea><br><br>

        <button type="submit">Send Message</button>
      </form>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 My Blog. All rights reserved.</p>
  </footer>

</body>
</html>

← Hello, Web! — How the Internet Works CSS Fundamentals — Selectors, Colors & →