Shaun Mccran

My digital playground

14
A
U
G
2011

Creating a baseline HTML 5 document

Browser standards and cutting edge web design are not great bedfellows. I've heard the arguments from creative designers that you have to write specific browser CSS styles to accommodate the multitude of browsers and their own unique way of rendering CSS.

I disagree. I firmly believe that with a good understanding of the structure of CSS elements and how they interact with each other you can develop a completely cross-browser non JavaScript baseline template. This article explains how I have approached creating a HTML 5 layout file, that works across legacy browsers just as well as the more modern interpreters.

Firstly I'd like to point out that the demo included here has no actual styling attached to it. I am aiming to creating a baseline template that anyone can drop into a directory to kick off a new project. I'm not too bothered about the look and feel at the moment.

Goal 1 - The same output in all supported browsers

To clarify 'supported browsers' I mean almost everything post Internet Explorer 6. I totally agree with the 'kill IE 6' campaign and unless someone makes a serious case as to why I should, I do not support it anymore. I've come around to thinking that it is ok now to point people towards upgrading their browser as they will have a poor experience using legacy browsers.

If you take a look at the Demo here: http://www.mccran.co.uk/examples/html5 in any of your browsers you should see exactly the same thing. It should be identical, I mean all of it. The margins, spacing and fonts etc are all the same.

The key to starting any project, is to have a clean slate. Try and keep your layout and styling separate, and as I have done here I really, really, recommend using a reset Style sheet. In this way all of the elements a browser does not recognise are handled like Div elements.

This is what I'm using as a reset CSS at the moment.

view plain print about
1a, abbr, acronym, address, applet, article, aside, audio,
2b, blockquote, big, body,
3center, canvas, caption, cite, code, command,
4datalist, dd, del, details, dfn, dl, div, dt,
5em, embed,
6fieldset, figcaption, figure, font, footer, form,
7h1, h2, h3, h4, h5, h6, header, hgroup, html,
8i, iframe, img, ins,
9kbd, keygen,
10label, legend, li,
11meter,
12nav,
13object, ol, output,
14p, pre, progress,
15q,
16s, samp, section, small, span, source, strike, strong, sub, sup,
17table, tbody, tfoot, thead, th, tr, tdvideo, tt,
18u, ul,
19var {
20 background:transparent;
21 border:0 none;
22 font-size:100%;
23 margin:0;
24 padding:0;
25 border:0;
26 outline:0;
27 vertical-align:top;
28}
29
30ol,
31ul {
32    list-style:none;
33}
34blockquote,
35q {
36    quotes:none;
37}
38table,
39table td {
40    padding:0;
41    border:none;
42    border-collapse:collapse;
43}

Goal 2 - No optional technology

This is a simple principle really. Do not create elements of a site/application that rely on option technology, such as JavaScript. If it is possible for users to block or disable the technology that you are using then do not rely on it for a critical part of your site.

There must be a guaranteed baseline user experience for everyone. By using the Reset CSS file above rather than a JavaScript HTML 5 workaround you are ensuring this.

In this way all Browsers will work in the same way, without the need for user buy in to specific technology. This is the code version of my HTML 5 baseline template, you can see it rendered here ( demo of a HTML 5 template)

This template has been successfully validated using the W3C markup service as valid HTML 5: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.mccran.co.uk%2Fexamples%2Fhtml5%2F

view plain print about
1<!DOCTYPE HTML>
2<html lang="en-GB">
3<head>
4<meta charset="UTF-8">
5<link rel="stylesheet" href="reset.css" type="text/css" media="all">
6<title>HTML 5 template</title>
7</head>
8
9<body>
10
11<!-- header -->
12<header>
13
14    <!-- navigation -->
15    <nav>
16        <ul>
17            <li>nav item 1</li>
18            <li>nav item 2</li>
19            <li>nav item 3</li>
20            <li>nav item 4</li>
21        </ul>
22    </nav>
23    <!-- end nav -->
24
25</header>
26<!-- end of header -->
27
28<section id="content">
29    <h1>Header 1</h1>
30
31    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas auctor dolor in erat venenatis quis vulputate mauris aliquet.
32    Aliquam nec urna porta odio accumsan convallis. Curabitur ut orci orci, eget posuere enim. Etiam est elit, pulvinar id
33    malesuada id, bibendum sed purus. Sed arcu magna,
34
35    <article>
36        <h2>Header 2</h2>
37        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas auctor dolor in erat venenatis quis vulputate mauris aliquet.
38        Aliquam nec urna porta odio accumsan convallis. Curabitur ut orci orci, eget posuere enim. Etiam est elit, pulvinar
39        id malesuada id, bibendum sed purus. Sed arcu magna,
40    </article>
41
42</section>
43
44<!-- bottom aside area -->
45<aside class="wrapper">
46
47</aside>
48
49<!-- footer -->
50<footer>
51
52</footer>
53<!-- end of footer -->
54
55
56<!-- GA tracking -->
57<script type="text/javascript">
58    var _gaq = _gaq || [];
59    _gaq.push(['_setAccount', 'UA-']);
60    _gaq.push(['_setDomainName', '']);
61    _gaq.push(['_trackPageview']);
62
63 (function() {
64 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
65 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
66 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
67 })();
68
69</script>
70
71</body>
72</html>

