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> represents a section of navigation links.
- <main> contains the main content of the webpage.
- <section> represents a standalone section of related content.
- <article> represents a self-contained piece of content that can be understood independently.
- <footer> contains information about the page or a section of the page.
Elements, Attributes, and Values
An HTML element is a complete part of an
HTML document. Elements are usually created using an opening
tag and a closing tag. For example,
<p>This is a paragraph.</p>
creates a paragraph element.
A tag is the markup used to identify an
element. In the paragraph example,
<p> is the opening tag and
</p> is the closing tag.
An attribute provides additional information about an element. Attributes are written inside an opening tag and usually have a value.
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, a tag, an attribute, and an attribute value. Understanding these parts helps me create webpages with clearer structure and more meaningful HTML. I also became more aware of how elements are nested within one another as part of the Document Object Model.
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.