Structure and semantics of HTML5 (2): Structure_html5 tutorial skills

Even well-formed HTML pages can be difficult to process due to a lack of structure. The level of the heading must be analyzed to see how the sections are divided. Sidebars, footers, headers, navigation bars, main content areas, and individual articles are all represented by common div elements. HTML 5 adds some new elements specifically to identify these common structures:
· section: This can be a chapter or section in a book, in fact anything that has its own title in HTML 4
· header: the header that appears on the page; separate from the head element Same
· footer: footer; can display signature in email
· nav: a set of links to other pages
· article: an article in a blog, magazine, article compilation, etc.
Let’s consider a typical blog homepage, which has a header at the top, a footer at the bottom, several articles, a navigation area and a sidebar. See Code 1 for a typical blog page.

Mokka mit Schlag

"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County

Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived
at the site at 7:30 A.M., progressed to Spring around
10:00 A.M., and reached early summer by 10:15.

"/blog/birding/2007/04/23/but-does-it-count-for-your-life -list/">
But does it count for your life list?

Seems you can now go href="http: //www.wired.com/science/discoveries/news/
2007/04/cone_sf">bird watching via the Internet. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.

« _fcksavedurl=""/blog/page/2/">«" Previous Entries

• Info

  
  
  
  
  • Comment Policy
  
  
  • Todo List
  
  



• Archives

  
  
  
  
  • April 2007
  
  
  • March 2007
  
  
  • February 2007
  
  
  • January 2007
  
  
  
  

Copyright 2007 Elliotte Rusty Harold

Even with the correct indentation, these nested divs still feel very confusing. In HTML 5, these elements can be replaced with semantic elements, see Code 2 for a typical blog page written in HTML5

Mokka mit Schlag

"/blog/birding/2007/04 /23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County

Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived at
the site at 7:30 A.M., progressed to Spring around 10:00
A.M., and reached early summer by 10:15.

"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list?

Seems you can now go href="http://www.wired.com/science/discoveries/news/
2007/04/cone_sf">bird watching via the Internet. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.

« _fcksavedurl=""/blog/page/2/">«" Previous Entries

• Info

  
  
  
  
  • Comment Policy
  
  
  • Todo List
  
  



• Archives

  
  
  
  
  • April 2007
  
  
  • March 2007
  
  
  • February 2007
  
  
  • January 2007
  
  
  
  

Copyright 2007 Elliotte Rusty Harold

Now the div is no longer needed. You no longer need to set the class attribute yourself, the meaning of each part can be inferred from the standard element name. This is especially important for audio browsers, mobile browsers, and other non-standard browsers.
　
　(To be continued)