HTML Elements

🔍 What Are HTML Elements?

HTML elements are the building blocks of HTML pages. An element consists of a start tag, content, and an end tag (for most cases).

>>“In HTML, everything visible or structural on a page is an element.” 🌐

📦 Structure of an HTML Element

The basic syntax of an HTML element looks like this:

Basic Element Structure

<tagname>Content goes here</tagname>

Some elements are empty or self-closing, meaning they don’t have an end tag:

Self-Closing Element

<img src="image.jpg" alt="Image" />

Note

⚠️ Self-closing elements include <img>, <br>, <hr>, and <input>.

🔑 Types of HTML Elements

1. Block-level Elements 📦

Block elements take up the full width of the page and start on a new line.

  • <div>
  • <p>
  • <h1> to <h6>
  • <ul>, <ol>, <li>
  • <form>
2. Inline Elements 📎

Inline elements do not start on a new line. They only take up as much width as necessary.

  • <span>
  • <a>
  • <strong>, <em>
  • <img>
  • <br>, <input>
3. Semantic Elements 🧠

Semantic elements clearly describe their meaning in a human- and machine-readable way.

  • <header> – Top section of the page
  • <nav> – Navigation links
  • <main> – Main content
  • <section>, <article> – Content sections
  • <footer> – Footer of the page

🧪 Example: Combining Elements

Combining Different HTML Elements

<header>
  <h1>My Website</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>
<main>
  <section>
    <h2>Welcome!</h2>
    <p>This is a paragraph with a <a href="#">link</a>.</p>
  </section>
</main>
<footer>
  <p>&copy; 2025 All rights reserved.</p>
</footer>

🛠 Table: Element Summary

ElementTypeDescription
<div>BlockGeneric container for layout
<span>InlineGeneric container for inline text
<h1>BlockMain heading element
<a>InlineDefines a hyperlink
<main>SemanticMain content container

📚 Learn More

>>“Master the elements, and you master the web.” 🧩