Comments: Due to the lack of structure, HTML pages with good forms are hard to handle. You must analyze the title level to see how each part is divided. The sidebar, footer, header, navigation bar, main content area, and articles are all represented by common div elements. HTML 5 adds some new elements specifically used to identify these common structures: · sectio
Due to the lack of structure, HTML pages with good forms are hard to handle. You must analyze the title level to see how each part is divided. The sidebar, footer, header, navigation bar, main content area, and articles are all represented by common div elements. HTML 5 adds some new elements specifically used to identify these common structures:
· Section: this can be a chapter or section in the book. In fact, it can be anything with its own title in HTML 4.
· Header: the header displayed on the page. It is different from the head element.
· Footer: footer. It can display the signature in the email.
· Nav: A group of links pointing to other pages
· Article: an article in blogs, magazines, and Articles
Let's consider a typical blog homepage, with a header at the top, a footer at the bottom, several articles, a navigation area, and a sidebar. For details, see the typical blog page in Code 1.
<Html>
<Head>
<Title> Mokka mit Schlag </title>
</Head>
<Body>
<Div id = "page">
<Div id = "header">
<H1> <a href = "http://www.elharo.com/blog"> Mokka mit Schlag </a> </Div>
<Div id = "container">
<Div id = "center" class = "column">
<Div class = "post" id = "post-1000572">
<H2> <a href =
"/Blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County </a> <Div class = "entry">
<P> 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 A. M., progressed to Spring around
A.m., and reached early summer by. </p>
</Div>
</Div>
<Div class = "post" id = "post-1000571">
<H2> <a href =
"/Blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list? </A> <Div class = "entry">
<P> Seems you can now go <
Href = "http://www.wired.com/science/discoveries/news/
2007/04/cone_sf "> bird watching via the Internet </a>. I
Haven'tbeen 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
Hold binoculars steady or get to the park. I can
Imagine this might be of some interest to them.
Least one elderly birder did a big year on TV, after
He cocould no longer get out so much. This certainly
Tops that. </p>
</Div>
</Div>
</Div>
<Div class = "navigation">
<Div class = "alignleft">
<A href = "/blog/page/2/"> «_ fcksavedurl = ""/blog/page/2/"> «" Previous Entries </a>
</Div>
<Div class = "alignright"> </div>
</Div>
</Div>
<Div id = "right" class = "column">
<Ul id = "sidebar">
<Li> <Ul>
<Li> <a href = "/blog/comment-policy/"> Comment Policy </a> </li>
<Li> <a href = "/blog/todo-list/"> Todo List </a> </li>
</Ul> </li>
<Li> <Ul>
<Li> <a href = '/blog/2007/04/'> limit l 2007 </a> </li>
<Li> <a href = '/blog/2007/03/'> March 2007 </a> </li>
<Li> <a href = '/blog/2007/02/'> February 2007 </a> </li>
<Li> <a href = '/blog/2007/01/'> January 2007 </a> </li>
</Ul>
</Li>
</Ul>
</Div>
<Div id = "footer">
<P> Copyright 2007 Elliotte Rusty Harold </p>
</Div>
</Div>
</Body>
</Html>
Even with the correct indentation, these nested divs are still confusing. In HTML 5, you can replace these elements with semantic elements. For details, refer to the typical blog page written in HTML5 in Code 2.
<Html>
<Head>
<Title> Mokka mit Schlag </title>
</Head>
<Body>
<Header>
<H1> <a href = "http://www.elharo.com/blog"> Mokka mit Schlag </a> </Header>
<Section>
<Article>
<H2> <a href =
"/Blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County </a> <P> 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
The site at A. M., progressed to Spring around
A. M., and reached early summer by 10: 15. </p>
</Article>
<Article>
<H2> <a href =
"/Blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list? </A> <P> Seems you can now go <
Href = "http://www.wired.com/science/discoveries/news/
2007/04/cone_sf "> bird watching via the Internet </a>. I
Haven'tbeen 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
Hold binoculars steady or get to the park. I can
Imagine this might be of some interest to them.
Least one elderly birder did a big year on TV, after
He cocould no longer get out so much. This certainly
Tops that. </p>
</Article>
<Nav>
<A href = "/blog/page/2/"> «_ fcksavedurl = ""/blog/page/2/"> «" Previous Entries </a>
</Nav>
</Section>
<Nav>
<Ul>
<Li> <Ul>
<Li> <a href = "/blog/comment-policy/"> Comment Policy </a> </li>
<Li> <a href = "/blog/todo-list/"> Todo List </a> </li>
</Ul> </li>
<Li> <Ul>
<Li> <a href = '/blog/2007/04/'> limit l 2007 </a> </li>
<Li> <a href = '/blog/2007/03/'> March 2007 </a> </li>
<Li> <a href = '/blog/2007/02/'> February 2007 </a> </li>
<Li> <a href = '/blog/2007/01/'> January 2007 </a> </li>
</Ul>
</Li>
</Ul>
</Nav>
<Footer>
<P> Copyright 2007 Elliotte Rusty Harold </p>
</Footer>
</Body>
</Html>
Div is no longer needed. You no longer need to set the class attribute by 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)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
