The HTML5 standard was finalized and released in 2014, and it is what HTML should have been when the first version was launched all those years ago. HTML 2.0 was the first true ‘standard’, published all the way back in 1995. Two years later, HTML 3 was published. Another two years later, HTML 4.01 was introduced, and it has been the workhorse of the internet since then.
The first ‘working draft’ of HTML5 was introduced way back in 2008, with surprisingly broad browser support back then. The HTML5 that we know today is widely different from the HTML of the past, and here we are going to discuss just what the latest standard changed with its release. Since HTML5 was launched, it has been widely accepted, and all major browsers now support all its features and capabilities. There are still a few hiccups here and there, but overall, HTML5 has assimilated well with the modern online experience.
As a web developer, you could either be an old pro who has mastered the older standards or a newbie curiously watching the development of new standards on the sidelines. Either way, you have to begin transitioning over to HTML5 eventually.
HTML Vs HTML5 Infographic
The first step to transitioning to HTML5 or learning is to understand the difference between the older standard and the latest one. Here are some key differences between HTML and HTML5:
-
HTML5 is a living language
HTML5 is a living language, a work in progress. It is amazing to see what HTML5 can do, but it is also important to know that HTML5 is not a fully standardized version like HTML4, which is more than ten years old and a set standard, unchangeable.
If you are getting into HTML5, you will have to make some updates. Attributes and elements are added and regularly modified every year. This also depends on how much you use rich elements, but it is definitely one of the risks involved when using a fluid, changing language like HTML5.
-
HTML5 is simpler
While HTML5 does have risks like constant updates, it is generally easy to keep up with the changes and updates because of the simpler syntax as compared to HTML4. For instance, you have a very simple declaration at the start of the page to set it as an HTML5 page:
<!Doctype html>
The simple Doctype declaration is one of the simplifications made in the HTML syntax, which is compatible with all versions from HTML4 and all the way back to XHTML1. However, HTML5 is not compatible with SGML.
-
The New <canvas> Element
HTML5 comes with a number of new elements and eliminates several others (which we will cover in a while), but one of its key added elements is <canvas>, which has hugely impacted Adobe Flash’s use in websites. Although Flash is still in use by several websites, HTML5 has been adopted many, and many people think it will eventually make Flash obsolete. Only time will decide that; until then, HTML5’s cascade element has proven itself to be a good alternative to Flash.
The <canvas> element can be used to draw graphics with various shapes and colors via scripting, usually JavaScript. The element is simply a container for the graphics; you need to use a script to define the graphics. By default, a canvas is a rectangular area with no content or borders. The market is like so:
<canvas id=”myCanvas” width=”200″ height=”100″></canvas>
It’s important to specify an id attribute as well as width and height for defining the canvas size. You can add a style attribute to define borders.
<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #000000;”>
</canvas>
You can use JavaScript as well, like the following example:
var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.fillStyle = “#FF0000”;
ctx.fillRect(0,0,150,75);
-
The new <header> and <footer> Elements
Another big addition that HTML5 comes with are the new <header> and <footer> elements, indicating a new web anatomy. With these new tags, there is no longer a need to identify the two elements with a <div> tag.
The specifications define the header element as representing a group of ‘navigational’ or ‘introductory’ aids. As such, the element can be used to define an introduction to a section of a page, or to the entire page itself. Here is a code snippet that uses the header element.
<header>
<h1>Title </h1>
<div class=”post-meta”>
<p>By Author</a> <span class=”category”>Filed in Web 2.0</span></p>
</div>
</header>
<article>
<p>Body of text</p>
</article>
The HTML5 specifications refer to the foot element as representing ‘a footer for its nearest ancestor sectioning content or sectioning root element’, and generally containing information regarding the section, like the author name, copyright data, links to documents, and so on.
13 Online Courses | 20 Hands-on Projects| 100+ Hours| Verifiable Certificate of Completion
4.5
View Course
Logically, the footer is placed at the bottom of the web page. But it can also be placed at the end of a page section. Here is some example coding that uses the footer element:
<div>
<header>
<h1>Content title </h1>
<div class=”post-meta”>
<p>By Author</a> <span class=”category”>Filed in Web 2.0</span></p>
</div>
</header>
<article>
<p>Body of text.</p>
</article>
<footer>
<div class=”tags”>
<span class=”tags-title”>Tags:</span> <a href=”#” rel=”tag”>Command Prompt</a>, <a href=”#” rel=”tag”>Compass</a>, <a href=”#” rel=”tag”>CSS</a>, <a href=”#” rel=”tag”>Sass</a>, <a href=”#” rel=”tag”>Terminal</a>
</div>
<div class=”facebook-like”>
<div>10 likes</div>
</div>
</footer>
</div>
Here, the footer contains post tags and the post ‘Facebook likes’.
-
The <article> and <section> elements
Now, if you went through the above examples, you would have noticed a few more new elements, like the <article>. This element, along with the <section> element, enables you to mark specific sections of your layout and are hugely beneficial for search engine optimization. The article element is specified as representing a self-contained component of a web page to be independently reusable or distributable. This could be a newspaper, forum post, magazine article, blog entry or anything else.
The article element generally has its own heading in a header element, and maybe even a footer, as you saw in the above example. You can simply think of the element as a blog entry or an independent piece of content; the tricky part is identifying what is independent. Simply put, an independent piece of content is one that makes sense by itself.
A good way to know whether a piece of content is independent is by asking whether it makes sense within an RSS feed. Blog articles and static pages do make sense, and some sites have comment feeds. But a paragraph in article would not make any sense separate from the rest of the content. Here is a code snippet with footer and publishing tags.
<article>
<header>
<h1>Content title</h1>
<p>Published: <time pubdate=”pubdate”>2016-02-24</time></p>
</header>
<p> Body of text</p>
<footer>
<p><small>Creative Commons Attribution-ShareAlike License</small></p>
</footer>
</article>
According to W3C specifications, the section element represents a ‘generic section’ of an application or document. It could be confused with the <div> tag, so let’s clear out the confusion right now. The section tag is used when the content within it has to be grouped separately from the rest of the page with a single theme and when it should be seen as an entry in the page outline. However, the div element is specified as a ‘generic container’, which means that it is not separate from the main page itself, aside from its own title, language, and class attributes.
-
New <menu> and <figure> Elements
HTML5’s new <menu> and <menuitem> elements are part of the Interactive Elements specifications but are among the least talked-of elements by developers. Given the fact that the web has changed into more just linked paged and documents, these elements are a welcome addition for greater web interactivity.
The <menu> element is not to be confused with the <nav> element, which is defined as an HTML navigation tag that represents the page navigation block. It typically contains links for users to jump through sections within the page or to another page. On the other hand, the menu tag represents menu commands for simplicity in desktop and mobile applications. Here is an example of the <menu> element in action:
<body contextmenu=”new-context-menu”>
<menu id=”new-context-menu” type=”context”>
<menuitem>Hello World</menuitem>
</menu>
</body>
Meanwhile, the <figure> element is another way to arrange images and text. It is used together with the <figcaption> element for marking up illustrations, diagrams and photos. Given below is a short code snippet that features both elements in action.
<figure>
<img src=”/testimage.jpg” alt=”Description of the image”>
</figure>
-
New <audio> and <video> Elements
These are two major additions to the HTML5 standard. Like the video tag, the audio tag enables developers to embed music and audio on their website. Unlike the previous standard, you are not limited to adding midi music, although some limitations still exist on the type of files used. Most Webkit-related browsers support regular MP3 files, but others only support the OGG format. The good news is that there are tons of file converters, and you can simply supply two versions of the audio file; the right version will be picked up automatically.
You can use the audio tag like any other element. Here is an example snippet:
<audio autoplay=”autoplay” controls=”controls”>
<source src=”music.ogg” />
<source src=”music.mp3″ />
</audio>
The audio tag also has a number of attributes for additional controls, including event attributes, and the events include window events, form events, media events and mouse events. The video element also has a number of content attributes, including SRC, global attributes, loop, control, preload and poster. The SRC, loop, autoplay and controls attributes are pretty self-explanatory and the same for all media elements, while the global attributes are common for all elements. They include dir, hidden, context menu and more.
A few other multimedia attributes and elements come with HTML5, like the track element that provides text tracks for the video element.
-
New forms
HTML5 now comes with form and <forminput> elements. If you do not plan to use many tables on the page, you could also remove the attribute and take a look at the changes made before going forward.
-
No more <b> and <font> elements
This means that all the attributes that allow developers to create a perfectly laid out, tinted table, such as the border, bgcolor, align, height, rules and more. All these attributes are replaced by CSS.
-
No More <frame>, <center> and <big>
This is great for those developers who worked through the early days of HTML. The frameset, frame and noframes attributes have been removed entirely, along with others like blink, basefont and more. You will have to manage without using tables for the layout. Tables are still part of HTML5, but they are not intended for pixels any longer. The specifications say that tables should not be used for layout aids and to control the page layout.
Conclusion
As you can clearly see, there are lots of changes to HTML5, and you need to use it with care and caution. You also need to update your knowledge on the language as it changes over time and gets more updates. You need to stop the use of elements that HTML5 has removed from itself and use the new HTML5 elements that will definitely stay, like the header or footer tags.
You have seen above just the simplified version of how many changes HTML5 has made with its launch. But let’s be honest here; there is nothing simple or slow in the way that HTML5 is being adopted, and the new standard adds lots of capabilities that are crucial for a modern user experience. You need to keep up with the new language and also learn some CSS, which has a bigger role than before.
The good thing about these changes is that, even though they are big, they are for the better, and this is understood by all the stakeholders involved here. Browsers will be more powerful as they move towards the cloud, with the ability to handle more by themselves. With things such as Ajax and video and audio embedding, it will be so much easier to code in a straightforward method and allow the browser to take on the heavy-duty. For example, new structural elements such as figure, footer, summary and section are all referred to the document structure, and the rendering is left to the browser.
Related Articles:-
Here are some articles that will help you to get more detail about HTML vs HTML5, so just go through the link.
