Semantic HTML5 Elements
Semantic HTML uses elements whose names describe their job. Common examples are <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>. A <header> can contain introductory content. <nav> holds important navigation links. <main> contains the central content of the page. <section> groups a themed part of the page. <article> is a self-contained piece that could stand on its own. <aside> holds related side content. <footer> contains closing information. These elements can look like ordinary boxes until CSS styles them. Their special value is meaning. Meaning helps browsers, search tools, screen readers, and developers understand the page.
Why this matters
- ·Semantic elements make the document easier to understand.
- ·Screen readers can use landmarks such as nav and main.
- ·The code explains itself better than a page made only from divs.
Common mistakes
- ·Using semantic tags incorrectly can create a misleading structure.
- ·There should normally be one main content area for a page.
- ·A section should represent a meaningful group of content.
Frequently asked questions
It means the element describes the meaning or role of its content.
Practice questions
Question 1
Build a page with header, nav, main, and footer.
Question 2
Create an article with a heading and paragraph.
Quick check
Just for this topic answer honestly, then check yourself.
1 / 3