HTML, the markup language used to structure web content, can come in two forms: semantic or non-semantic.
Both forms are used interchangeably in web pages today, and while HTML began as a non-semantic (only) language, as the web evolved, writing HTML semantically has become the practical standard. This is because semantic HTML is great for accessibility, SEO, and overall readability, as you’ll see below.
Why is semantic HTML important?
We primarily use code snippets, called elements, when marking up with HTML. An HTML element typically consists of a start and end tag, although sometimes only one tag is used (like for the element). The .html file for this page contains paragraph elements, and paragraph tags surround the text of this very paragraph. It looks like this:
text
, where
is the start tag and
is the end tag.
Some HTML elements are used to group certain parts of HTML code together, like the commonly used
element. But
is non-semantic, so to specify certain
elements, web developers have to add an id attribute to identify and style that element. Still, the id attribute doesn’t always fix the semantic problem for web pages.
Enter: semantic HTML. Examples of semantic elements are
