Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look. Semantic HTML is processed by traditional web browsers as well as by many other user agents. CSS is used to suggest its presentation to human users.
https://en.wikipedia.org/wiki/Semantic_HTML
For web design students, there are many career option when considering the universe of the World Wide Web. Front-end development, back-end development, front-end design… the options are many.
For those who wish to do more than only the visual layout of screens using tools like Sketch, the Adobe Illustrator and Photoshop (and so many others) there is one constant: writing good HTML.
Not all HTML is created equal
However, there is a distinction to be made. Not all HTML performs the equally in terms of search engine optimization, and not all HTML is easy for people to read.
Consider this block of code:
<div>
<div>
<div>
<div><a href="index.php">Home</a></div>
<div><a href="portfolio.php">Portfolio</a></div>
<div><a href="about.php">About</a></div>
<div><a href="contact.php">Contact</a></div>
<div><a href="resume.php">Resume</a></div>
</div>
</div>
</div>
Will this work in a browser? Yes, of course it will. Does it describe anything about it’s role within the page? Does it say in what context it occurs? Nope. No clue.
This is a problem for both humans (imagine a new designer just hired on your team who has to learn how a new web site works) and for machines (such as Googlebot) that have to rank web sites according to their relevance to a user’s search words.
Compare the code above to this block:
<main>
<nav role="navigation">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="resume.php">Resume</a></li>
</ul>
</nav>
</main>
In this case, we know we have a list of links used as site navigation within the most important (main) part of the page.
The links here must be important (since they are included in main) and the pages they refer to must also be important.
In other words, the HTML used in the second example reinforces the meaning of the code (the “semantics” of the page) and describes the relationship of one block of code compared to another. For example, the roles of <nav>, <header> and <footer> are fairly self-explanatory.
The proper use of semantic tags will enhance the following set of page properties:
- accessibility – help assistive technologies (devices used by blind people to read the web page out loud for example) read and interpret your webpage
- searchability – help search engines make sense of your content
- internationalization – since only about 13% of the world are native English speakers, proper page structure will help people understand the page contents better
- interoperability – help other programmers/designers/writers/team members understand the structure of your webpage
Or, as SEM Rush put it:
Why do I need to use it?
For sighted users, it is usually easy to identify the various parts of a web page at a glance. Headers, menus, and (hopefully) the main content are all immediately, visually apparent. Now imagine you are blind.
Google and Bing’s bots (spiders) are, if not blind, seriously sight impaired. For them, the visual clues are phenomenally difficult to see and understand.
They need your help. If you can successfully communicate to Google and Bing which part of the page is the header, which the footer and which is for navigation they will thank you. Most importantly, by telling them which is the most important content, you give them an explicit instruction to prioritize that content.
https://www.semrush.com/blog/semantic-html5-guide/
Fight Divitis!
Divitis is a common disease among writers of HTML.
It is the tendency to use DIV tags everywhere for everything all the time. It contributes to bloating the page with unnecessary tags; makes the page complex for nothing, makes the code harder to read, doesn’t help SEO and really is just an example of a lack of understanding of what HTML is supposed to do.
Instead of divs everywhere with IDs and classes, use semantic HTML5 tags. See these two posts to understand divitis better:
https://codepen.io/mi-lee/post/an-overview-of-html5-semantics#the-fight-against-divitis-2
http://www.apaddedcell.com/div-itis-what-it-and-how-avoid-it
HTML 5 Semantic Tags
Here is a list of basic semantic HTML tags. Although not a complete list, it is a good place to start and avoid divitis.
| <article> | Defines an article in a document |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <dialog> | Defines a dialog box or window |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Defines self-contained content |
| <footer> | Defines a footer for a document or section |
| <header> | Defines a header for a document or section |
| <main> | Defines the main content of a document |
| <mark> | Defines marked/highlighted text |
| <nav> | Defines navigation links |
| <progress> | Represents the progress of a task |
| <section> | Defines a section in a document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
