When the HTML5 specification was introduced, it brought with it a host of new semantic tags, which gave more meaning to HTML tags. Great news for web designers, who no longer had to produce swatches of <div> tags to build their website structure.
While the basic semantic HTML tags like <header>, <footer> and <nav> are self-explanatory, there is a plethora of newer HTML tags that web designers need to be using as well. In this post, we round up eight essential HTML tags you need to use, and explain how to do that. For balance, we've also picked five tags that need to be banished to the confines of web history.
For more web design advice, see our web design tools roundup, list of top website builders or our guide on how to make an app.
01. <picture>
The <picture> tag is similar to <img>, the <picture> element provides flexibility by allowing multiple <source> elements for the same resource, which can adapt based on a media query or image type support. For example, it can supply WebP images to browsers that support the newer, smaller file size.
02. <datalist>
The <datalist> tag provides an autocomplete interface for <input> elements. Each list contains a set of <option> elements that have an associated value. When linked to an <input> using the “list” attribute, it can provide a drop-down list or even display suggestions as the user types.
03. <dl>
This description list, or <dl> tag, element serves as a container for groups of defined terms. Inside, each term (<dt>) and definition (<dd>) are grouped together to form a glossary-like structure. While it applies basic formatting by default, semantic HTML benefits screen readers and other automated tools such as crawlers.
04. <details>
Accordions are a common design pattern when lots of data needs to be shown at once, such as a questions page. By using the <details> element alongside <summary>, we can achieve the same effect without JavaScript. Clicking the summary will toggle the rest of the content.
05. <dfn>
Complex terms or abbreviations often need defining for those that are not familiar. A term wrapped in a <dfn> tag will be defined by the text that surrounds it. This is an inline element and is designed to be used to highlight definitions in human language.
A figure is defined as a unit of content that often appears in the main flow of a document but can be also interpreted separately. The <figure> element wraps an image or other reference content and can also include a description of its contents with <figcaption>.
07. <code>
With technical writing, it can be useful to visually separate computer code from the rest of the sentence. By wrapping each occurrence in a <code> tag, the browser can apply some default formatting to display it more appropriately. Combine with <pre> for larger code blocks.
08. <time>
We can write time values differently depending on the context or the language. By marking these values with the <time> tag, search engines and other automated tooling can quickly extract this information. Use the “datetime” attribute to supply a specific time in a more machine-friendly format.
The HTML specification has a lot of legacy tags that can still be used, and will still work, but the simple fact is, there is usually a better alternative out there. And, if there is a better option then you really need to be using it.
There is also the issue of browser support. Some tags will no longer be supported in every browser, but these can go unnoticed when looking at the design of a page. Again these need to be replaced.
Below you will find five tags that should definitely not be sitting inside the HTML of any page. If you spot any of these in your code make sure they are replaced with a more suitable tag or removed altogether.
01. <font>
Historically, the <font> tag was used to style a block of text, it’s now best to target and style text with CSS. According to Advanced Web Ranking, nearly 6.5 million websites still use the tag despite it being deprecated for many years.
When combined with <menu>, the <menuitem> tag would supply options and actions to perform inside context menus. This has now been removed from the specification as it did not receive much browser support.
03. <big>
The <big> tag would have increased the size of the text inside the tag by one level. Its companion <small> is still valid HTML, but now has a more defined semantic meaning referring to small print.
04. <center>
Previously the <center> tag was the only way to centralise both block and inline content, but it has now been replaced with “text-align: center” in CSS, which performs the same job.
05. <marquee>
The <marquee> tag allowed the text inside the tag to move across the screen like a news ticker. While previously a popular feature of the web it has been classed as obsolete in favour of CSS-based animations.
To get your site running how you want it, make sure you've got the right web hosting service for you. Got a bunch of assets to stash away? You need reliable cloud storage.
