Build a consistent HTML web page structure

A HTML document / webpage can be made up of various different blocks of code. An HTML webpage in its most basic form is an HTML tag which contains within it all the other tags which make up the webpage. A lot of web design even web development is based upon nesting - placing code within code. The real benefit of this type of structure is you can be very specific when you want to target tags which are far down the document tree or you can target tags at the top level to apply changes to all the tags underneath. A good example of this is CSS. You can style a particular tag a certain way and these attributes can carry to the tags underneath.

HTML document type and the HTML tag

As stated before a basic webpage is an HTML tag which opens and closes and all your page elements will be within this tag. Before you write up this tag you must define a document type. This is basically what version of HTML you webpage is written in. There have been a few different versions of HTML over the last few years. HTML5 is the most recent and in my opinion the easiest to work with. You can get away with certain nesting that will cause you to fail validation when you use other document types. XHTML is another document type you can use but it can lead to a lot of validation errors unless you build your tags perfectly. The W3C validator is one of the handiest tools online to check your HTML document for errors relating to your HTML structure and version and you really should try to get all your document / webpages to validate.

<!doctype html>
   <html>
   // everything goes here
</html>

The HTML head tag and the HTML body tag

Within your main HTML tag there should be two main tags which should break up your webpage into 2 sections. These are the head tag and the body tag. The head tag contains what are referred to as head tags. Meta tags are a way to communicate certain aspects of your site to search engine robots and browsers and generally these tags are not seen by users, they are simply there for automated programs and software. There are dozens if not hundreds of different Meta tags you can use to communicate things about your webpage from things like the page title to what size to render your webpage on a mobile device. You can also place link elements in your head to things like CSS stylesheets which show browsers what files are required to style the document. The head tag will usually contain only a small amount of code as usually a webpage requires only a small amount of head tags to communicate everything about it.

<!doctype html>
<html>
   <head>
   // your head tags here 
   
</head>
   <body>
   // your page content here 
   </body>
</html>

The body tag contains more or less everything a user sees on your webpage. Things like written content, the actual tags to structure how your page is laid out visually and links to images and other assets. The body tag will contain the bulk of your code and usually will contain heavy nesting of tags.

Structuring your head tags

There are many ways to structure your head tags. If you are generating your tags dynamically through a CMS you may not have the power to change the order of your tags but generally it doesn’t matter what order you place most of your head tags. Below is a simple structure I use for my head tags. It contains various tags which can help with a lot of different things which are required to improve your SEO.

1. Meta charset Tag

<meta charset="utf-8">

2. The Meta viewport Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Be careful when using this Meta tag. It is used for sites that are optimised for mobile. What you can do with this tag is tell browsers what size a page should be rendered at and whether on mobile devices the page should be scalable / zoom-able.

3. Links to CSS stylesheets

<link href="http://ddmseo.com/css/main.css" rel="stylesheet" type="text/css" media="all">

Each webpage will usually contain one or more CSS Stylesheets which contain the code to format a webpage. You can also place CSS directly within your head tag within style tags but its good practice to externalise CSS into different files so these files can be cached / saved within a browser.

4. SEO Meta

<title>DDMSEO - Title</title>
<meta name="description" content="Meta description here.">
<meta name="keywords" content="keywords">

A place to put your SEO Meta is next within your document head. My definition of SEO Meta would be your Meta title, Meta description, and Meta Keywords. All HTML documents need the Meta title at least even if the page is not being indexed by Search engines as the Meta title will display in browser tabs.

5. Meta robots

<meta name="robots" content="index,follow">

You can place your Meta robots tag next. Click the following link for a full explanation of the Robots Meta tag.

6. Canonical link tag

<link rel="canonical" href="http://ddmseo.com">

This is another very important head tag that deserves an explanation in itself. Click the following link for a full explanation of the Canonical link tag.

7. Favicon head tags