TweetBacks
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Sami Hoda's Gravatar Why wouldn't you use the html5 boilerplate code?
# Posted By Sami Hoda | 14/08/11 10:35
Shaun's Gravatar Hi Sami,

Yes, I suppose I could have used the boilerplate code, I've arrived at this example myself though, so I quite like using code I've evolved myself. I always feel like I know it more, and I understand what each element is actually doing.

I'm a very 'learn by doing' kind of person.
# Posted By Shaun | 14/08/11 14:00
Jeremy Halliwell's Gravatar btw in your stylesheet link tag you don't need to include type="text/css" any more, as the MIME type is implied by the filename.
# Posted By Jeremy Halliwell | 15/08/11 01:50
Shaun McCran's Gravatar Hi Jeremy,

That's a good spot, I'll give it a try and make sure it still validates, I find it much more interesting evolving documents like this.
# Posted By Shaun McCran | 15/08/11 02:12
Phillip Senn's Gravatar I put:

<noscript>
JavaScript is disabled.
</noscript>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js...;
<![endif]-->

in the footer.
# Posted By Phillip Senn | 15/08/11 06:37
salmanonline's Gravatar Thanks for such a valuable post. keep sharing more like this.
# Posted By salmanonline | 15/12/15 15:09
salman9708's Gravatar users on this forum can also get some good content here. http://directtutorials.com/salman-khan-hd-wallpape...
# Posted By salman9708 | 15/12/15 15:10
free blogger template's Gravatar the post about creating HTML baseline is really easy for pro but with the help of your post it is even easy for newbies.... check more at
http://www.mastemplate.com
# Posted By free blogger template | 15/12/15 22:18
free blogger themes's Gravatar Thanks for sharing such an informative post. your content seems quite easy and helpful to understand.http://www.mastemplate.com
# Posted By free blogger themes | 16/12/15 05:29
Katrina Kaif HD Wallpapers,Images Download 2015's Gravatar Thanks for the wonderful share. keep doing the same in the near future. Get Katrina Kaif HD Wallpapers,Images Download 2015 in 1080p Resolution. Katrina Kaif images download, Katrina Kaif wallpaper hd, Katrina Kaif photos hd from http://directtutorials.com/katrina-kaif-hd-wallpap...
best whatsapp dp images | directtutorials.com's Gravatar Wonderful post. It was worth reading it. Thanks for sharing. Do check out http://directtutorials.com/best-whatsapp-dp-images... to download best whatsapp dp images for your whatsapp display picture.
desi girls images-photos-pics-bloggers9.com's Gravatar Good Post. I really love the way you have shared the post here among your readers. Now download desi girl images, photos and hd pics from http://www.bloggers9.com/desi-girl-images-photos-c... to beautify your pc desktop background.
# Posted By desi girls images-photos-pics-bloggers9.com | 25/12/15 17:58
kajal agarwal hd wallpapers,pics,images,photos's Gravatar Thanks for sharing this post.
<a href="http://directtutorials.com/kajal-agarwal-images-do... agarwal hd wallpapers,pics,images,photos</a>
mia khalifa hd wallpapers,pics,images,photos's Gravatar Nice blog its easy to understand.
<a href="http://www.picsnimages.com/mia-khalifa-pics.html&q... khalifa hd wallpapers,pics,images,photos</a>
# Posted By mia khalifa hd wallpapers,pics,images,photos | 09/01/16 03:29
Back to top