What Is Semantic HTML?
Semantic HTML means using HTML elements that communicate the meaning and structure of the content. Instead of using elements only for their appearance, semantic elements describe what different parts of a webpage represent.
Examples of semantic elements include
<header>,
<nav>,
<main>,
<section>,
<article>, and
<footer>.
Common Semantic Elements
- <header> represents introductory content or navigation.
- <nav> contains navigation links.
- <main> contains the main content of a webpage.
- <section> represents a section of related content.
- <article> represents a self-contained piece of content.
- <footer> contains information about the page or its section.
Elements, Attributes, and Values
An HTML element is created using tags. For example,
<p> creates a paragraph element.
Elements can also contain attributes that provide
additional information.
For example, the
lang attribute in
<html lang="en">
has the value "en". This indicates that the
primary language of the document is English.
Another example is the
id attribute used on this page:
<body id="top">.
The value "top" identifies the beginning
of the page and allows a link to return to it.
Example of Semantic Structure
A simple semantic webpage can be structured like this:
<header>
<h1>My Website</h1>
<nav>
<a href="index.html">Home</a>
</nav>
</header>
<main>
<section>
<h2>About Me</h2>
<p>This is my introduction.</p>
</section>
</main>
<footer>
<p>Copyright 2026</p>
</footer>What I Learned
Through this topic, I learned that HTML is not only about displaying content in a browser. The elements used to organize a webpage also communicate the meaning and structure of that content. Using semantic elements makes a webpage easier to understand, maintain, and navigate.
I also learned the difference between an element, an attribute, and an attribute value. Understanding these parts helps me create webpages with clearer structure and more meaningful HTML.
Reference
The purpose and definitions of semantic HTML elements were researched using the Mozilla Developer Network HTML documentation. See the References page for the complete IEEE reference.