Prior to the development of HTML5 sematics, building a web page could be a real headache, mostly due to all the <div> elements through the page and little, if any idea what they were. Introduced in Dreamweaver 5. HTML5 starter layouts appeared and in Dreamweaver CS5.5, that continues. This one development is huge, partly because it makes it easier to understand what’s happening on a page.
First, in the New Document dialog box (File: New Document – Ctrl+N), you’ll see two HTML5 document options at the bottom of the Layout column. In this case, I’ll choose the HTML5: 3 column fixed, header and footer. Before you click on the Create button, have a look at the Create New File popup. You have three choices: Add to Head, Create New File or Link to Existing File. In this case we’ll choose Add to Head and click on the Create button.
And this brings up a layout that you’ve no doubt seen before. Be aware that each section of the layout has instructions in it so you get more information about how to configure the layout. In another article, I made use of one of these formats when I built a site for a customer. These started layouts make life a lot easier.
Now there’s one other important thing to note. When you use any of these templates, you can convert them to an HTML5 layout. Here’s how it works. Go to File: New. When you choose any one of the starter layouts you can also change it into an HTML5 document, by going to the Doc Type popup on the right and choosing HTML5, then create the document. We’ll stick with the first layout we created above because it’s now time to look at the code.
At the tops of the layout we’ll click on the Code button. At the top of the page you’ll see the DOCTYPE, which is simply HTML, nothing else. Below that is the CSS and once we create this page to our satisfaction we can save the CSS as a separate file and link it to our pages. You’ll also notice a lot of commenting in the CSS to help you understand what’s happening with your layout.
Moving down the page, we see the HTML and you’ll notice that the elements are HTML5 semantics, instead of <div> tags. As an example, in the code above, you’ll see the <aside> and <footer> tag, all of which identify that part of the layout.
While each section of the layout is given a name and one would think it would be used for a given purpose, that isn’t necesarily so. As a case in point, the footer would normally be at the bottom of the page, but it can be placed in different areas if you so choose. The same with the navigation, header, etc.
To make use of code hinting, start typing out the name of a tag, in this case IMG and the hinting pops up on the right.
Regarding browser support, all the new browsers will support HTML5. This includes Firefox, Opera, Safari, Chrome and Internet Explorer 9. Of course an important issue is with the older browsers. Here’s how Adobe handles that issues with Internet Explorer. At the end of the HEAD section, you’ll notice a comment which is conditional and only pertains to Internet Explorer. The top part reads: If less than Internet Explorer 9 (version 6, 7, and 8), the browsers will read this JavaScript and it helps these version of of Internet Explorer understand how to use these HTML5 elements.
HTML5 Semantics – Structural Elements
Instead of <div> tags, here’s a list of HTML5 elements you’ll encounter as you work on your layouts (some of these will seem self-explanatory):
- header – this is used to describe the page header
- footer – this element is for the footer, which could include banners, copyrights, logo’s, etc.
- nav – this is for link lists
- article – this is for articles, posts, etc.
- section – meant for chapter headings or sections of a layout
The next set of elements are useful for describing content:
- aside – this is for layout elements outside of the main content, such as a sidebar
- figure – you would use this for caption text or images or video
- dialog – used to reference a discussion between speakers
- phrase – this is for inline elements of the design
This next group is for specific content:
- mark – text that you want to be highlighted
- time – referring to a specific moment
- meter – for measuring a value which should be described in numbers
- progress – this is best used with JavaScript
Some things to be aware of is that HTML5 hasn’t been standardized – yet.. Having said that, it can be used for mobile devices such as the Android, Blackberry 6. As noted earlier, it’s supported by the newest browsers, as well. Another important feature of HTML5 is that it’s backwards compatible with other versions of HTML.
