HTML5 Semantic Elements: Explained
HTML was originally created as a language to describe documents on the internet. As the internet has evolved, HTML has also changed. Very quickly, people wanted the web to start looking nicer. The web wasn't initially built to be designed, it was built to share documents. Programmers started using hacks to get elements laid out in different ways on a page. According to Free Code Camp, rather than using the <table></table> to describe information using a table, programmers used them to position elements on a page. This was the beginning of semantics.
What are Semantic Elements?
As visually pleasing and designed web pages progressed, programmers started to use generic tags like <div>. Then, these programmers would give these elements a class or id attribute to describe their purpose. For example, instead of <header> they would write <div class="header>. A semantic element can be used to define different parts of a web page. As HTML5 is still new, the use of generic "non-semantic" elements are still very common. New HTML5 semantic elements improve the understanding between browsers and web developers.
This image from JClifenews, depicts the difference between non-semantic and semantic elements:
non-semantic vs. semantic
List of new semantic elements added in HTML5:
<article> a piece of self contained content within a document like comments, blog posts, etc
<aside> defines the content that can be found aside the main content
<details> defines additional details that the user can view or hide
<figcaption> the element that helps identify the caption for the figure
<figure> defines self-contained content like videos, photos, illustrations
<footer> identifies the footer area
<header> defines the header area or section
<main> defines the main content of the document
<mark> helps browsers identify important content
<nav> defines navigation links
<section> defines sections within the document
<summary> defines a visible heading fir a <details> element
<time> defines time/date
Semantic Elements & Page Layout
Web pages are structured in multiple sections or containers. This makes it easier to design and format pages. Below is a basic HTML5 webpage structure. These elements can be stacked in a few ways. The navigation can live on the top, or the sides, for example.
Real-world Example:
Most web pages are designed with the HTML5 root structure. Below is a Huffington Post article dissected and labeled with HTML5 elements.
Huffington Post Article
You can see in this article, the page is divided into sections. The webpage has a header, navigation, aside, article, and footer. There are several other elements within these, such as images, ads, videos, etc. But it is easy to identify the page structure in this example.
Why Use HTML5 Semantics?
Take a look at these two pieces of HTML code:
non-semantic
semantic
It's easy to read:
Which one is simpler and easier to read? The semantic version, that's right! This is the first thing you'll notice when looking at code. This is a fairly small example, but if you're reading through thousands of lines of code, this will make your life a lot easier.
It has greater accessibility:
Search engines and assistive technology can also better understand the content and context of your website. Semantics allows for better SEO (search engine optimization) along with screen readers for users with sight impairment. Overall, this means it's a better experience for users.
It's more consistent:
When creating a header using non-semantic elements, programmers may write it in a few different ways. They could use: <div class="header">, <div id="header">, <div class="head">, or <div>. That's insane. There's so many ways to write the same header element, and they all depend on the preference of the programmer. Standard semantics make it easy, clear, and consistent across the board.
Wrap-Up
HTML has come a long way. The web was originally created to share documents. Now, sites are styled, designed, and structured. Programmers have adapted their code with HTML5 to keep up with the demands of the users. This programming language makes websites easier to access with assistive technology and SEO. The language is easier to read and more consistent. HTML5 is still a newer coding language, and continues to upgrade. Hope you learned something!