HTML5 is a large language, but not a massive language. I’m not sure if the MDN HTML elements reference is comprehensive or not, but if so it looks like there are about 100 valid HTML tags. It’s entirely possible to learn and use all of the valid elements in HTML5, but few of us do.

Most of these elements are useful on most sites, but if you're like me, you might just forget that they exist. Here are a few elements that I often forget, and strive to use more often.

<address> #

My personal rule: almost every website should have an <address> element. The <address> element provides contact information, and many of the limitations it used to have no longer apply in HTML5. You can use it for any contact info, in any context.

Most of the time I would use this in the footer of the page, where companies usually put their contact info. You can add a physical address, an email address, a phone number, anything that would allow someone to get in touch with the website owner.

You could also use this at the bottom of articles, to show people how to get in touch with the article author. Contact information is vitally important to have on your site, and <address> gives you a semantic way to mark it as such.

Accessibility tip: headers aren't allowed in address elements, so keep that in mind when you're working with these.

<details> #

<details> elements are neat. They have so much potential, and yet I rarely see them used on the web.

Here's what a details element looks like (click for more) Neat, huh?

<details> gives you a bit of interactivity for free. It allows you to hide content behind a single click.

There are some limitations on what you're able to do styling-wise with these. There are several transitions that you aren't able to animate, such as the open/close animation, which annoys me a bit. But in a pinch, <details> elements work incredibly well and take way less effort than any of the alternatives. If you're looking for this kind of open/close functionality, you could do a lot worse than a <details> element.

<map> #

Gosh I haven’t used a <map> element in years. This is another element that adds interactivity to HTML without requiring JavaScript, which automatically makes it a powerful tool.

The <map> element allows you to add special click targets to images, in any shape you want. So rather than having one link per image, you can have any number of links in any shape you want. For example, you could have a triangle with oddly shaped bricks.

The details are a little too complex to go over here, but if you want to try it out, check out the MDN article.

<dialog> #

The <dialog> element, also known as a pop-up. Ah, how I love and hate thee so.

The dialog element is a native way to do pop-ups. If you're like me you've probably built more than a few pop-ups in your day, and you would like a way to do it more easily. <dialog> is that way.

But wait! The <dialog> element has poor browser support right now. Safari doesn't support it at all, and Firefox only supports it if you turn it on.

So there’s a good reason not to use the <dialog> element for now. But someday soon, hopefully!

<abbr> #

The <abbr> element is a great way to make sure your writing is accessible for all. There are a lot of abbreviations in our industry, and trust me, you do not want people checking Urban Dictionary to figure out what your abbreviation means. Far better to use an <abbr> element and explicitly tell them.

I often forget to do this, but it's such great way to keep our content beginner-friendly. Even abbreviations that are easy to find, such as HTML and CSS can benefit from an <abbr> tag. Just don’t forget to use the "title" attribute on these, that syntax always throws me off:

<abbr title="Hypertext Markup Language">HTML</abbr>

<template> #

To be honest, TIL about the <template> element. When building things with JavaScript I pretty often need a small bit of reusable HTML, and that is what the <template> tag is for. This is how I used to do that:

<script type="html/template">An old trick that is no longer necessary</script>

But using an actual <template> tag is better. More details on its usage over at MDN.

One thing to keep in mind: this tag is not supported in IE, so you'll probably want to hide the element with CSS to prevent it from showing up in those browsers.

Also, from an accessibility standpoint, you might want an aria-hidden on there. I would think screen readers would automatically skip template content, but I haven’t tested that, and better safe than sorry.