curious about other people's html document structure

jamesmorris86 · 13 Jul 2015 at 21:15

There are so many different ways to structure html documents and I was just wondering how people go about it. For example I've seen websites recommend about 4 slightly different ways to include the css file (media, type, version etc).

I was just wondering if there was actually a definitive way of doing it. After a bit of research I have started using the following.

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>title</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="css/styles.css?v=1.0" media="all">
    <script src="js/script.js?v=1.0"></script>
  </head>
  <body>
    <!-- page content -->
  </body>
</html>

spenncerr · 13 Jul 2015 at 21:37

Why would you refer to a version number in your css link?

Code:

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='https://www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script>
    </body>
</html>

Basically the HTML5 boilerplate.

jamesmorris86 · 13 Jul 2015 at 22:15

To make sure a new version is loaded instead of a cached version. Only important I guess if your making regular updates to the CSS file.

Vulcan · 14 Jul 2015 at 12:01

Javascript should be placed at the bottom of the page. When it's placed at the top it stops everything else from loading until it's done.

And I can't say I've used the author and description META tags since about 2003.

Code:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Website</title>
<link rel="shortcut icon" type="image/x-icon" href="//example.com/img/favicon.ico">
<link rel="stylesheet" type="text/css" href="//example.com/css/style.css">
</head>
<body>
Hello world.
<script type="text/javascript" src="//example.com/js/js.js"></script>
</body>
</html>

gord · 14 Jul 2015 at 13:34

Longbow said:
And I can't say I've used the author and description META tags since about 2003.

You don't use the description meta tag?! It's a deprecated part of SEO algorithms now but it's still a major part of SERPs and a very useful piece of information for users.

edit: Just done some reading, do you just let engines generate their own descriptions for your sites? Seems it's not a bad thing any more: https://moz.com/learn/seo/meta-description. Not sure I'd be entirely comfortable with that though.

jamesmorris86 · 14 Jul 2015 at 17:10

Longbow said:
Javascript should be placed at the bottom of the page. When it's placed at the top it stops everything else from loading until it's done.

This is quite a good article which led me to put it at the top.

http://demianlabs.com/lab/post/top-or-bottom-of-the-page-where-should-you-load-your-javascript/

spenncerr · 14 Jul 2015 at 18:57

jamesmorris86 said:
This is quite a good article which led me to put it at the top.

http://demianlabs.com/lab/post/top-or-bottom-of-the-page-where-should-you-load-your-javascript/

All that article basically says is top or bottom depending on your use-case. It still generally makes much more sense to put it at the bottom.

Vulcan · 14 Jul 2015 at 22:15

gord said:
You don't use the description meta tag?! It's a deprecated part of SEO algorithms now but it's still a major part of SERPs and a very useful piece of information for users.

edit: Just done some reading, do you just let engines generate their own descriptions for your sites? Seems it's not a bad thing any more: https://moz.com/learn/seo/meta-description. Not sure I'd be entirely comfortable with that though.

Yeah it grabs content from the website and uses that, but perhaps it's something I need to re-evaluate.

jamesmorris86 said:
This is quite a good article which led me to put it at the top.

http://demianlabs.com/lab/post/top-or-bottom-of-the-page-where-should-you-load-your-javascript/

Yeah, at the top if it's a web-application, which doesn't apply to the vast majority of the web. Google, Youtube & OcUK do, or would benefit from putting it at the bottom.

AJK · 15 Jul 2015 at 10:16

CSS at the top, along with necessary JS. Other JS libraries and plugins can come later (along with social share rubbish, where at all possible). Don't just blindly stick JS at the bottom "because it's better" - evaluate your specific need.

And yes, use meta descriptions for pages where it's useful to control the search results text - eg. homepages, major landing pages. Content pages can do better self-generating, assuming you have good keyword-aware content writing style.