HTML5 is still under development, but web designers and developers have already started to learn and adapt to what is already becoming the new web standard. HTML5 is the result of proposals presented by two major developers of web browsing technology: the Mozilla Foundation and Opera Software. The W3C is expected to adopt HTML5 as a future web standard, and new versions of Opera and Google Chrome browsers have been designed to showcase the new markup language.
Web designers are strongly advised to start learning a few practices that are essential when designing documents in the new HTML5 markup. The first thing to consider is that HMTL5 is intended to perform on backward compatible rendering software, so it is safe for developers to change their existing pages to HTML5. The new declaration begins as follows:
<!DOCTYPE html>
The new doctype declaration of HTML5 works on existing browsers.
Using Cascading Style Sheets
Here’s an example from the W3C working draft on HTML5. It features CSS, and it displays a page that displays yellow text on a blue background:
<!DOCTYPE html>
<html>
<head>
<title"HTML5 Best Practices"/title>
<style>
body { background: navy; color: yellow; }
</style>
</head>
<body>
<h1"This is a sample HTML5 page with CSS"/h1>
<p"How does it look?"/p>
</body>
</html>
The sample page above does not include the new HTML5 elements, which are discussed below:
New Elements of HTML5
The focus of HTML5 is on structuring web pages in a manner that is clean and easy to interpret. To this extent, HTML5 makes use of elements rather than complex div tags. For the purpose of adopting best practices, the HTML5 elements can be categorized into block level, canvas, inline, and media elements.
Block Level Structural Elements
Block level elements define page structure. The <header> and <footer> are wrapping elements, and they work just like they did on previous versions of HTML, but they no longer need to be preceded by div. In fact, <header> and <footer> aren’t needed in simple pages like the code sample above.
The <section> element declares structural layout serves to hold other elements within. The <nav> element makes reference to links used for site navigation, the <article> element is a placeholder for content such as text and graphics, and the <aside> element can be used for sidebars.
The <aside> element will probably be used in the future to hold information boxes, infographics or other elements that are traditionally separate from the main content. Of all the new elements, <aside> is bound to be the most misunderstood. The best way to think about it is to think about the infographics that made the print versions of National Geographic, Time Magazine and USA Today so effective. Those infographics were true sidebars that, while related to the main content, stood well on their own. An even better example of putting <aside> to work would be the ubiquitous text advertisements by Google AdWords.
The <section> tag can be further used for nestling content; for example, an <article> element can have its own set of <section> tags. Notice that the terms element and tag are used interchangeably for now, but in the future it will be easier to refer to them exclusively as elements. The <article> element is more suitable for content that stands independently on its own, while <section> refers to content that is either structural or related to the <article> element.
Headings are now handled by the <hgroup> element, which precedes and follows headings numbered <h1> to <h6>. In the CSS yellow on blue example above, there was no need to use the <hgroup> element as only one heading was displayed. Should the page require <h2> through <h6> headings in the future, then they should be encapsulated by <hgroup> element declarations.
Image content in HTML5 is declared by the <figure> element, and a caption can be added by the <figcaption> element. While it isn’t necessary to use the <figure> element, the new HTML5 paradigm calls for meaningful web page design, and thus the <figure> element helps web designers to call attention to images related to the <article> or <aside> content.
The block level elements of HTML5 should be included in the CSS file to allow browsers to support, interpret and render them appropriately. For the Microsoft Internet Explorer family of browsers, a script known as htmlshiv enables HTML5 when it is called up at the time the page begins loading. It is a JavaScript code that should be inserted before the <body> element:
For more information on htmlshiv, please visit its official page: http://code.google.com/p/html5shiv/
Non-IE browsers can be enabled to support HTML5 elements with code that indicates the semantic elements and their use. For example, to indicate the block elements the following code can be added to the CSS file:
article, aside, figcaption, figure, footer, header, hgroup, nav, section
{
display: block;
}
Canvas Elements
The Web 2.0 concept of the web as an application platform gave way to user-generated content, online social networking and collaboration. HTML5 is aware of the emphasis on participation and collaboration, and to that extent the <canvas> element calls for a blank space on a web page where users can congregate and collaborate, particularly by drawing. Flash and Shockwave technologies already offer such functionality, but since Adobe has decided to discontinue Flash development in favor of HTML5, it is possible that in the future the <canvas> elements will be concentrated around Java.
It is important to note that HTML5 and the course that web design is taking will favor the use of <canvas> over Scalable Vector Graphics (SVG), although some design trends are calling for the use of large SVG images for branding.
Inline Elements
The new <mark> element is used to call importance to text content within the page. The <time> element can be used to display date or time. Other inline elements include <summary> for the details header, <datalist> for drop-downs, and <meter> to define the range of a measurement.
Media Elements
The media elements of HTML5 do not currently offer wide browser support, as HTML5 is still in working draft mode. The <audio> and <video> elements are clean and simple. They are used to embed media files that can be played according to the codecs installed and supported in different browsers.
The best practices that apply to <audio> and <video> in HTML5 involve the inclusion of multiple media sources to allow the browser to try them one by one before running out of options. Should this be the case, a message indicative of the lack of support must be included in the code. For example:
<audio controls="controls">
<source src="bestpractices.mp3" type="audio/mp3" />
<source src="bestpractices.ogg" type="audio/ogg" />
The audio file "bestpractices" cannot be played as this browser does not support the element.
</audio>
Digital Rights Management is not currently supported by HTML5.
HTML5 and Search Engine Optimization (SEO)
There has been some discussion among SEO practitioners as to whether HTML5 will boost page ranking on Google search. Google has already indicated that its crawler engine does not discriminate between different markups, it rather looks at substantive content.
This does not mean that SEO-conscious web developers and designers should forgo learning and implementing HTML5, but it does give web professionals enough time to learn about the future face of the Internet.
Your first example code has broken tags :p
I love the look of HTML 5 and what you can do with it, intetresting comments regarding SEO.