Firstly what weâ€™ll do is use theÂ
navÂ elements to mark up the broad structure of the page.Â Doing this will make your siteÂ more accessible to real peopleÂ who use some assistive technologies.
Next, weâ€™ll make the blog comments form much smarter by using the new data types and built-in validation available inÂ HTMLÂ 5-aware browsers.
Then weâ€™ll do some work on the guts of the page, usingÂ HTML 5â€™s elements to better mark up blog posts and comments and show how to use the sectioning elements to better structure accessible hierarchical headings on sites that areÂ CMS-driven. As blogs are chronologically ordered, weâ€™ll see whatÂ HTML 5Â offers us for representing dates and times.
HTML Website Design in India
So take the phone off the hook, and make a cup of tea and weâ€™ll get started.
Youâ€™ve been warned, so at the top of your document, you need the lineÂ
Some sites â€œuseâ€Â HTMLÂ 5, when in actual fact all theyâ€™ve done is take their existing code and change the DOCTYPE. Thatâ€™s fine and dandy if youâ€™ve been using valid, semantic code asÂ HTMLÂ 5 is very similar to validÂ HTMLÂ 4.01.Â Eric Meyer mentions small differences like â€œnot permitting a value attribute on an image submitâ€, and there are a few differences between the languages, summarized in the documentÂ HTML 5 differences from HTML 4. Start with HTML.
CSS Website Design in India
However, I donâ€™t want simply to rebadge my existing code but to use some of the new structural elements now.
The overall aim is to replace this structure: with this:Â Itâ€™s a simple matter to change theÂ HTMLÂ
divs into the new elements. The only difficulty I had was deciding which element to use to mark up my sidebar, as it also includes a search field and â€œcolophonâ€ information as well as site-wide navigation. I decided against the element, asÂ the spec saysÂ it â€œrepresents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that contentâ€, but itâ€™s neverthelessÂ content rather than navigation. So I decided to go for the element as the closest fit.