he HTML5 specification has added quite a few interesting and useful tags for structuring your markup. For a majority of everyday uses, these tags will replace many of our typical div entries from our code. So let’s dig in. DEFINING STRUCTURE <section> A section is a thematic grouping of content, typically preceded by header, possibly with a footer after. sections can be nested inside of each other, if needed, and can hold any amount of typical markup. <header> The header of a section, typically a headline or grouping of headlines, but may also contain supplemental information about the section. <footer> A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. <nav> Defines the navigation area, typically a list of links. The nav should be a sibling of the main section, header, and footer. <article> An independent entry in a blog, magazine, compendium, and so on. <aside> An aside indicates content that is tangentially related to the content around it. PUTTING IT TOGETHER So let’s take a look at how we would put together a typical blog page with our new structural tags. <!DOCTYPE html> <html> <head> <title>Standard Blog</title> </head> <body> <header> <h1><a href="#">Standard Blog</a></h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Archives</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <section> <article> <header> <h1><a href="#">Title</a></h1> </header> <section> <p>Lorem ipsum...</p> </section> </article> <article> <header> <h1><a href="#">Title</a></h1> </header> <section> <p>Lorem ipsum...</p> </section> </article> <article> <header> <h1><a href="#">Title</a></h1> </header> <section> <p>Lorem ipsum...</p> </section> </article> </section> <footer> <p>Copyright © 2008 All Rights</p> </footer> </body> </html> Note: This example is a little verbose in markup....
↧