javascript - HTML Tail Tag to complement Head Tag

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 piler. 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?

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>

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>

So what I'm wondering is: Is this good practice? Are there any downsides to this approach?

Share Improve this question asked Dec 2, 2015 at 20:55 Boom 2,8654 gold badges21 silver badges21 bronze badges

5 Writing invalid HTML doesn't really sound like a good solution to something that isn't an issue, just stick the script tags directly in the body – adeneo Commented Dec 2, 2015 at 20:56
2 Also the <footer> element should be within the <body> element. – David Thomas Commented Dec 2, 2015 at 20:58
I never put <header> or <footer> tags within the <body> element. I never knew that I was supposed to. I've also never had any problems with it. – Boom Commented Dec 2, 2015 at 22:30

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

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.

Is this good practice?

No.

Are there any downsides to this approach?

You would have to perform exhaustive browser testing to see whether this worked, including text browsers and screen readers. Also, people may laugh at you, and Steve Faulkner will create an amusing meme about you... which is a downside if that may offend you.

Put all of your content in the body tag, and just place all of the scripts before the </body> tag, not wrapped in anything. They are not displayed, so there is no need to group them in an element.

<!DOCTYPE HTML>
<html lang="en">
    <head></head>

    <body>
        <header></header>
        <!-- Body Stuff -->
        <footer></footer>

        <script src="..."></script>
        <script src="..."></script>
        <script src="..."></script>
        ...
        <script src="..."></script>

        <script>(function() { console.log('Custom code'); })();</script>
    </body>
</html>

Not good practice. As an alternative to including scripts within the <body></body> tags, you could leave them in the <head></head> section and the code you want after the page has loaded could be called using the following Jquery:

$( document ).ready(function() {
});

Or the following javascript:

window.onload = function() {
};

HTML Tail defines the HTML code to insert at the bottom of each HTML document, usually to include a link back to your home page or insert a small graphic. It is inserted as a table data element and is right aligned with the page.

Sorry, but I don't agree with your method.

Basic structure:

<!DOCTYPE html>
<html>

<head>
<!-- Some meta data -->

<!-- Title -->
<title></title>
<!-- Link to css script -->
<link rel="stylesheet" type="text/css" href="example.css"/>
</head>

<body>
<!-- Some Content -->

<!-- Script tag to .js source script -->
<script src="example.js"></script>
</body>

</html>

And simple explanation of a proper basic-page load:

When browser goes through that HTML script,

it first recognizes the type of a script defined,
then it runs onto a LINK tag, which directs it to the .css script. Browser reads it and first displays a style on a page,
then it goes through a BODY tag and displays a content,
and let's say at last, it runs onto a SCRIPT tag, which directs the browser to a .js script, reads it, and as last loads the interactivity to a page.

Which gives a user nicer experience when visiting some page.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - HTML Tail Tag to complement Head Tag - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)