The Cambridge English Dictionary defines semantics as
the study of meanings in a language.
It uses the word in the following example:
Syntax describes the rules by which words can be combined into sentences, while semantics describes what they mean.
You can write HTML with completely valid syntax, but that doesn’t mean it’s semantic. It can be valid yet structurally unsound.
The structure for this very post looks like this:
It contains a number of semantic elements (credit goes to the MDN Web Docs for the definitions below):
- A self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable.
- Introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
- The highest section level heading out of six.
- A paragraph.
- A specific period in time. It may include the
datetimeattribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.
- A short inline quotation.
- An extended quotation.
- Content that should draw the reader's attention without granting it special importance.
- Content with strong importance, seriousness, or urgency.
All of these elements describe what type of content they contain.
I could just as easily have written the HTML as follows:
But this would have been a complete shirking of my professional responsibility.
div spaghetti does nothing to describe the content it contains. This is bad for developers, search engines, and most importantly, users of assistive technology.
div element isn’t inherently bad. The MDN Web Docs explain that it is a generic container:
As a “pure” container, the
<div>element does not inherently represent anything. Instead, it’s used to group content so it can be easily styled using the
idattributes, marking a section of a document as being written in a different language (using the
langattribute), and so on.
It should only be used when no other semantic element is appropriate.
It’s your professional responsibility to make your websites accessible to everyone. More importantly, it’s your moral obligation.
If you don’t care about people, well… Maybe fuck off into a different profession that doesn’t require you to make things for people?
Besides, using more semantic elements makes your life easier as a developer. They have better default styling baked in out of the box, along with all the necessary keyboard functionality. They’re accessible by default.
The next time you’re writing HTML, think about what elements best describe the content you’re marking up. Think about the people using your website and the experience they deserve.
For help with this stuff, I recommend the following resources:
If you have questions, feedback, or any other suggestions, please do email me. I'd love to hear from you!