Home/ Questions/Q 8122075
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T05:42:55+00:00

I know how <link type=stylesheet href=.. /> and <script type=text/javascript src=.. /> work. But

  • 0

I know how <link type="stylesheet" href=".." /> and <script type="text/javascript" src=".." /> work. But I have some truble understanding where they should be in context of W3C and also in context of good programming practice. I was many examples where these are in the header. I don’t know why, but seems legit. But what impact has it when they’re somewhere else in the HTML code?

Take for instance a header file, that is included by PHP into all pages of a website, and this header file has its own CSS\JS files. So they can either be included in the header file itself, and then there will be a link and a script tag in the middle of the HTML body of the page including the header file. Another option is putting these in the head section of each file, but then changes will have to be made in every single page.

My questions:

  1. Where should the link and script tags be according to W3C?
  2. What impact will it have if they are in the middle of the HTML body like in the example above?
  3. What is the best solution in terms of good programming practice?
  4. How do I make the following include, while having a W3C compliant page, and in a way that I don’t have to update each page when I change the CSS\JS file.
    • Consider the included code snippet to be independent of the including page.

Just for clearness a short example: (Consider same situation also for a JS file)

header.html:

   <link rel="stylesheet" href="header.css" />     <!--- Should this be here? --->
<nav>
   <ul>
     <li>Menu item1</li>
     <li>Menu item2</li>
   </ul>
</nav>

index.php:

<html>
   <head>
      <link rel="stylesheet" href="header.css" />     <!--- Or should it be here? --->
   </head>
   <body>
      <?php include('header.html'); ?>
      <!--- Some HTML code ---->
   </body>
</html>

header.css:

nav{ color: #00FF00; }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Simple

    Put Scripts at the Bottom.
Put Stylesheets at the Top

    The HTML specification clearly states that stylesheets are to be
    included in the HEAD of the page: "Unlike A, [LINK] may only appear in
    the HEAD section of a document, although it may appear any number of
    times." Neither of the alternatives, the blank white screen or flash
    of unstyled content, are worth the risk. The optimal solution is to
    follow the HTML specification and load your stylesheets in the
    document HEAD.

    For javascipts

    The problem caused by scripts is that they block parallel downloads.
    The HTTP/1.1 specification suggests that browsers download no more
    than two components in parallel per hostname. If you serve your images
    from multiple hostnames, you can get more than two downloads to occur
    in parallel. While a script is downloading, however, the browser won’t
    start any other downloads, even on different hostnames.

    FYI:
    http://developer.yahoo.com/performance/rules.html#css_top
    http://developer.yahoo.com/performance/rules.html#js_bottom

    [EDIT]
    For your new question,

    • Make that header.html to dynamic page.
    • When ever that is being included, Read the data from output buffer (assuming you are not
      flushing it out) using ob_get_contents.
    • Then you can inject the css file into the head part.
    • Echo it.
    • Clean the buffer with ob_end_clean();

    Some frameworks, like zend allows you to control this with the helpers.

    • 0