Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Avoid Semantic HTML Names for Vue Components

    John LindquistJohn Lindquist

    HTML has a few elements with semantic meaning. While they can be a bit subjective as to when you should use them, you should avoid using them as names for your Vue components.

    vueVue.js
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 You may have noticed in the console that we have these three warnings here, that say don't name things header, footer, or content. That's because those are reserved HTML elements, and they have semantic meaning inside of HTML.

    00:13 Instead of naming this header, and this content, and this footer, what you'd want to do is name your component. I'll name this awesome-header, awesome-footer, and awesome-content. You'll see, if I hit save, that there are no errors this time, but I lost my header and footer, because it's just treating these as HTML elements, like it would treat a div or a span.

    00:36 For example, you'll see content, but it's not using my content component, because it's not shuffling every time I refresh. I'll go ahead and rename these, too, awesome-header, awesome-content, awesome-footer. Now, we'll get all my features back, the header, shuffled content, and a footer.

    00:52 I'll go into my header. I'll tell this that I want it to be wrapped with a header, which changes nothing visually, but in your HTML, you'll see the header element. In my content, I'll change this to article, because article is the proper tag for self-contained content. Then in my footer, I'll wrap this with a footer.

    01:14 Everything looks the same, but if I check out my elements, you'll see we now have a header, article and footer describing what's going on in our HTML.

    Discuss

    Discuss