How to work with Custom Tags in HTML
This guide walks through how to use custom HTML tags that will allow for explicitly declaring how your code is organized.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

So far, we've expanded on some of the standard HTML tags, but now we are moving on to custom tags.

We can create our own HTML tags and use them for web pages. In general, you may not have time to create and use these tags, but if you pursue tools like angular JS, it can become useful.

Let's say, you want to create a navigation element using your own tag. Let's also say you've named it <nav>. You can put it inside a <div>, and even have elements nested inside it.

<div>
  <nav>
    <h3>My Navigation Element</h3>
  </nav>
</div>

Since we're not using a standard tag, you change <nav> to <widget> or just about to anything else you want, and nothing will change.

A negative side to this is, for example, if you're working for a new client who doesn't trust you yet. If your code is put through an HTML validator, custom tags will damage some of the validation because these validators only pass standard tags.

However, this doesn't mean you should abandon these tags because many clients won't bother much about the code as long as the functionality is what they desire. In such cases, these custom tags can give you a nice structure, and can make your code more readable.