Meaningful elements on a page

HTML has a number of design objectives. These include separating design from content, promoting accessibility and design responsiveness, and encouraging meaningful markup. According to W3C, meaningful markup is important because ‘a semantic Web allows data to be shared and reused across applications, enterprises, and communities.’ [1]

Interestingly, HTML was originally used to share scientific documents with researchers over the internet but, over time, elements came to be included that went beyond this initial purpose – developers didn’t just want to present and share information, they also wanted it to look better. Apart from providing aesthetic enjoyment, good layout and styling also helps make content easier to absorb and understand.

In Week 1, we looked at the global structure of an HTML document, and we’ve used the word ‘semantics’ a couple of times already. So, before we practice formatting HTML with what we’ve learned (and introduce a few more elements!), let’s pull back and examine the page structure and get clear about what we mean when we use words like ‘semantic’ and ‘non-semantic’ to describe elements.

Semantic and non-semantic elements

To appreciate the difference between HTML with and without semantic elements, consider the following comparison:

Click to enlarge

Non-semantic elements

As you can see, non-semantic elements such as <div> (a generic element that allows you ‘to group a set of elements together in one block-level box’. [2 p186]) don’t describe meaningful elements of the page. Another non-semantic is the <span> element, which is a generic in-line container used to group elements or used for styling (more about these in Week 3 when we explore cascading style sheets).

Non-semantic elements like <div> and <span> tell the browser how to display the contents (e.g. display in a separate box vs display in-line), but don’t convey any information about what the contents between the tags is for. [3] To simplify – and to help you identify elements moving forward – ask yourself, ‘Does the name of the element tell me the purpose of the content it holds?’ If the answer is ‘no’, the element is non-semantic.

Semantic elements

In contrast, semantic elements do tell the browser and user something about the meaning or purpose of what’s between tags.

This basic example shows how semantic elements can define different parts of a web page:

Click to enlarge

Can you see the advantage of including semantic elements in your HTML? Imagine you are working on a team of developers and you need to update some text in a web page that someone else wrote. It will be much faster and easier to find where to put the new content if you can identify the different parts of the page through the semantic elements. You could also use semantic elements to create templates of different pages needed for a website. Adding a new page is a simpler process of inserting the relevant content into each semantic element in the template.

‘Whatever you call them — blocks, boxes, areas, regions — we’ve been dividing our Web pages into visible sections for well over a decade. The problem is, we’ve never had the right tools to do so. While our interfaces look all the world like grids, the underlying structure has been cobbled together from numbered headings and unsemantic helper elements; an unbridled stream of content at odds with its own box-like appearance.’ – Heydon Pickering, designer, engineer, writer, and author of Inclusive Design Patterns (2016) [4]

• <details>
• <figcaption>
• <main>
• <mark>
• <summary>
• <time>

Try for yourself

This is an example of a piece of text that could be rendered in a number of ways in a web page.

The date today is the twelfth of October 2022.

© Acme Corporation 2022

Now try to wrap the text in each of the semantic elements that you have learned about. How does the display output change? Which semantic elements do you think make the most sense to use for these pieces of text?

Try mixing different elements together and see what you think of the result.

References

1. HTML Semantic Elements [Internet]. W3Schools; [date unknown]. Available from: https://www.w3schools.com/html/html5_semantic_elements.asp
2. Duckett J. HTML and CSS: Design and Build Websites [Book]. Indianapolis: John Wiley & Sons; 2011. p. 186.
3. What On Earth Is Semantic Markup? (And Why Should You Learn To Write It) [Internet]. HTML.com; [date unknown]. Available from: https://html.com/semantic-markup/#ixzz72kRJd1yw
4. Pickering, H. Structural Semantics: The Importance of HTML5 Sectioning Elements [Internet]. Smashing Magazine; 2013 Jan 18. Available from: https://www.smashingmagazine.com/2013/01/the-importance-of-sections/