programming4us
programming4us
WEBSITE

Smashing Html5 : Organizing a Page - A Design in Sections

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

One of the major changes in HTML5 compared with older HTML versions is in the sections. Prior to HTML5, you could pretty well think of sections in terms of the body element and some <h> tags. In HTML5, a page can be envisioned in terms of a number of sections with subsections. A larger context in a Web page is an article, and just like an article in a magazine, you can find different sections that constitute the building blocks of the article. Figure 1 provides an overview of the sections in an HTML5 page.

977279-fg0504.eps

Figure 1: Some sections that make up a page.

In looking at Figure 1, you can see different blocks of information, but the tags used generally don’t have any inherent capacity to structure the information visually. The <h> tags, which are section elements, certainly configure text to different sizes. However, the other section tags are as much for helping to organize a page as they are for specifying the visual display of the page.

The section elements include the following:

Body

Section

Nav

Article

Aside

H1 . . . H6

Hgroup

Header

Footer

Address

The body element is the sectioning root just as the html element is the page root.

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>Sections</title>

</head>

<body>

<article>

<header>

<h1>Pilots and Planes</h1>

<p><q>I never left one up there. </q><i>Ace Davis</i></p>

</header>

<nav><a href=”#”> Safety</a> | <a href=”#”>Check Lists</a> | <a href=”#”>Landings</a></nav>

<section>

<h2>Flying Stories by Real Pilots</h2>

<h3>...and other cures for insomnia.</h3>

<section>

<h4>Short Final</h4>

<p>As we were on short final, control cleared the Maule for immediate takeoff, which it did in about 15 feet of runway at an airspeed of 20 mph. It filled my windshield as I approached stall speed. After realizing its mistake, the tower instructed the Maule to loop, and we were able to land without incident.</p>

</section>

<section>

<h4>Thermal on Takeoff</h4>

<p>Taking off from Gila Bend, Arizona, with the ambient temperature of 130 F, we encountered a strong thermal at the end of the runway, which took our Cessna 177b to 15,000 feet in 12 seconds flat, at which time we leveled off and proceeded to New Mexico via the jet stream, setting a new speed record.</p>

</section>

</section>

<aside>

<h2>Truthful Pilot Found!</h2>

<p>Emily Rudders, a pilot in Moose Bite, Vermont, was recently found to be the only truthful pilot in existence. When asked to relate her most exciting flying adventure, Emily replied, <q>I ain’t never flew no airplane. I jus’ shoot at ‘em when they fly over and bother the moose.</q></p>

</aside>

<footer>

<address>

Contact us at:<a href=”www.aopa.org”>AOPA</a>

</address>

</footer>

</article>

</body>

</html>

The purpose of sections is to divide the page into coherent parts. They’re an organizational set of elements, and while they can be used for formatting, that isn’t their main purpose. For adding formatting to a paragraph or group of paragraphs, the W3C Standards encourage the use of the <div> tag.

Figure 5-5 shows what the page looks like. Although it isn’t an attractive design, it is a functional one. The article is about pilots and flying. The article’s header announces the topic (pilots and planes) and provides a quote from a pilot using a <q> tag. After the header, the first section is about flying stories. Nested within the first section are two other <section> tags that separate out the two stories.

A somewhat related section about the veracity of pilot stories is placed in a separate aside element container. In Figure 2, you may have noticed that the aside was placed in a separate column, but in and of itself, an aside element is a reference to the sense of the page. It is not a formatting element as such.

977279-fg0505.eps

Figure 2: A page organized with section elements.

Why you really should pay attention to the section organization

You may be thinking that you can get a page up and running without the hassle of the section tags. That’s true. However, under the hood of your mild-mannered Web page is a rumbling engine that can reference different parts of your page. Known as the Document Object Model (DOM), the different groupings you have set up using the section elements can be addressed as different objects and children of objects in a well-ordered stream of data coursing over the Internet. By paying attention to the organizational model used in HTML5, your Web page will be happy, the Internet will be happy, and the galaxy will be happy.

Finally, at the bottom of the article is a footer. Footer elements can go anywhere, including inside individual section and aside element containers. Footers act as a closing organizational element for the section elements. Within the footer is an address element with a link to a URL related to the article.

Other  
  •  Smashing Html5 : The Top of the HTML5 Document
  •  The Alfa Romeo Mito – A Usable And Fun Package
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 8) - SEO Page Optimization - Edit Display Templates
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 7) - SEO Page Optimization - Edit Master Pages
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 6) - SEO Page Optimization - Upload Design Files
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 5) - SEO Page Optimization - XML Site Map, Site Design Manager
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 4) - SEO Page Optimization - Page-Level SEO, Site Collection SEO
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 3) - Using the Content Search Web Part, Managed Navigation
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 2) - Catalog Enable List/Library
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 1) - Content Authoring Improvements, Image Rendition
  •  
    Top 10
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
    - Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
    - Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
    REVIEW
    - First look: Apple Watch

    - 3 Tips for Maintaining Your Cell Phone Battery (part 1)

    - 3 Tips for Maintaining Your Cell Phone Battery (part 2)
    programming4us programming4us
    Celebrity Style, Fashion Trends, Beauty and Makeup Tips.
    programming4us
     
     
    programming4us