You may have encountered the word semantics in some other contexts, like in linguistics or media studies.
- A branch of linguistics studying the meaning of words.
- The study of the relationship between words and their meanings.
- The individual meanings of words, as opposed to the overall meaning of a passage.
- The meaning of computer language constructs, in contrast to their form or syntax.
In the context of HTML, we use Semantic HTML to describe the idea that the code you write should reinforce and describe the meaning of your content.
When writing HTML, you should always be thinking about the function or purpose of your content and how it relates to other bits on the page. Doing so:
- reduces ambiguity in your code
- increases the accessibility of your web pages
- improves the usefulness of your web content, making it understood by search engines, RSS readers and other apps
As a specific example, if you wanted to add some song lyrics to a web page, you wouldn’t use the
img element because that’s not meant for text. This tells you that HTML elements have meaning and impart that meaning to your code and content.
There are only two HTML elements without meaning:
div– the generic container for block-level content
span– the generic container for inline content
While these elements are useful in HTML, they should not be the ones you reach for immediately; it is always best to first consider if a more meaningful, or semantic, option exists.
Without semantic HTML, you can easily end up with an HTML document that looks like this: containers everywhere, but no sense of their purpose.
Compare that diagram to this, where semantic HTML elements provide important information about the structure and content of the web page:
Each of the areas in the second example is a legitimate HTML element. Read this guide to semantic HTML to get a more in-depth description and examples of how to use the following elements:
The HTML5 Doctor ✳️ HTML Element Flowchart is also a great guide when you’re struggling with which element is right for your use case: