Sample Video Frame
09: Custom Tags
In this lesson you'll learn that you can use almost any name for an HTML tag, and use it to describe your document. Normally people stick to only approved tags for their documents, using <div> for almost everything. This works, but it tends to make the HTML far more complicated than it needs to be, and also tightly couples your CSS to your HTML document structure. When you use simpler custom tag names you're able to describe your document semantically, which makes it easier to manage.
Warm-up
Create a new .html file with the usual HTML5 template and then put this in it:
<person>
<name>Zed A. Shaw</name>
<paid>true</paid>
<admin>true</admin>
<last-login>2022-03-04 12:00:00</last-login>
<unsubscribe>true</unsubscribe>
</person>
If you reload it you'll see it doesn't look like much, but it is actually working. Now, add this to your <head> section:
<style>
body * {
border: 1px solid red;
}
</style>
When you refresh now you should see red borders around all of the tags you just created. If you want to "disable" this then put a comment around the CSS:
<style>
body * {
/* border: 1px solid red; */
}
</style>
Register for Learn JavaScript the Hard Way
Register today for the course and get the all currently available videos and lessons, plus all future modules for no extra charge.