HTML Website Design, Much of HTML feature set involves JavaScript APIs that make it easier to develop interactive web pages but there is a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages. In order to investigate these, let look at marking up a blog.
Firstly what we’ll do is use the header
, footer
, main
and 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 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 have been warned, so at the top of your document, you need the line <!DOCTYPE html>
.
Some sites HTML 5, when in actual fact all they have done is take their existing code and change the DOCTYPE. That’s fine and dandy if you have 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: Its a simple matter to change the HTML div
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 its nevertheless content rather than navigation. So I decided to go for the element as the closest fit.