Join egghead, unlock knowledge.

Want more egghead?

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

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Avoid Semantic HTML Names for Vue Components


    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.



    Become a Member to view code

    You must be a Pro 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
    orLog In




    Instructor: 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.

    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.

    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.

    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.

    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.