HTML <div> and semantic HTML tags
Semantic HTML
Instead of using only <div> tags to divide up an HTML page, semantic HTML allows us to replace "div" with more meaningful names such as:
| Tag | Purpose |
|---|---|
| <header> | the top of a page |
| <nav> | ... a menu within a header |
| <main> | the main content of a page |
| <section> | ... a sub-portion of the main content |
| <article> | ... an item in a list of content (think of a list of blog posts!) |
| <aside> | ... related but "optional" content |
| <figure> | ... a piece of media such as an image or chart or diagram |
| <footer> | the bottom of a page |
Note that we could use any of those tags to contain any kind of content but we should use those tags mindfully out of respect for other developers!
Syntactic sugar?
The technical term for this kind of "nominal naming" is known as syntactic sugar - we could place a <footer> tag at the top of a page but we should not!
Neatness of semantic HTML
Compare this HTML...
<html>
<head>...</head>
<body>
<section>
<article>
<h2>Blog post for January 2</h2>
<p>Except for that blog post...</p>
</article>
<article>
<h2>Blog post for January 1</h2>
<p>Except for that blog post - happy new year!</p>
</article>
<aside>
<p>Don't forget to wish your co-workers a happy holiday!</p>
</aside>
</section>
</body>
</html>... with this HTML:
<html>
<head>...</head>
<body>
<div>
<div>
<h2>Blog post for January 2</h2>
<p>Except for that blog post...</p>
</div>
<div>
<h2>Blog post for January 1</h2>
<p>Except for that blog post - happy new year!</p>
</div>
<div>
<p>Don't forget to wish your co-workers a happy holiday!</p>
</div>
</div>
</body>
</html>(The former should certainly look more readable than the latter!)
Older tags as semantic HTML?
Tags such as <table> and <form> have existed for as long as HTML, but we can see them as a pre-cursor to semantic HTML:
- their tags say what they are
- we could use
<div>tags and JavaScript to re-create their functionality (but why would we?)
Semantic HTML tags such as <section> did not gain widespread use until the mid-2010s when most modern browsers could parse them!