Sectioning elements
06. <main> (opens in new tab)
This marks up the core content of the document. In contrast to any header, footer or navigation elements, its content will vary from page to page. There can only be one <main> element visible at any time.
07. <nav> (opens in new tab)
This represents any area of a document that is responsible for navigation. This can be a site’s main navigation or a grouping of internal links such as a table of contents. Not all links need to be inside a <nav>.
08. <header> (opens in new tab)
Use a <header> to separate any kind of introductory content from the rest of the document. It is commonly used to define page headers, but alternatively it can also be used to add headers to sub-sections.
09. <footer> (opens in new tab)
In contrast to <header>, the <footer> element marks the final content of a page or section. This would typically hold extra information like author or copyright information, along with any related navigation.
10. <aside> (opens in new tab)
Designate an area of a document that contains supplementary information about the main content. While this is often styled to look like a sidebar, it can also be used to define accompanying content such as a related fact.
11. <article> (opens in new tab)
Use <article> when the content it will display is self-containing, for example, a blog post or even a news story. There can be multiple <article> elements on a page and there are no limits on where they can appear.
12. <section> (opens in new tab)
This represents a grouping of content within a document where no other element is suitable. This provides more meaning than <div> as it is specifically defining an area as content over simply added markup for styling.
13. <H1> to <H6> (opens in new tab)
Heading elements have been around for a long time, but make sure they are being used correctly inside sectioning elements. Each section can have its own heading hierarchy, meaning multiple <h1> tags can now appear on a page.
Inline elements
14. <time> (opens in new tab)
Dates and times are formatted differently across the world and so cannot be reliably parsed by a search engine or email client. Specify what parts of a sentence are a time and allow programs to extract and use that information.
15. <mark> (opens in new tab)
When wanting to highlight a few words of a sentence, it may seem best to use <strong>. While <strong> denotes importance, <mark> denotes relevance in the current situation. An example of this would be matched terms in a search result.
16. <abbr> (opens in new tab)
Language is full of abbreviations that readers potentially may not be familiar with – there’s plenty in this article! The <abbr> element provides a way to define potentially unfamiliar abbreviations with an accompanying title attribute.
17. <q> (opens in new tab)
When quoting a small section of text, surround it with <q>. The optional cite attribute can provide a name, reference or link to the original source. Browsers will add quote marks by default.
18. <kbd> (opens in new tab)
When providing instructions that should be input by a user, <kbd> should surround that command. While typically used for keyboard inputs it can be used for any kind of text entry, including voice.
This article originally appeared in Web Designer magazine. Buy issue 280 (opens in new tab), or subscribe now (opens in new tab).
Read more:
- A coder's guide to APIs (opens in new tab)
- Get started with the Web Audio API (opens in new tab)
- 10 new web design tools for December 2018 (opens in new tab)
