What is new in HTML5
Before
this you need to know about!!!
Traditional HTML Layouts
For a long time, web page authors used <div> elements to group
together related elements on the page (such as the elements that
form a
header, an article, footer or sidebar). Authors used class or id attributes
to indicate the role of the <div> element
in the structure of the page
 |
| figure 1 |
in figure 1 you can see a layout that is quite common (particularly on blog sites). At the top of the page is the header, containing a logo and the primary navigation. Under this are one or more articles or posts. Sometimes these are summaries that link to individual posts. There is a side bar on the right hand side (perhaps featuring a search option, links to other recent articles, other sections of the site, or even ads). When coding a site like this, developers would usually put these main sections of the page inside <div> elements and use the class or id attributes to indicate the purpose of that part of the page.Now see whats are new elements in HTML5
New
HTML5 Layout Elements
HTML5 introduces a new set of elements that allow you to divide
up the
parts of a page. The names of these elements indicate the kind
of content
you will find in them. They are still subject to change, but
that has not
stopped many web page authors using them already.
 |
| figure 2 |
This
example has exactly the same structure as seen on the previous page. However,
many of the <div> elements have been replaced by new HTML5 layout elements.
For example, the header sits inside a new <header> element, the
navigation in a <nav> element, and the articles are individual <article>
elements. The point of creating these
new
elements is so that web page authors can use them to help describe the
structure of the page. For example, screen reader software might allow users to
ignore headers and footers and get straight to the content. Similarly, search engines
might place more weight on the content in an <article> element than that in
the <header> or <footer> elements. I think you will agree that it
also makes the code easier to follow.
In
the next tutorial I will see the implementation of each new elements of HTML5
in detail with the code example.
