Grow your CSS skills. Land your dream job.

Structuring the “head” tag.

  • # March 3, 2013 at 8:52 pm

    I was filing through some of the posts and noticed that the structure of the head tag is pretty important. I know that doctype and charset is first and foremost, but is there a science to organizing the head? (local css, local js, external css, external js, meta tags) My thought process is that you should link local files last since they will render the quickest and the external scripts and styles first since they require more tome to render?

    Not really a problem, just acquiring knowledge.
    Cheers

    # March 3, 2013 at 10:08 pm

    You might want to Google for boilerplates like html5 boilerplate, Twitter Bootstrap, Goldilocks Approach and probably many more and see how they organize the head.

    Doctype shouldn’t be in the head but charset should indeed be one of the first things in there. I don’t know what you mean by local and external files. JavaScript should be near the end of body if possible, not in the head (there are exceptions like Modernizr), since this is better for performance.

    # March 3, 2013 at 11:57 pm

    Local being files on the server, and external being extra http requests (google web fonts etc.)

    # March 3, 2013 at 11:59 pm

    @matt_sanford Local files still require a http request.

    Also, here is what I generally start with:






    # March 4, 2013 at 3:52 am

    A generic recommendation:

    1. Charset
    2. Title
    3. Metadata
    4. CSS
    5. Scripts

    It is also good if you can minimize the amount of requests, although if you have stuff that you can cache to far distant future (this can be done via htaccess/server configuration) then it isn’t that bad even if you have a few more than what some consider “ideal”, that is only have one (massive) stylesheet and one (gigantic) JS.

    If you setup a long cache time and still want to do modifications to the CSS and JS files and don’t want to constantly keep on changing filenames there is one trick you can do:

    Adding the last modification date like this is a good idea as just changing that is enough to force browser cache to reload the script when the modification date is changed. Setting up PHP code to output this information is simple enough.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".