String, Transitional, and Frameset
While studying the markup of Paul Irish’s HTML5 Boilerplate index page for my The Indispensable HTML5 Boilerplate Website Template article, I truly began to appreciate the need for a set of best practices for creating fast loading and consistent rendering of web pages. If you’re really interested in optimizing your web documents, as Irish and his colleagues obviously are, you will conclude that it takes some concerted effort to cater to the myriad of browsing devices available today. As a result of Irish’s hard work, we can now reap the benefits by following his various techniques. Today, I’d like to step through some of the index.html page header section and provide a bit of an explanation as to what each technique achieves. In doing so, we’ll not only get to know how to use them in our own pages, but we’ll be getting a cutting edge overview of the latest and greatest HTML best practices.
The DOCTYPE Declaration
Starting from the top, the <!DOCTYPE> declaration must be the very first line in your HTML document, even before the <HTML> tag. It’s purpose is to relay the HTML version of the page to the browser. In HTML 4.01, there were three different <!DOCTYPE> declarations (Strict, Transitional, and Frameset), which required a reference to a DTD, because HTML 4.01 was based on the Standard Generalized Markup Language (SGML):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Although the <!DOCTYPE> declaration is still required, HTML5 is no longer based on SGML, so the DTD reference can safely be dropped. In fact, all it has to state is that the content is HTML:
<!doctype html>
Conditional CSS Classes
Prior to conditional classes, the two preferred ways to style your document for different browsers were conditional stylesheets and CSS hacks.
Here are some conditional stylesheet statements for Internet Explorer:
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" /> <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" />< ![endif]--> <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" />< ![endif]-->
…and a typical CSS Hack for IE and Mozilla browsers:
div#container {
width: 28em;
padding: 10px;
border: 1px solid black;
border-radius: 10px;
-moz-border-radius: 10px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
}
Both the above solutions were less than satisfactory because conditional stylesheets caused the page to load more slowly while css hacks did not validate properly. Conditional classes now offer a compromise between these two approaches that solves both their shortcomings. What the solution does is apply a CSS class to the opening HTML tag so that it applies to the entire document. An empty class is applied if the browser version is higher than IE 9 and for all other browsers.
This loads quickly:
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
All your CSS code will reside in the same file and validate correctly:
div.status { color: inherit;}
.ie6 div.status { color: #fff; }
The Charset Meta Tag
In HTML4 the META tag to set the character encoding on a document would be written as:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
When developing the HTML5 spec, the W3C decided to shorten the syntax to the following, easier to remember, tag code:
<meta charset=utf-8>
Why utf-8?
The HTML5 Boilerplate index page sets the document encoding to utf-8. This is no accident, as it turns out that UTF-8 encoding is the best way to go. For one thing, Unicode is replacing ASCII and the use of 8-bit character sets such as ISO-8859-1 and Windows-1252. In fact, Unicode is a standard that specifies all of the characters for most of the world’s writing systems, meaning that it supports multiple languages on the same web page. Although not the only Unicode encoding (others include UTF-7, UTF-16, and UTF-32), UTF-8 is the most popular by far.
Don’t Skip This Step!
You should always include character encoding for your web pages, even if you never use any special characters. You see, HTML5 requires browsers to buffer a response when a character set is not specified in the Content-Type header or an HTML META tag and that can really slow down page loading. Another crucial issue is that omitting the Charset Meta Tag can make your site vulnerable to a cross site scripting attack using UTF-7. When your site has no character encoding defined, the browser may default to UTF-7 character encoding. This allows a hacker to inject UTF-7 encoded scripts into the web page to gain access to your site.
If you have access to the server configurations or .htaccess files, an even more secure solution than specifying the character encoding in the HTML is to serve it as part of the HTTP server headers. In Apache, you can change the default character set from ISO-8859-1 to UTF-8 by adding “AddDefaultCharset UTF-8” to your root .htaccess file. This one line will set the character encoding for your whole site in one fell swoop.
It’s All About Location
In early 2011, the W3C decided to allow the character encoding declaration be within the first 1024 bytes instead of the first 512 bytes, so that browsers can give more leeway before buffering the page content. Whether or not vendors will modify their browsers to accommodate the change is still up in the air. What I can tell you is that IE does not appear to buffer pages at all. When a character set is specified late in the document, Internet Explorer will redraw the page using the specified character set if it is not the same as the default character set. All the more reason to place the Charset Meta Tag as early in the document as you can.
Ladies and Gentlemen, Choose Your Engines
As far back as IE 6, Internet Explorer has had the ability to render HTML content using a variety of compatibility modes. Setting the X-UA-Compatible meta tag to “IE=edge” forces IE to use the most up to date rendering engine that it has available, so as to support emerging standards such as HTML5, Cascading Style Sheets (CSS), Level 3 (CSS3), Scalable Vector Graphics (SVG) 1.1 (Second Edition), and others. The second content option defined in the index.html page is Chrome Frame, which is a plugin for IE6, 7, and 8 that enables IE to utilize the excellent Google Chrome rendering engine. If the user has the plugin installed, the page will use it:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Mobile Device Optimization
Mobile Safari introduced the viewport meta tag to let web developers control the viewport’s size and scale. Many other mobile browsers now support this tag, although it is not part of any official web standard. Including the viewport meta tag in your document header helps render the page more consistently on mobile device screens of different sizes and resolutions.
Here’s more on the subject from the Mozilla Developer site.
<meta name="viewport" content="width=device-width,initial-scale=1">
Conclusion
Optimizing your web pages for different browsers, platforms, and devices has become a perilous undertaking. Gone are the days when your biggest worry was that you’d miss a closing tag! Thankfully, others have gone through the trouble of compiling all the best practices for getting your documents to load as quickly and render as consistently as possible across the full spectrum of available devices.
Of course, this is not the final word on the subject, as we still have to look at the document body. It can also benefit from a wide assortment of techniques that can load scripts more efficiently, add your site to Google analytics, and more.
