HTML evolves into a richer web standard
HTML5 is the latest version of HTML and was standardized in 2014 by the W3C. HTML5 was created to take over HTML4 and XHTML. HTML5 provides the developer with APIs for web applications. It also introduces new syntax to the equation. HTML5 enhances the semantics of the content we create, especially when that content is being grouped together. Certain tags that were not available in HTML4 or its predecessors include:
<video>
<audio>
<section>
<article>
<header>
<footer>
<nav>
<aside>
<main>
The W3 standard is created and updated by the World Wide Web Consortium (W3C). W3C is an internationally collaborated group attempting to standardize the way we develop websites. It is highly encouraged that you review the standards listed on https://www.w3.org/TR/. It will make you a better website designer and will help standardize the web-development industry.
Observing the tags, you’ll notice that they are written in a human-readable format. If you’re creating an article, wrap the text in an <article> tag. The tags can be placed within other tags. For example, you may start off with the <header> tag indicating that the content within it will be located towards the top of the screen. What goes inside the header? You could place a top navigation utilizing the <nav> tag. You’ll learn how to stylize the navigation bar in a later article.
After the navigation, you may add a <section> to hold a collection of related content. You can keep adding sections until you reach the bottom. Naturally, the footer of the website is located at the bottom of the page. You’ll add the <footer> tag and then add normally observed footer content to it.
With the addition of <audio> and <video> tags, it’s no surprise that HTML5 took over Flash. Video and audio tags can be added to sections or articles. They can be added outside of the <section> or <article> tag, however, remember that we’re trying to standardize the way we approach web-design.
You may be wondering if HTML5 will render correctly on older versions of Internet Explorer. Although older versions are becoming obsolete, there are still quite a few out there. To make sure that the older version of Internet Explorer knows how to render the HTML5 page correctly, you will need to include a “shim” in between your head tags.
<head>
<meta charset="UTF-8"> <title>Shim Include</title>
<!--[if It IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js".
</script>
<![endif]-->
</head>
This should be all that you need to know about HTML5. If you’re interested in learning more about HTML5, there are countless books that have been written about it.
HTML Series
Continue your HTML Learning.
Meet the building blocks of markup
Part three of our HTML fundamentals series explores the vast library of elements that give every page its purpose. From headings and paragraphs to lists, forms, and multimedia tags, learn each element’s role, default behavior, and best-practice usage for clean, semantic markup.
HTML evolves into a richer web standard
Part four of our HTML fundamentals series introduces HTML5—the modern standard that added semantic tags (<header>, <article>, <section>), native audio–video, smarter forms, canvas graphics, and JavaScript-powered APIs for storage, geolocation, and more.
Where plain markup falls short
Part five of our HTML fundamentals series confronts the language’s built-in limitations. Explore layout pain points, styling inflexibility, lack of state, inconsistent browser support, and why modern devs reach for CSS, JavaScript, and frameworks to fill the gaps.