Code To Make Things Simple For Everyone
When it comes to building web pages, it is important to keep the code relevant to the most recent standards.
HTML is the basic language that web developers have been using for the past two decades. Unfortunately, sites built early on may not be picked up by search engines like Google because they can be difficult for the web crawlers to interpret.
According to Miroslav Gajic, who authored a page on HTML5 semantics, recent tweaks to HTML have made it easier for web crawlers to pick up material on websites.
The latest version of HTML is HTML5. Six years ago, HTML5 was still relatively new and not all browsers could interpret the code. Now, most browsers are able to read HTML5.
One of the big differences between HTML and HTML5 is cleanliness. The code makes more sense. HTML seems very linear while HTML5 seems like it is more customizable to have more elements within elements that can be placed in various spots throughout the site – that’s a big sentence, I know. But the complexities of HTML5 and what it can do are as complex as that sentence.
Gajic breaks down the differences between HTML5 and HTML in his post.
<div> tags are used often in HTML and call a certain styling from a cascading style sheet that allows it to look and behave a certain way.
Some examples of div tags include <div id=”header”>, <div id=”main-content”>, and <div id=”footer”>.
When you look at how semantic HTML handles these tags, it removes <div id>, and the developer is left with more simple tags – <header>, <main>, and <footer>.
While semantic HTML simplifies the code, HTML5 semantics take it a step further by using tags specific to the element.
So a <nav> tag represents navigation, and it can be placed almost anywhere on a page, according to Garjic.
Jason Barnard wrote an article in September 2017 titled, “HTML5 Semantic Tags: What Are They And How To Use Them. In the article, he gave several examples of HTML5 semantics, including <header>, or the header element; <main>, or the body of the page; <article>, or self-contained content that stands independently of the page or site it’s on; <section>, or a tag used to group content together based on a similar theme; <aside>, or a tag used to define content that is less important and shows in sidebars; and <footer>, or the content at the bottom of the page.
“Here we have simply defined what role each part of the page plays,” Barnard said. “When you start applying HTML5, this is a safe place to start – header, nav, main, footer.”
While the layout is still somewhat linear, the new tags make it easier for search engine spiders to make sense of every element on a page.
The new tags also make it easier for an outside web developer, or someone who did not write the code, to make sense of the code with ease. The tags are more specific, and much easier to work with.
References:
https://www.pluralsight.com/guides/semantic-html – Miroslav Gajic
https://www.semrush.com/blog/semantic-html5-guide/ – Jason Barnard – HTML5 Semantic Tags: Whar Are They And How To Use Them – September 2017