HTML5 :: Basic Template Walk Through

Title Header: HTML5 Basic Template Walk Through.

What is HTML5?

HTML is the primary markup language used to structure and present content on the World Wide Web (WWW). HTML5 is the latest standard recommended by the World Wide Web Consortium (W3C).

A graphic illustrating the process of how a website gets rendered on the browser. 

website > server > HTML/CSS/JS documents > browser
From Folder to Browser Illustrated.

HTML describes the content of a web page. Cascading Style Sheets (CSS) provide styling information about the site: font-types, background colours, layout etc. JavaScript (JS) provides extra functionality allowing features like dynamic content updates or interactive maps. 

Contemporary websites use all three technologies to create dynamic, appealing webpages. 

Let’s go over the basic structure and components of an HTML document.

A Sublime editor screen shot of the code discussed in this post. Each line of code is further described in further down the text and a link to this code is provided in the last paragraph.
Sublime screen shot of a basic HTML5 page.

The DOCTYPE Declaration

The first thing to notice is that most HTML tags have an opening and closing tag. Closing tags always contain a slash which is how your browser knows it’s reached the end of an HTML elements content. Elements that can’t have content, like the meta tag, don’t require a forward slash in HTML5. These are known as “void elements”.

The first line of every HTML document needs to be a doctype declaration. 

The doctype tells the browser what kind of information to expect in the rest of the document. Here the doctype tells the browser to expect the HTML5 standard. 

Nesting Order

Basic Nesting Layout

It is also necessary to understand how the elements of an HTML document are structured. Often HTML elements are nested inside of each other and improper nesting will affect how the browser renders the page. 

The <head> and <body> elements should be separate from each other, with both elements nested inside the <html> element. 

Header Information

The header is the container for metadata about the website, and none of the content is visible in the browser. However, header information is invaluable to browsers and robots skimming the website for information. 

Components that should be in every HTML header are:

The <title> element usually holds the title of the webpage. Whatever content is in the <title> element will display at the top of the browser.

Screenshot of the sublime editor on the right showing the title elements and a web browser on the left showing the where the title element renders. There is an arrow pointing from the title element in the editor to the top tab in the open browser.
Screen shot illustrates where the <element> renders in the browser.

The <link> element(s) tell the browser where any additional files, usually CSS files, that go along with the HTML document live. The browser needs to access the styles before it renders the rest of the website. Otherwise, it has no way of knowing what colours, fonts, layouts etc. to use while creating the site. 

<meta> element with a charset attribute. Charset is short for “character set”. What a character set is and why it’s important deserves a separate blog post. But its essentially a collection of letters, numbers and other symbols that the browser can display. The default charset for HTML5 and the preferred charset of most emails is UTF-8, which will represent any character in the Unicode Standard. 

<meta> elements that provide a brief description of the website and who authored it. While Google has stated that meta tag content doesn’t affect it’s search rankings this information does appear in many Search Engine Results Page (SERPs) and will likely be the first content users of your website will see.

Finally, you should always include a <meta> tag that automatically scales the viewport (the visible part of the web page) to the device width, the main principle behind responsive design. 

The Body Content

All the visible content of an HTML document gets placed between the body tag: headers, paragraphs, images, tables etc. 

I’ll write more about the various HTML elements later. But, all HMTL page should include at least one <h1> element. The <h1> should be close to the top of the page and should contain title or headline information about the website. Proper use of header tags helps websites SEO and usability.

JavaScript

Similar to CSS style information properly designed websites keep scripting in a separate document that’s called from the HTML document. This document is usually called something like script.js and lives in a folder on the server called js or JavaScript.

There’s a bit of debate on where in an HTML document an external JavaScript file should be called. I prefer the convention of calling an external script at the end of the body element as HTML pages load from top to bottom. While internet connections are getting faster all the time, there are still plenty of pockets of the world where signals are slow. Placing the JavaScript link at the bottom of the body ensures the content of the site will load first so the user will have most of the websites information and some functionality even if the site crashes or load time starts to crawl. 

Every website on the internet starts with these primary elements. A fully commented HTML template is available as a gist on my GitHub page.

Please leave any questions in the comments.



Categories: Crash Course, HTML5, What is?

Tags: , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: