The harsh truth about HTML5 s

HTML5 semantic document structure

If your business is like mine, you've been hearing a lot of HTML5 this and HTML5 that lately. Lots of talk about the "Flash killing" video element, animations with canvas, geolocation, and much more. In fact, the buzz around HTML5 has been extended to include things that aren't even HTML5 at all. All over the web, people are talking about the new expressive capabilities of CSS3 while calling them HTML5. Often forgotten in the overwhelming marketing buzz of HTML5 are the new elements introduced and other semantic changes. In this article, I'd like to help you understand and learn to properly use these not-necessarily-exciting, yet definitely very important new, semantic elements. While the subject may seem dry and boring, there's actually a new richness you can add to your markup with the proper use of these new elements.

Why do we have new elements anyway? Did we need them? Where did they come from?

Think about your code. Do you ever use

, , or

? That's exactly where these new elements came from. Millions (maybe billions) of web pages were spidered and the common class names were compiled. You can imagine, after seeing "div class=header" for the umpteenth time, as an analyst, you pretty much knew you were on to something.

In fact, the above listed classes and IDs are three of the most obvious elements—header, nav, footer. And they make sense to most of us. Where it gets trickier, is adding article, section, and what in the world is an aside? More importantly, where do they go on the page? I won't discuss them all in this article, but some of the new elements introduced with HTML5 are (bearing in mind that a couple are still popping in and out of the spec):

article

aside

audio

canvas

command

datalist

details

embed

figcaption

figure

footer

header

hgroup

keygen

mark

meter

nav

output

progress

rp

rt

ruby

section

source

summary

time

video

wbr

One of the first challenges when you receive the content for a website, is deciding which of the new elements are appropriate to use and where they should go (see Figure 1).

See also:
  • iqoption viet nam
You might also like
semantic design日单 2011 假两件钢丝领多拉链
semantic design日单 2011 假两件钢丝领多拉链 ...
Shay Howe: HTML5 Semantics session
Shay Howe: HTML5 Semantics session
Semantic Markup with HTML5
Semantic Markup with HTML5
Ashish Kumar Web Technology
Mobile Application (Ashish Kumar)
  • This unique free application is for all students across the world. It covers 145 topics of Web Technology in detail. These 145 topics are divided in 8 units.
  • Each topic is around 600 words and is complete with diagrams, equations and other forms of graphical representations along with simple text explaining the concept...
  • This USP of this application is ultra-portability . Students can access the content on-the-go from anywhere they like.
  • Basically, each topic is like a detailed flash card and will make the lives of students simpler and easier.
  • Some of topics Covered in this application are:
  • 1. Principles of internet
  • 2. The URL
  • 3. Client-server model
  • 4. Local and Remote procedure calls
  • 5. HTML
Related Posts