<link rel="icon" href="http://ddmseo.com/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://ddmseo.com/favicon.ico" type="image/x-icon">

A favicon is a very small icon that displays on browser tabs and you can design and build one to enhance your brand recognition. It displays alongside your Meta title within a browser tab and you must ensure to use a very simple image as it is so small anything complicated will usually not convert very well to a favicon.

8. Apple touch icon head tags

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

Mobile devices are more important now more than ever and anything you can do to connect with the features of these devices is worth doing. If a user saves a link to your website on their iPad / iPhone and you have a corresponding touch icon image, this image will be saved on their device as the link.

9. Open graph Meta tags

<meta property="og:title" content="DDMSEO – Open Graph Title"><meta property="og:description" content="Open Graph description."><meta property="og:site_name" content="ddmseo.com">

<meta property="og:url" content="http://ddmseo.com">
<meta property="og:image" content="http://ddmseo.com/images/page/ddmseo.jpg">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@ddmseo">
<meta name="twitter:creator" content="@ddmseo">
<meta name="twitter:title" content="DDMSEO – Twitter card title">
<meta name="twitter:description" content="Twitter card description.">
<meta name="twitter:image" content="http://ddmseo.com/images/page/ddmseo.jpg">

The last essential head tags you can look into placing on your webpages are the Open Graph Meta tags. These head tags are very helpful for sharing your content in a formatted way across social media.

Placing JavaScript before the body tag

As stated before the body tag contains all the content of your page that renders on screen. The body can be made up of various things including images and text. The order of these particular elements don’t matter as they are completely dependent on how you structure your page but what is important is what to place after this content before the closing body tag. You should look to placing all your JavaScript’s after the content on your page just before the closing body tag. You can place JavaScript files within your document head tag but unless you are using what is referred to as asynchronous loading it can block the loading of your page and slow down your page speed.

<body>
   // your page content here
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src="scripts.js"></script>
   <script>// Inline scripts / script blocks</script>
   <script>// Social button scripts</script>
   <script>// Google Analytics tracking code</script>
</body>

The order of your scripts matter a lot and there will be times where your scripts may not run properly at all if they clash or they are loaded in the wrong order. If you are using scripts that are reliant on other libraries e.g. you are using a script that is reliant on the JQuery library then obviously you should load jQuery first. My personal preference is to load all libraries first, then script blocks, social scripts (for Facebook like button etc.), then the Google Analytics tracking code.

Anatomy of a simple structured HTML page

Below is a simple blueprint of a clear HTML document structure that should be fast loading, have good structured SEO, important and relevant head tags, and can be used across projects fairly easily. It is a combination of everything listed above. Insert relevant values where necessary.

<!doctype html>
<html>
   <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="" rel="stylesheet" type="text/css" media="all">
   <title></title>
   <meta name="description" content=”">
   <meta name="keywords" content=" ">
   <meta name="robots" content="index,follow">
   <link rel="canonical" href="">
   <link rel="icon" href="" type="image/x-icon">
   <link rel="shortcut icon" href="" type="image/x-icon">
   <link rel="apple-touch-icon" href="touch-icon-iphone.png">
   <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
   <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
   <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
   <meta property="og:title" content="">
   <meta property="og:description" content="">

   <meta property="og:site_name" content="">
   <meta property="og:url" content="">

   <meta property="og:image" content="">
   <meta name="twitter:card" content="summary">

   <meta name="twitter:site" content="@">
   <meta name="twitter:creator" content="@">

   <meta name="twitter:title" content="">
   <meta name="twitter:description" content="">

   <meta name="twitter:image" content="">
</head>
<body>
   // your page content here
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src=""></script>
   <script> // Inline scripts / script blocks </script>
   <script> // Social button scripts </script>
   <script> // Google Analytics tracking code </script>
   </body>
</html>

Rate this article

Average Rating: 0 out of 5 / Votes: 0.00

Comments

Please login or register to post comments

Login | Register