Menu
So typically, in our HTML files, the general structure looks a bit like this:
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Favicon -->
<!-- Meta Stuff -->
<!-- Title -->
<!-- CSS Files -->
<!-- JavaScript Files -->
<!-- Other Header Stuff -->
</head>
<header>
<!-- Navbar & Header Stuff -->
</header>
<body>
<!-- Body Stuff -->
</body>
<footer>
<!-- Copyright & Footer Stuff -->
</footer>
</html>
However, I often find myself using JavaScript Files that need to be loaded after the body, or whatever element it interacts with. As such, the body may end up looking like this:
<body>
<!-- Body Stuff -->
<script src="..."></script>
<script src="..."></script>
<script src="..."></script>
...
<script src="..."></script>
</body>
Sure, I could merge all of that stuff into one large Script File, either manually or using some sort of compiler. I could even wrap all of my scripts into a separate div so that I can mark that as "separate" in my mind.
However, all I'm really doing is injecting a bunch of scripts at the end of my document. This stuff shouldn't really go in a body tag, because it's not actual content, just code.
To rectify this, I often use a tail tag, like so:
<!DOCTYPE HTML>
<html lang="en">
<head></head>
<header></header>
<body>
<!-- Body Stuff -->
</body>
<footer></footer>
<tail>
<script src="..."></script>
<script src="..."></script>
<script src="..."></script>
...
<script src="..."></script>
<script>(function() { console.log('Custom code'); })();</script>
</tail>
</html>
Browsers seem to be fine with this, and I'm happy with this solution. However, the tail tag isn't a part of the HTML specifications, and I've seen little to no usage of a tail tag, except old HTML4 stuff that used a tail tag as a footer tag.
So what I'm wondering is: Is this good practice? Are there any downsides to this approach?
587
I see where you're going with this. I've considered the same concept. There are valid cases for putting <script> tags at the bottom of a document, and they don't really need to be in the <body> tag -- except that there is no other valid place to put them (save the <head>). In lieu of creating invalid tags for organizational purposes, I have done the following:
<section id="tail">
...
</section>
</body>
With some CSS like
section#tail { display: none; }
to ensure there are no errant display effects.
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
