htmlcssvue.jsvuetify.js

<h1> element vs "text-h1" class

I would like to place a heading in Vuetify.

I noticed that you could use either the <h1> element or the text-h1 class, and the latter one has a bigger font size.

So I came up with three ways:

<h1>Heading 1</h1>
<div class="text-h1">Heading 1</div>
<h1 class="text-h1">Heading 1</h1>

What is the difference between them?

Solution

  • The main difference between using a <div> and a <h1> is the HTML semantics.

    Please refer to Semantics in HTML documentation to find out why they're important.

    Some of the benefits from writing semantic markup are as follows:

    • Search engines will consider its contents as important keywords to influence the page's search rankings (see SEO)
    • Screen readers can use it as a signpost to help visually impaired users navigate a page
    • Finding blocks of meaningful code is significantly easier than searching through endless divs with or without semantic or namespaced classes
    • Suggests to the developer the type of data that will be populated
    • Semantic naming mirrors proper custom element/component naming

    And, if you have 6 minutes and don't mind closing a few annoying pop-ups, I found a decent (and more detailed) guide on how to use semantic HTML.

    Among other useful tips, it advises:

    Don't use semantic HTML tags for styling,

    ...which kind of answers your question.

    Why?