From Antics to Semantics: HTML5
What is HTML?
HyperText Markup Language (HTML) is the standard markup language for web-displayed documents. Programmers initially created HTML to share documents across the web but soon started making more visually appealing web documents. Before semantics, coders used generic tags and specified the desired behavior of each tag with classes or id attributes. Since there were many options for coding each element in earlier HTML versions, many coders stylized their code, making code less universally understandable.
Why is HTML5 better?
Previous versions used generalized tags with interpretative meanings. Each element could be coded in a different style by any coder—however, HTML5 simplified specific tags to create a universal coding language. By simplifying these tags, HTML5 also optimized search engine accessibility and created a more consistent coding language.
What are "Semantic Elements"?
The semantic web allows the insertion of machine-readable metadata about pages and their relation to each other. Metadata tags offer a system for computers to categorize web content. Using a uniform tagging system, computers can access web data and identify relevant values. Inventor of the World Wide Web, Tim Berners-Lee defined the term "Semantic Web" as a web of data that machines can process without human assistance. Semantic elements make their purpose clear, unlike prior non-semantic elements like <div> and <span>, which require descriptive classes or id attributes. HTML5 standardized semantic elements structure the code to make it more readable and manageable.
Semantic Elements Added in HTML5:
<footer>
<header>
<article>
<aside>
<nav>
<section>
<details>
<figcaption>
<figure>
<main>
<mark>
<summary>
<time>
Prior HTML coding used variations of <div> classes to format page sections like <div class="header"> or <div id="article">. Now, these elements are more simply labeled as: <header>, <nav>, <section>, <article>, <aside>, and <footer>. A <div> tag could contain limitless information, whereas semantic elements identify what information will be found in each region. HTML5 can still process outdated tags like <div> and <span> but the use of these tags dwindles rapidly.
Basics of HTML with a Semantic Layout:
HTML5's new semantic elements standardized webpage layout. Without semantics, layout options were limitless but complex and open to interpretation by different computer systems. Semantic elements define the different parts of a webpage using universal coding.
Semantics in Action:
For example, here is a post on Creative Bloq with the semantic elements identified:
There are two navigation menus in this particular example: one for site navigation and the second for the latest trends. The web page has clearly identifiable sections, some of which may include images, ads, or other additional tags.
Why was this necessary?
For anyone starting into web development at any level, it's handy to know the basics of HTML. Before you learn how to use HTML, you should know why you need to learn HTML. Since HTML is the standard markup language for web development, it's important to stay up-to-date on the latest changes in HTML. Luckily, HTML5 is more intuitive than previous versions, so those of us who are new to coding have fewer variations of possible tags to remember. On the contrary, we will have to learn specific tags rather than stylizing general tags.
BitDegree. (2017, June 22). Learn About HTML5 Semantic Tags: Semantic Markup of HTML5 Elements. BitDegree. https://www.bitdegree.org/learn/html5-semantic-tags.
freeCodeCamp.org. (2019, December 12). Semantic HTML5 Elements Explained. freeCodeCamp.org. https://www.freecodecamp.org/news/semantic-html5-elements/.