Avoid Semantic HTML Names for Vue Components

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.