HTML5 is the latest and greatest version of the most widely used markup language on the web. There are some big changes from the last version of the language, and if you’re not using them, you’re missing out on some really cool functionality.
We don’t have the room to cover every new element in the fifth version of HTML, but these nine are some of the most important ones. For more information on the new elements and APIs in HTML5, be sure to check out W3Schools.
An Introduction to Semantic Elements
Like much of the internet, HTML5 has shifted to focus on semantics. Now, instead of tags simply being used for formatting, they’re also used to tell browsers and search engines the meaning of what they surround.
For example, <p> simply tells a browser that it contains a paragraph. <article>, which we’ll discuss momentarily, tells a browser that it contains the main content of the page.
The semantic web is still developing, and we’ve only begun to scratch the surface of what it can do. HTML5 is helping to bring semantic markup to a much larger portion of the internet, and that can only be good for the future of semantic processing.
The <article> tag defines “independent, self-contained content.” The easiest example is, of course, an article. For this particular article, we’d open the tag before the introduction and close it after the conclusion.
<article> All of the text in your self-contained section. </article>
But there are other ways you could use it, too. For example, many cooking blogs include personal stories about how a recipe came about or why it’s important to the writer. It’s then followed by the recipe itself. You could make the argument that each of these elements could stand alone.
In a forum, each post or thread could be considered self-contained, and each could be marked with its own <article> tag. For the most part, it will be used on the main content of a page. But keep in mind that you can use it more creatively, too.
Closely related to <article> is <section>. This defines a “thematic grouping of content, typically with a heading.” So <section> will be inside <article>… right?
Not necessarily. W3 points out that it depends on the structure of your site. You might have self-contained content in different sections of your page (think of the front page of a news site, for example). You might then have sections within that article.
<article> <section> <h2>Why You Need a DAC</h2> <p>Everything sounds better.</p> </section> <section> <h2>How to Set up a DAC</h2> <p>Here's what you need to do . . .</p> </section>
You can even have sections within sections if it fits your page. Remember that a section is simply a “thematic grouping of content,” and you’ll find lots of places to use it.
This element “should be used as a container for introductory content.” In short, it’s the part of your page that helps people understand what they’re about to read.
But don’t be fooled — you can use this container more than once. For example, you might use it to identify the page title and introductory paragraph of your blog post. But you could also use it to mark the introductory content for each section, as well.
<article> <header> <h1>Everything You Need to Know about DACs</h1> <p>Here's a useful introduction to DACs...</p> </header> The rest of your article goes here.
Header sections usually contain at least one heading tag — H1, H2, and so on. They don’t have to, but in general, if you’re using a heading tag, there’s a good bet you’re including header content.
<footer> Copyright: MakeUseOf, 2017. <a href="//www.makeuseof.com/contact/">Contact Us</a> </footer>
The documentation also states that you can have more than one footer section on your page. It’s probably a good idea, though, to keep all of this information in a single location.
This tag contains the navigation links for a given page. Note that only the navigation section gets this tag, not all of the links on your page. It’s for navigation bars and similar tools.
<nav> <a href="//www.makeuseof.com/>Home</a> <a href="//www.makeuseof.com/about">About</a> </nav>
This is a really simple tag — that’s all there is to it. Use it to define the navigation section, and don’t use it again on your page.
One of the most interesting new elements in HTML5 is the aside. W3 gives it the somewhat unhelpful definition of “some content aside from the content it is placed in.”
In short, an aside is anything that’s related to (but separate from) the surrounding information. It could be a sidebar that adds detail to your content. When it’s used within a set of <article> tags, it provides additional information that’s not necessary to the understanding of the main content.
For example, if we had included a sidebar in this article giving information on the history of HTML5, that would be an aside.
But the <aside> tag can also be used outside of article content, as well. In this case, it’s usually used for site-related information. We could include a sidebar, for example, like this:
<article> The main article goes here. <aside>MakeUseOf is focused on bridging the connection between users, computers, devices and the internet through education.</aside> The article continues here.
Because there are multiple uses for this tag, it can be confusing. If you keep in mind that it’s “secondary content” and that it doesn’t always need to be a sidebar, you’ll have a better idea of how to use it.
Many websites have information that needs to be displayed, but not prominently. Maybe it’s the copyright information for a photo. Or the fine print on a contest. This kind of information is exactly what the details tag is for.
When you use the details tag, you create hidden text that can easily be displayed. Here’s an example:
Click here to see information.
Here’s more detailed information you don’t need right away.
Just click the arrow to get the details. Simple. Creating it is just as easy. Here’s the code used for the above example:
<details> <summary> Click here to see information. </summary> Here's more detailed information you don't need right away. </details>
The <summary> tag defines the sentence that will be shown, while the other contents are hidden. Note that you can use other tags within the details section: headings, sections, and so on.
There are other cool things you can do with HTML, too, even if you don’t know much CSS or JSON.
8-9. <figure> and <figcaption>
Don’t worry, the <img> tag that you’ve been using for years isn’t going away. <figure> goes around the image tag and lets the browser know that it’s a self-contained image, diagram, code listing, or other figure.
If a figure is removed from the page, it won’t affect the flow of the content.
<figcaption> goes within the figure tag and specifies a caption for an image. It might look something like this:
<figure> <img src="makeuseoflogo.png" width="800px"> <figcaption>This is our logo!</figcaption> </figure>
This gives you a built-in way to add a caption to your images. No need to go through your CMS anymore.
Take Advantage of HTML5’s Power
The new elements in HTML5 add a lot of power, especially for semantic purposes. There are additional elements for formatting, scalar measurements, task progress, and more. You can see all of the new elements at W3Schools.
But if you can master these nine, you’ll be well on your way to making good use of HTML5. And if you’re new to HTML, be sure to check out these code examples!
Have you started using HTML5? Which new elements do you find the most useful? Share your thoughts in the comments below!