As you learn HTML5 and add new techniques to your toolbox, you’re likely going to want to build yourself an HTML boilerplate to start off all future projects. This is definitely worth doing, and there are many starting points online to help you build your own HTML5 template.
In this article, we’ll look at how to get started with building your own HTML5 boilerplate. We’ll walk through the essential elements of an HTML template, ending with a basic template that you can take with you and build upon.
If you’d rather just grab the code now and read this article later, here’s our finished HTML5 template.
The Anatomy of an HTML5 Template
Table of Contents
An HTML template typically includes the following parts:
- The document type declaration (or doctype)
- The <html> Element
- The character encoding
- The viewport meta element
- <title>, description, and author
- Open Graph meta elements for social cards
- Favicons and touch icons
- Links to stylesheets and scripts
Other than the document type declaration and <html> element, the elements listed above will mostly be found inside the <head> section of the HTML template.
The HTML5 Doctype
Your HTML5 template needs to start with a document type declaration, or doctype. A doctype is simply a way to tell the browser — or any other parser — what type of document it’s looking at. In the case of HTML files, it means the specific version and flavor of HTML. The doctype should always be the first item at the top of any HTML file. Many years ago, the doctype declaration was an ugly and hard-to-remember mess, often specified as “XHTML Strict” or “HTML Transitional”.
With the advent of HTML5, those indecipherable eyesores are gone and now all you need is this:
<!doctype html> Simple, and to the point. The doctype can be written in uppercase, lowercase, or mixed case. You’ll notice that the “5” is conspicuously missing from the declaration. Although the current iteration of web markup is known as “HTML5”, it really is just an evolution of previous HTML standards — and future specifications will simply be a development of what we have today. There’s never going to be an “HTML6”, so it’s common to refer to the current state of web markup as simply “HTML”.
Because browsers are required to support older content on the Web, there’s no reliance on the doctype to tell browsers which features should be supported in a given document. In other words, the doctype alone isn’t going to make your pages compliant with modern HTML features. It’s really up to the browser to determine feature support on a case-by-case basis, regardless of the doctype used. In fact, you can use one of the older doctypes with new HTML5 elements on a page and the page will render the same as it would if you used the new doctype.
The <html> Element
Following the doctype in any HTML document is the <html> element:
<html lang="en"> This hasn’t undergone any significant change since the advent of HTML5. In the code snippet above, we’ve included the lang attribute with a value of en, which specifies that the document is in English. This isn’t required for a page to validate, but you’ll get a warning from most validators if you don’t include it.
The <html> element is divided into two parts, the <head> and <body> sections. The <head> section contains important information about the document that isn’t displayed to the end user — such as the character encoding, and links to CSS files and possibly JavaScript. The <body> section contains everything that’s displayed in the browser — text, images, and so on.
HTML Document Character Encoding
The first line inside the <head> section of an HTML document is the one that defines the character encoding for the document. This is an optional feature and won’t cause any warnings in validators, but it’s recommended for most HTML pages:
<meta charset="utf-8"> In nearly all cases, utf-8 is the value you’ll be using in your documents. A full explanation of character encoding is beyond the scope of this article, and it probably won’t be that interesting to you, either. Nonetheless, if you want to delve a little deeper, you can read about character encoding in the HTML specification.
Note: to ensure that certain older browsers read the character encoding correctly, the entire character encoding declaration must be included somewhere within the first 512 characters of your document. It should also appear before any content-based elements (like the <title> element that appears later in our example).
There’s much more we could write about this subject, but for now, we’re content to accept this simplified declaration and move on to the next part of our document.
The Viewport Meta Element
The viewport meta element is a feature you’ll see in just about every HTML5 template. It’s important for responsive web design and mobile-first design:
<meta name="viewport" content="width=device-width, initial-scale=1"> This <meta> element includes two attributes that work together as a name/value set. In this case, the name is set to viwport and the value is width=device-width, initial-scale=1. This is used by mobile devices only. You’ll notice the value has two parts to it, described here:
width=device-width: the pixel width of the viewport that you want the website to be rendered at.initial-scale: this should be a positive number between 0.0 and 10.0. A value of “1” indicates that there’s a 1:1 ratio between the device width and the viewport size.
You can read up a little more on these meta element features on MDN, but for now just know that, in most cases, this meta element with these settings is best for mobile-first, responsive websites.
The next section of the HTML template contains the following three lines:
<title>A Basic HTML5 Template</title> <meta name="description" content="A simple HTML5 Template for new projects."> <meta name="author" content="SitePoint"> These elements have been part of HTML for a long time, so there’s nothing too new here. The <title> is what’s displayed in the browser’s title bar (such as when you hover over a browser tab). This element is the only mandatory element inside the <head>.
The other two are optional <meta> elements defining a description for SEO purposes along with an author. All elements inside <head> are optional with the exception of <title>. In fact, you can put as many valid <meta> elements in the <head> as you like.
Continue reading HTML5 Template: A Basic Boilerplate for Any Project on SitePoint.
