HTML5 is more than an update to the HTML4 programming language. It is more than additional HTML tags and functionality. In fact, it is many things. For one it does add exciting new technologies to HTML, and, yes, it does add many new tags. But it is also a new way of thinking when one thinks of web page design. HTML5 is a methodology with specifications that coders are encouraged to adhere to in order to bring order to the web, and maximize functionality, readability and expandability.
Computers have come a long way from the days of bulky monitors, mini-tower cases, keyboards and a tangle of wires connecting it all. Computers are tablets and phones and eReaders. In many cases, computers have evolved towards Artificial Intelligence. Smart hardware needs smart programming languages to make it work. HTML4 was sufficient for many years, but now the language has evolved to meet the challenges of the new day.
One of the “new ways of thinking” inherent to HTML5 does have to do with those new tags, and affect one of the most common tags of yesteryear: the Div tag. Div tags are great to divide a DOM into divisions. But other than telling web developers a division has been made, what does it say?
“Wait,” one may be thinking. “’What does it say?’ It’s not supposed to say anything; it’s supposed to create a division to hold other elements; it’s supposed to help format the page. It’s not supposed to ‘say’ anything . . . right?”
Well, while it is true the Div tag is not supposed to tell developers anything, HTML5 sees this as a problem; therefore, it created many new tag that do ‘say’ something. They not only divide the DOM into divisions (in the same way the Div tag does), they inform developers (and in fact anyone looking at the code) what the division is for. They organize the page. And not just to make the code easier for developers to read and troubleshoot, but for AI devices to ‘read’ the page. They help spiders crawl a page. They divide and identify.
Semantic Elements that identify as well as inform are not new to HTML. HTML4 had semantic elements such as <form>, <table>, and <img>, but HTML5 takes the semantic element concept further, and in slightly different direction. We now have new semantic elements to work with such as <section>, <article>, <figure>, and<aside>. All of these elements form divisions in the same manner as the Div tag, but these tags also identify the purpose of the division. <article> tags contain articles. <figure> tags contain figures, such as images. Unlike <form> or <table>, most of these tags do not have special functionality, but their identifying nature is the same. One of the coolest and most useful new tags, that does in fact have functionality, is the <video> tag. This tag not only informs that a video resides within, but it, along with some new attributes (like the ‘controls’ attribute for displaying functioning play and stop controls) allows a video to be played without the need for a plugin.
There are many resources and books detailing all the HTML5 semantic attributes, and that is far beyond the scope of this blog, but one point should be made about the methodology that governs their use. There has been some confusion as to the use of these new semantic tags. Should they take the place of the Div tag, or should they be used in conjunction with the Div tag? It really is quite simple. The idea is to use them in the same manner semantic Div tags were used in HTML4. If a web designer were designing a form, he/she would use the <form> tag. Now, if a designer is designing section for articles, he/she would utilize the <section> and <article> tags. There is no need for a Div tag when a more informative semantic tag does double duty.
Now it should be noted that the Div tag is not being depreciated, it is still a relevant and useful tag. In fact, it is often the perfect tag to use to create divisions within some of the new semantic tags, or to create containers and wrappers to surround the new tags. The idea is not to phase Div out, but make web page code easier to read for humans and AI alike! 5/2/14 Written and Copyrighted by Computer Networks and Design, LLC. ©2014