There are many things you currently own that occasionally undergo software or version updates. For example, newer video games get updated all the time post-launch in order to add new content or to improve the playing experience. Apple also annually overhauls their iOS and macOS operating systems to help usability and to help keep their devices feeling new.

One area that you may not have expected to gain occasional updates is within the coding atmosphere. The world of code shifted in 2014, when HTML4 became HTML5, and a whirl of new elements called “semantic elements” were launched with the new programming version.

Semantic elements may seem confusing at first, but after a deep dive on what they are and why they’re useful, semantic elements are actually a pretty easy concept to understand. According to FreeCodeCamp, semantic elements are “those that clearly describe their meaning in a human- and machine-readable way.” These elements are labeled much clearer so the code is not only easier to read, but so search engines can identify the code easier and find the information they need in order to determine where to list the page.

Semantic elements include tags such as:

<header> <section> <article>

The non-semantic equivalents of these tags are:

<div id=”header”> <div class=”section”> <div class=”article”>

Before HTML5, the <div> tag was used for pretty much all of these purposes, and therefore the code looked too similar to distinguish for search engines and too complicated for people to read and comprehend. By adding semantic tags that clearly defined what they were used for and what types of content were contained inside of them, the code became much more varaible.

The semantic tags became much more useful because you no longer needed to worry about how many <div> tags you were using and you no longer got confused over having the same amount of opening <div> tags as closing </div> tags.

Semantic Tags chart (made by me)

These are the main semantic tags that you should focus on learning if you are interested in getting into code. The <header> and <footer> tags can contain all sorts of content within them. The header usually contains headings and titles and appears on the top of the page while the footer contains contact info and legal information and appears on the bottom of the page.

The <nav> tag is used to list navigational links that can send you to different pages. The <aside> tag is used to place content on the sidebar of a webpage. Lastly, the <section> and <article> tags are used to place the primary content on the document, and can be used interchangeably. The <article> tag, however, should be used for pages of content that can be taken and used individually from the website.

Again, each of these elements work the same way as if you placed them as attributes inside of a <div> tag, but for improved SEO and easier understanding when trying to read code, deferring to the semantic tags will make your life so much easier.

Apple Insider website.

Apple Insider is a tech website that primarily covers Apple news and rumors. After inspecting their code, it is possible to see some semantic tags being used.

Apple Insider code with <header> and <nav> semantic tags

In these few lines of code, you can see the site using a <header> tag and a <nav> tag. You can see the <nav> tag come into play on both the top bar and the side bar of the site image above. Apple Insider’s web developers could have used their equivalent <div> tags to achieve the same effect on their site, but if you look at the code above, the developers already had to use plenty of <div> tags to classify elements that did not become semantic, such as “containers”.

Apple Insider <article> semantic tags

The lines of code above show the web developers using <article> semantic tags to clearly classify that the “top story” and “featured story” are their own article pages that can be distributed beyond the website. Their use of <article> tags makes it easier for search engines to find the specific pages without having to search through the entire site.

Apple Insider’s <footer> tags

Lastly, Apple Insider’s footer code is an example of the classic, yet more complicated way to write this type of code: using <div> classes. The third line in this screenshot shows <div class=”footer”>. This is perfectly acceptable, however because of the amount of <div> tags used in this screenshot alone, it is very hard to distinguish which line is the true footer and which </div> tag is the one that closes the footer tag. It would be much simpler to use <footer> and </footer> instead.

I hope that my explanation and my use of Apple Insider’s site made semantic elements easier to understand. Semantic elements are relatively new, but they will make your coding process so much easier, so go ahead and give them a shot in your next document!

1 comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: