Jump to content

HTML Code Layout


slj90

Recommended Posts

What is the correct order for HTML?
 

<html>
<head>
<title>
</title>
</head>
<body
</body>
</html>
 
Where should my css style that isn't on an external css file go?
 
Where should my PHP code go? (E.g session code)

Where should my Javascript go?

Where should my <no script> go?

Many thanks,
 
Link to comment
Share on other sites

First the things which (hopefully) everybody agrees on:

  • Put all your PHP code before the HTML markup. Do not mix PHP and HTML, or you'll end up with an unreadable mess of spaghetti code.
  • Put all your JavaScript and CSS into external files. Avoid inline scripts and styles under all circumstances, because those again lead to spaghetti code and prevent the use of effective security tools like Content Security Policy.

Where exactly your script elements should be placed is somewhat controversial. Some people say that putting them right before the closing <body> tag will yield the best performance, some say they belong into the head element (possibly with an async or defer attribute for performance). Personally, I always put them into the head, because I think scripts are meta data.

Link to comment
Share on other sites

Here is basic HTML5 layout for you:
 

<!-- PHP code here -->
<!doctype html>
    <head>
        <meta charset="utf-8">
        <title>The Default Template</title>
        <!-- CSS, favicons etc goes here -->
    </head>
    <body>
        <header>
            
        </header>
        <section>
            
        </section>
        <footer>
            
        </footer>
    <!-- Place your javascript here -->
    </body>
</html>
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.