Syllabus

HTML Elements & Tags Explained

Badar KhalilUpdated September 27, 2026 2 min read

HTML Elements & Tags Explained

HTML elements are the building blocks of every webpage. An element is made up of a start tag, content, and an end tag, and understanding how elements work is essential before moving on to CSS, JavaScript, or any modern frontend framework like React or Vue.

What Is the Difference Between a Tag and an Element?

This is one of the most searched beginner questions, so let's clear it up:

A tag is the markup itself, e.g. <p> or </p>.
An element is the tag PLUS its content, e.g. <p>Hello</p>.

Types of HTML Elements

1. Block-Level Elements

Block-level elements always start on a new line and take up the full width available. Examples include <div>, <p>, <h1>–<h6>, <ul>, and <section>.

2. Inline Elements

Inline elements only take up as much width as necessary and do not force a line break. Examples include <span>, <a>, <strong>, and <em>.

Semantic HTML is one of the biggest trending topics in modern web development because it improves SEO, accessibility, and code readability. Semantic elements clearly describe their meaning to both the browser and the developer:

<header> — introductory content or navigation
<nav> — navigation links
<main> — the primary content of the page
<section> — a thematic grouping of content
<article> — self-contained, reusable content
<aside> — content tangentially related to the main content
<footer> — footer information

Code

<header>
  <h1>My Blog</h1>
  <nav>...</nav>
</header>
<main>
  <article>
    <h2>Post Title</h2>
    <p>Post content...</p>
  </article>
</main>
<footer>&copy; 2026</footer>

4. Void Elements

As covered previously, void elements like <img>, <br>, and <input> do not wrap content and don't need a closing tag.

Nesting Elements Correctly

Elements can (and usually do) contain other elements. This is called the DOM tree or element hierarchy, and understanding it is critical for CSS styling and JavaScript DOM manipulation later on.

Code

<div class='card'>
  <h3>Card Title</h3>
  <p>Card description text.</p>
  <button>Learn More</button>
</div>

Why Semantic Elements Matter More Than Ever

With the rise of voice search, screen readers, and AI-driven search engines (like AI Overviews), using semantic HTML elements instead of generic <div> soup has become a major ranking and accessibility factor in 2026 web development standards.

Key Takeaways

An element = opening tag + content + closing tag.
Block-level elements stack vertically; inline elements flow within text.
Semantic HTML5 elements improve SEO, accessibility, and code clarity.
Elements nest inside each other to form the DOM tree.

Try it Yourself HTML

<header>
  <h1>My Website</h1>
  <nav>
    <a href='#'>Home</a>
    <a href='#'>About</a>
  </nav>
</header>
<main>
  <section>
    <h2>Welcome</h2>
    <p>This uses semantic HTML5 elements.</p>
  </section>
</main>
<footer>
  <p>&copy; 2026 My Website</p>
</footer>

Output

Press Run to execute.

Try it Yourself HTML

<!-- Block vs Inline comparison -->
<div style='background:#eee; padding:10px;'>
  <p>This paragraph is block-level.</p>
  <span style='background:yellow;'>This span is inline.</span>
  <span style='background:orange;'>So is this one.</span>
</div>

Output

Press Run to execute.

Exercise: Rebuild a Page Using Semantic ElementsHTML

Convert the following div-based layout into semantic HTML5 using header, nav, main, section, and footer tags.

Try it Yourself HTML

<div class='header'>
  <div class='title'>My Site</div>
</div>
<div class='content'>
  <div class='post'>Hello World</div>
</div>
<div class='footer'>Copyright 2026</div>

Output

Press Run to execute.

This is a self-check — compare your result with the expected output above.

Was this page helpful?