HTML5 Template, Structure, and Tags

edited October 2014 in Blog

HTML5 Template

So, you are ready to start building your HTML5 website or web app, but where do you start? If you have been doing this for a while, you are probably a little tired of rewriting the same HTML structure tags and created some sort of a template. If you are not already using some preset HTML5 blank templates, this article will walk through the HTML5 structure from scratch to finish and explain how everything fits together with demos and examples. This is a very basic introduction to building the web with HTML5.

If we were to start at the most basic structure, it would consist of 4 tags (doctype is not an HTML tag):


  • doctype - a doctype stands for document type declaration and it provides a DTD (document type definition) which defines the version of HTML being used in the page. This tells the browser how to parse and understand HTML tags and for HTML5, the doctype is just html as in <!DOCTYPE html>.


  • html - this tag is the root element of the HTML5 web page and it permits one head and one body element.


  • head - this element includes metadata about the page using elements like the title tag, meta tags like description or favicon, stylesheets, and scripts.


  • body - this element has all the content of the HTML page.


Here is a simple example of that:

<!doctype html>
<html>
<head></head>
<body></body>
</html>

If you where to preview this in a browser, you would only see a blank page but we have setup the fundamental structure of an HTML document. Now, lets fill it in with some simple metadata and HTML5 body structure using the title tag, meta charset tag, and some HTML5 sematic elements (elements with meaning) like header, footer, and section tags in the body:


  • title - the title of the page, written in plain text and shown in the browser’s title bar


  • meta - this tag is used to pass additional metadata about the page like a short description or a charset declartion to specify the character encoding for the HTML document


  • header - HTML5 tag used to group introductory or navigational aids, generally at the top of the page or section.


  • footer - similar to the HTML5 header tag a footer is often used at the bottom of the page or section.


  • section - a generic section of the document that groups some content.


Here is a simple example of that:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Basic Structure</title>
</head>
<body>
<header>Placeholder for a logo, search form, or navigation</header>
<section></section>
<footer>Placeholder for a copyright, contact info, or related links</footer>
</body>
</html>

Metadata like charset encoding could be specified through HTTP headers instead, but either way, it is a best practice to tell the browser how to encode the characters in the HTML document. If it is added to the document it should be placed as the first element inside the head tag.

In terms of the body tags, it’s important to note that a section should not really be used as a generic container. A div element is a better choice for a generic block with no associated semantics. Let’s add some more HTML5 tags:


  • div - generic block or container


  • nav - HTML5 tag used for navigation


  • aside - HTML5 element used for a section that is related to the content around it like a sidebar.


  • article - HTML5 element for some self-contained content which could be an actual article, or a blog/forum post, a user comment, etc.


  • heading - six levels of document headings from the most important h1 tag to least important h6 tag


  • p - element for a paragraph of text


Here’s how all of that looks in HTML code:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Basic Structure</title>
</head>
<body>
<header>
<div id="logo">Logo</div>
<nav>Navigation</nav>
</header>

<section>
<header>Header text or image</header>
<article>
<h1>Article title</h1>
<p>Article Paragraph</p>
</article>
<footer>Section Footer</footer>
</section>

<aside>SideBar</aside>

<footer>
<p>Copyright 2014</p>
</footer>
</body>
</html>

Notice that I have reused the header and footer tags inside the section element. This is totally valid and it makes sense as these HTML5 semantic tags are now related to the specific section and not the entire page. They could be placed inside the article tag as well and then they would relate to the article.

Our page header now includes a logo in a generic div tag and a placeholder for navigation in a nav tag. The nav element could be repeated in the footer or it could live as its own block inside the body tag. The point is that there are many ways to use these tags and the approprite choice depends on your needs. For example, we are using the aside element as a sidebar to the page but it could also be used as a sidebar to a section. Lets restructure things in a different way and introduce some more tags, stylesheets, and scripts:


  • style - used to embed inline style information for one or multiple elements on the page


  • script - used to embed inline JavaScrript or reference an external script within an HTML document


Lets take a look at the code again:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="Page Description for Search Engines"/>
<title>HTML5 Basic Structure</title>
<style>
/* Inline CSS Code for Design */
</style>
</head>
<body>
<header>
<h1 id="logo">Logo</h1>
</header>

