What's New With HTML5?
Check out the major differences between the updated HTML5 and the older, less functional versions.
In our last post we discussed the fall of Adobe Flash and why it has seen a steep decline in the last few years. Now that HTML5 has taken off around the web, Adobe Flash can finally be laid to rest.
But before we take an in-depth look at HTML5 and its many features, let’s briefly explain HTML.
HTML stands for Hypertext Markup Language. This is a fancy way of referring to the code that lies behind a web page. HTML is the base of a webpage and is used to display text, images and links. For example, behind this blog post sits chunks of HTML code that instructs your browser how to display the web page. All you see is the final result, but the website is actually entirely written in code.
Most modern websites use additional style sheets and programming languages in order to display colorful and interactive pages. A Cascading Style Sheet (CSS) is used to customize colors, fonts, borders and much more on a website. JavaScript is a popular programming language that makes a website interactive. A typical website will have a combination of HTML, CSS and JavaScript working together to deliver a beautiful webpage.
HTML uses tags to tell the browser how to display content. Here is an example of HTML code:
<h1>This text would show up on the webpage as a heading.</h1>
The <h1>and </h1> are called tags.
HTML has been around since the internet became available to the general public in the early ‘90s. Since then, we have seen several updated versions. HTML4 stuck around for over ten years, an eternity in technology terms. The internet was well overdue for an updated version of HTML, and that’s exactly what we got with HTML5.
With HTML5, some tags (or elements) have been introduced and other tags have been eliminated. In the rest of this post we’ll outline which elements have been added and which have been eliminated.
What was added?
Video tags
One of the biggest downfalls of previous versions of HTML was the lack of video capabilities. Prior to HTML5, you had to download a plugin such as Flash or Media Player in order to view video. Plugins are helpful in many cases, but they do raise security concerns and are typically much slower than when a feature is implemented in the actual source code. HTML5 allows you to embed video directly into the HTML code, eliminating any need for Flash or other plugins.
Here is what a snippet of code including the video tag would look like:
<video width=”200” height =“100” controls>
<source src=”movie2.mp4” type=”video/mp4”>
<source src=”movie2.ogg” type=”video/ogg”>
Your browser does not support this video.
</video>
With this simple code a browser could display a video directly on the page. This makes it much easier than having to use a third party to display the content. If the browser does not support HTML5 video, the text “Your browser does not support this video” will be shown on the page, otherwise only the video is displayed.
Audio tags
Similar to the new video features, audio tags also create a smoother user experience. Just like with video, a plugin had to be used to hear audio on a webpage. HTML5 simplifies this with the audio tag. Take a look:
<audio controls>
<source src=”eagleNoise.ogg” type=”audio/ogg”>
<source src=”eagleNoise.mp3” type=”audio/mp3”>
Your browser does not display this audio.
</audio>
As you can see, this tag functions almost identically to the video tag.
Sectioning elements
HTML5 also introduced new features to section off pieces on a web page.
The <article> element allows you to include content that is distributed outside the context of the page, for example news articles, blogs posts, etc.
<section> tags are similar to articles, but they don’t necessarily need to be outside the context. They are generally used with heading tags to define a topic.
The <nav> element is very common for grouping content together. This tag works great for grouping links together or for a table of contents.
The <header> element will contain the introductory content for a webpage. It will commonly contain metadata and headlines that are relevant to that particular page. It can also be nested within a <nav> element to keep things organized.
Opposite to the <header> tag, <footer> elements display closing content for a webpage. You’ll often see copyright information, links to other webpages or additional info (the fine print) in the footer.
The <aside> tag displays information that may be a sidenote to an article on a webpage. For example, you could include a small detail about the main article in the <aside> element.
The <main> element distinguishes the “main” content on each page. This should be placed outside of any article, header, footer or nav tags. Note that <main> tags shouldn’t be used across all pages of a website, but instead should be unique to each page.
Graphic Elements
Two new graphic elements were introduced with HTML5:
The <svg> element stands for scalable vector graphic. Vector graphics work well for the web because they’re not resolution dependent, meaning they’ll scale across different sizes. Most vector images come from Adobe Illustrator.
<canvas> tags allow you to draw graphics on a webpage. However, this tag is only a container for the graphic. You would create the actual graphic using an additional script such as JavaScript.
What was removed from HTML5?
As we mentioned before, HTML5 was condensed to form a cleaner language for websites. Here are some of the eliminated features from previous HTML versions:
<frame>
<frameset>
<noframes>
Some tags were eliminated, but have alternate ways of writing them:
<applet> – <object>
<acronym> – <abbr>
<dir> – <ul>
And other elements are now just used in CSS:
<basefont>
<big>
<center>
<font>
<strike>
<tt>
Most major browsers officially switched over to HTML5 in 2014. The change resulted in cleaner web pages, fewer bugs and faster loading times. When building your site, make sure to implement the latest features of HTML5.
Your website needs a powerful web host. Check out WestHost to find the perfect solution for you!