Beginner’s Guide to Web Development

View All Chapters
Badge semantic html

Semantic HTML

3 minute read

HTML is a markup language, which means it’s made up of two things: content and markup to describe that content. In HTML, markup exists in the form of different tags, and you can use those tags to describe the individual pieces of content throughout a website. When a site’s markup is “semantic,” it means the tags appropriately describe the content.

In an element like <p>Hello world!</p>, the <p> and </p> parts make up the tag, while the Hello world! part is the content inside. The reason we’re using <p> here is because the <p> tag stands for paragraph in HTML. A paragraph can be a short sentence or something longer, but in either case, the <p> tag is a semantic choice because it describes what comes inside.

Websites can have many different types of content, so HTML has many different types of tags. There are tags for links, forms, images, videos, headers, footers, and a whole lot more. Think of any kind of content, and there’s likely a semantic way to write it in HTML.

Why Is Semantic HTML Important?

Before a browser can show anything on screen, it has to read a website’s HTML and then figure out what to do with it. Every HTML tag has its own default styles and behavior, so if the wrong tag gets used on some content, that element won’t work in the browser as expected. Semantic markup is important because it keeps websites working in a consistent and usable way.

Styles

If we look at what the browser shows for non-semantic and semantic markup, there are several differences between the two.

Stack text blocks with no hierarchy
Stack text blocks with hierarchy

The first example uses the generic tags <div> and <span> to mark up content, while the second example uses semantic markup like <p> for paragraphs, <h1> and <h2> for headings, and <ol> and <li> for lists. Improving semantics throughout the markup makes the resulting page look a lot more like a functional website.

Functionality

Apart from how things look, semantic markup can also improve how things function. Look at what happens (or doesn’t happen) when we try to interact with these two web pages.

Form inputs and a button
Focused form inputs and a button

In the first example, we’re using CSS to style non-semantic markup exactly the same as semantic markup. But even though the two look the same, they don’t function the same. Generic tags like <div> and <span> don’t have any default functionality, so nothing happens when we try to focus or click them. A semantic tag like <button> does have default functionality, so it can be focused and clicked without the need for any extra code.

Conclusion

It’s important to be semantic when writing HTML because it improves how meaningful the markup is. Semantic markup makes things easier to write and maintain, but it can also save a lot of time in development by enabling default styles and functionality. Even better: Websites written with semantic markup are more usable and can offer a better experience than websites written in HTML that’s not semantic.