<nav>
<ul>
<li>Home</li>
<li>Archive</li>
</ul>
</nav>

<section>

<article>
<h1>Article 1 title</h1>
<p>Article 1 Paragraph</p>
</article>

<article>
<h1>Article 2 title</h1>
<p>Article 2 Paragraph</p>
</article>

<aside>
<section>Placeholder for links related to the articles</section>
<section>Placeholder for images related to the articles</section>
</aside>

</section>

<footer>
<p>Copyright 2014</p>
</footer>

<script>
/* Inline JavaScript Code for Dynamic Content and Interaction */
</script>
</body>
</html>

The body now has the navigation outside of the header with two items inside of a ul element which is used for an unordered list of items. The main section now includes two articles and the aside element is within the main section, providing content that is relative to the articles in the section. The aside also splits the upcoming links and images in its own section tags.

The repetition of h1 heading tags inside the article (in addition to the one used for logo in the header) makes sense and it does not have a negative impact on search engine rankings. In terms of SEO, I have also added teh meta description tag, as it is still useful for search engines, unlike the meta keywords tag.

Finally, we have the style and script tags. The style tag is used to add CSS code the page for one or multiple elements so that your page can some design: colors, padding, size, position, etc. Script tags are used for JavaScript, a language that adds dynamic content and interaction to the page: popup modals, client side form validation, alerts, etc. Putting the style tag in the head element is a best practice to avoid FOUC (flash of unstyled content) as you want the browser to paint the page with the design already applied.

In terms of the script near the end of the document, that is best practice for page speed or performance (browsers read and execute JavaScript in a single thread meaning they block the execution of anything else). The additional benefit here is that the the browser has already processed all the elements (build the DOM) so your JS code can interact with the HTML tags. Placing script tags in the head would require checking if the page has loaded before executing code that interacts with the DOM (document object model). If you put script tags inside of the head element, make sure to place them after the stylesheets.

While these are inline styles and scripts, you might want to include your own external or third-party stylesheets and scripts. Our final HTML5 tamplate will include a few more tags, conditional comments, embedded fonts, and some external static assets:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Page Description for Search Engines "/>

<title>HTML5 Basic Structure</title>

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css"/>;

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato "/>
<style>
body {
font-family: 'Lato', sans-serif;
}
</style>

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>;
<![endif]-->
</head>
<body>
<header>
<h1 id="logo">Logo</h1>
</header>

<nav>
<ul>
<li>Home</li>
<li>Archive</li>
</ul>
</nav>

<section>

<article>
<h1>Article 1 title</h1>
<p>Article 1 Paragraph</p>
</article>

<aside>
<section>Placeholder for links related to the articles</section>
<section>Placeholder for images related to the articles</section>
</aside>

</section>

<footer>
<p>Copyright 2014</p>
</footer>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>;
<script>
$(function(){
//JavaScript/jQuery code here
});
</script>
</body>
</html>

The final HTML5 Starter Template includes a bunch of cross-browser and cross-device support and optimizations:


  • The viewport meta tag optimizes rendering on mobile devices and our values there specify the device to match layout width to the device width and set the initial zoom to 1:1 scale. You can read more about the viewport tag here.


  • Normalize.css is a small external stylesheet that brings consistency in cross-browser rendering. As a result, your code looks the same in different browsers and you can read more about normalize.css here.


  • Since legacy Internet Explorer browsers do not understand these HTML5 elements, we add a shiv (a small JavaScript snippet) to add this support. Since we are specifically targeting IE version before 9, we wrap the script tag around IE conditional comments so newer browsers do not need to load this file. Also, we put the script in the head, as we want the browsers to gain support before reading the HTML5 tags in the body. You can read more about the html5shiv here.


The last piece added to the head element is a special embedded font that we want to use on our page. Google Fonts makes this pretty easy and they have a decent selection of fonts. Notice how the Lato font is used in the style tag.

In terms of the body, we have reorganized some tags and we have added a script tag to retrieve jQuery, a popular JavaScript library. This is an external script, and underneath it we have our inline script which uses the jQuery ready handler to make sure the page has loaded and DOM is ready for JS interaction. More on that in the future.

Here are some links for further reading:

Dive into HTML5
HTML5 Element Index
HTML5 Boilerplate
HTML5 Rocks Tutorials

Tagged:
Sign In or Register to comment.