Takeaway: Some of the first element updates of HTML5. Follow along and create a base template to reflect the updated specification.
In my previous post on HTML5: The next generation of web design. I briefly mentioned the major changes that the HTML5 specification has implemented already or is in the process of implementing, since the full specification is not expected to be completed until 2020 or 2022. I also touched on the browser compatibility matrix for HTML5 support.
This post will dive deeper into some of the major element updates that the specification brings to the table, specifically those that can be implemented today. If you are like me, you probably don’t write your entire markup by hand; you have templates set aside that take care of the initial page creation process. Until the tools you use now catch up to the new elements in HTML 5, you will be doing some initial markup by hand while you are learning, so why not start out with making a base template?
HTML5 base template
With the HTML5 specification, you can now create a new base template, why rewrite all this code every time you need to create new HTML documents? Included here are the elements that will get you up and running with an HTML5 base template.
Doctype declaration
Are you still using those hard to remember doctypes? I thought so; even TR still uses them.
Out with the old:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
In with the new HTML5:
<!DOCTYPE html>
How much simpler can that get? Even if the browser does not recognize the doctype it will revert rendering in standards mode.
Character Set Encoding declaration
And how about the old character set declaration?
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
HTML5 now has the code simplified:
<meta charset="UTF-8">
The http equivalent and content type is implied now and does not have to be declared.
Language Attribute declaration
This is necessary for browsers to render text in the correct language, especially for those that are not written in English. As an example, you might see this language declaration in use today:
<meta http-equiv="Content-Language" content="en" />
HTML5 has the language declaration slimmed down to:
<html lang="en">
Removed Internet Media Type
In previous HTML versions you might be used to seeing a script or link tag which includes the media type and written like these examples:
<script type='text/javascript' src='modernizer-2.0.min.js'></script>
<link rel="stylesheet" href="style.css" type="text/css" />
HTML5 has removed the Internet media type for scripts and links, as it is implied by the script or link source and renders similar to these two examples:
<script src=
"
modernizer-2.0.min.js
"
></script>
<link rel="stylesheet" href="style.css">
 |
| HTML5 New Basic Tags |
As long as attribute values don’t contain blank spaces, with HTML5 quotes are not required but recommended, so if you still like to use quotes or wrap your attributes within quotation marks, it is perfectly okay to do so, but know that it is not necessary with the HTML5 specifications. Either way you go, it makes sense to be consistent with whatever way you decide.
********************************
