This blog will briefly discuss HTML, HTML5, and the new HTML5 Semantic/Structural Elements, as well as why you should use HTML5, and how one could migrate an HTML4 formatted document to an HTML5 format.
What is HTML?
HTML is the standard markup language for creating Web pages1.
- HTML stands for Hyper Text Markup Language
- HTML describes the structure of Web pages using markup
- HTML elements are the building blocks of HTML pages
- HTML elements are represented by tags
- HTML tags label pieces of content such as “heading,” “paragraph,” “table,” and so on
- Browsers do not display the HTML tags, but use them to render the content of the page
Brief History of HTML
The following table illustrates the version history of HTML2.
For reference, HTML5 was introduced in 2014.
HTML5 is a markup language used for structuring and presenting content on the internet. It is the fifth and current major version of the HTML standard.
It was published in October 2014 by the World Wide Web Consortium (W3C) to improve the language with support for the latest multimedia, while keeping it both easily readable by humans and consistently understood by computers and devices such as web browsers, parsers, etc. HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML3.
New HTML 5 Semantic/Structural Elements
HTML5 4 offers new elements for better document structure:
|<article>||Defines an article in a document|
|<aside>||Defines content aside from the page content|
|<bdi>||Isolates a part of text that might be formatted in a different direction from other text outside it|
|<details>||Defines additional details that the user can view or hide|
|<dialog>||Defines a dialog box or window|
|<figcaption>||Defines a caption for a <figure> element|
|<figure>||Defines self-contained content|
|<footer>||Defines a footer for a document or section|
|<header>||Defines a header for a document or section|
|<main>||Defines the main content of a document|
|<mark>||Defines marked/highlighted text|
|<menuitem>||Defines a command/menu item that the user can invoke from a popup menu|
|<meter>||Defines a scalar measurement within a known range (a gauge)|
|<nav>||Defines navigation links|
|<progress>||Represents the progress of a task|
|<rp>||Defines what to show in browsers that do not support ruby annotations|
|<rt>||Defines an explanation/pronunciation of characters (for East Asian typography)|
|<ruby>||Defines a ruby annotation (for East Asian typography)|
|<section>||Defines a section in a document|
|<summary>||Defines a visible heading for a <details> element|
|<time>||Defines a date/time|
|<wbr>||Defines a possible line-break|
Many web sites contain HTML code like: <div id=”nav”> <div class=”header”> <div id=”footer”> to indicate navigation, header, and footer.
HTML5 offers new semantic elements to define different parts of a web page. The following figure illustrates how a page may be structured using HTML 5.
Why Use HTML5
HTML5 is the latest iteration of HTML that addresses modern needs and expectations of websites. It deals with things such as semantic markup and providing information about content it describes. It is becoming the new standard for good web development, and browser vendors love it as it works across all desktop and mobile devices. Below are 5 reasons why HTML5 matters5:
HTML5 is Becoming a New Standard
But why is it so good? What does it all mean? More importantly, why does it matter? There are a couple of factors that explain this. First of all, HTML5 is very rapidly becoming a standard. Developers want to use HTML5, which in turn makes it all the more popular and likely to stick around. Modern browsers all support HTML5 allowing developers to use all the new and exciting features it offers in order to create more dynamic end results. It doesn’t matter if you create a new plugin, a UI mobile framework, or a new fancy carousel, your developer wants to do it all in HTML5. And if you are a developer, you want to, or should want to, do it in HTML5.
HTML5 is Faster and Cheaper
What’s the main reason the industry wants to support HTML5? It reduces development time. By focusing on the latest browsers only, while providing graceful content degradation, developers can focus on writing functionalities that work and look good while using the latest tools. This makes the whole process quick and very rewarding for the developers themselves.
HTML5 is Modern
Next to HTML5 stands another awesome new technology: CSS3. Often, when using the term HTML5, it is assumed that CSS3 is included in the definition. What’s so awesome about CSS3? Well, like HTML5, it is a new iteration of CSS specification including modern browser support for visual styling. This allows achieving great looking effects like rounded corners, shadows or animations within a couple lines of code, rather than using laborious image slicing techniques. This both increases the fun factor of developing such features, and reduces development time significantly, allowing developers to focus their efforts on things that matter. As a bonus you get lightweight websites with a reduced number of files and images that need to be downloaded for the site to look good. All this makes sites load faster, increasing responsivity and enhancing user experience.
HTML5 Lets You Do Things Previously Impossible
HTML5 Supports Mobile Devices
With all that in mind, we come to a conclusion, the final reason why HTML5 matters: it is mobile friendly. With all that was mentioned earlier, the lightweight visual effects, the support from industry, and the support from browser vendors, it is now easier than ever to develop a web site or a web application in HTML5—one that can be deployed on both desktop and mobile devices. Content was never closer to the end user and it doesn’t matter if you are browsing on your desktop, on your laptop or on your smartphone. While the smartphone market is diverging with different supported operating systems and native applications, HTML5 is supported throughout the whole spectrum of mobile vendors thus allowing businesses the ability to deliver content—your product and/or your service—to a wide array of customers. And that is what matters.
HTML5 is here to stay. It has support from the community, devices and browser vendors, and is a great way to put content out there closer to the user. Working with the latest technologies is always fun and with a rapidly growing mobile market, it is a new and exciting place to be. HTML5 helps with all that. So, to conclude, HTML5 does matter, and it should matter to you!
Migrate from HTML4 to HTML5
The following table illustrates how you would migrate from a HTML4 to a HTML5 document.
|Typical HTML4||Typical HTML5|
This blog briefly discussed HTML, HTML5, and the new HTML5 Semantic/Structural Elements, as well as why you should use HTML5, and how one could migrate an HTML4 formatted document to an HTML5 format.
1 w3Schools – https://www.w3schools.com/html/html_intro.asp
2 w3Schools – https://www.w3schools.com/html/html_intro.asp
3 Wikipedia – https://en.wikipedia.org/wiki/HTML5
4 w3Schools – https://www.w3schools.com/HTML/html5_new_elements.asp
5 Cognifide – https://www.cognifide.com/our-blogs/ux/5-reasons-why-html5-matters/