programming4us
programming4us
WEBSITE

Smashing Html5 : Organizing a Page - Getting Your Stuff Organized (part 1) - Paragraphs, divisions, and lists

- 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

Once you have a general organizational plan, you want to arrange your content within the different sections. In Figure 5-4, you saw that several of the section elements contained grouping elements, such as the <p> tags. Grouping elements are a preferred place for adding your CSS3 styles; section elements are not. In this section, you’ll find the major elements to help you organize your materials.

Paragraphs, divisions, and lists

The <p> and <div> tags used to be the workhorses of HTML pages for both grouping and styling. Both are still important, but you must remember that their job is no longer one of sectioning material on your page. Instead, think of both of these tags as grouping parts of a section. For example, the following code snippet shows the old way of using these two tags:

<div>

<h1>All About Important Stuff</h1>

<p>

<h2>Finding True Love</h2>

</p>

<p>

<h2>Choosing the Right Career</h2>

</p>

<p>

<h2>Getting a Parking Place</h2>

</p>

</div>

That code works perfectly well in HTML5, but it’s better organized using the most specific element for the job. A better code would look like the following:

<header>

<h1>All About Important Stuff</h1>

</header>

<section>

<h2>Finding True Love</h2>

<h2>Choosing the Right Career</h2>

<h2>Getting a Parking Place</h2>

</section>

On your Web page, they look the same, but with HTML5 you’ll find your pages more sensible using the new section elements.

So the question is, “Where can the p and div elements be used?” Actually, you don’t want to rely on either very much. However, when you want to add a style element or some other attribute in the middle of an <article> or <section>, they can be handy.

<!DOCTYPE HTML>

<html>

<head>

<style type=”text/css”>

body {

font-family:”Comic Sans MS”, cursive;

color:#0C6;

background-color:#FFC;

}

.girls {

background-color:pink;

}

.boys {

background-color:powderblue;

}

</style>

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

<title>Baby Names</title>

</head>

<body>

<article>

<header>

<h1>Baby Names</h1>

</header>

<section>

<div class=”girls”>

<h2>&nbsp;Girls</h2>

<ul>

<li>Olivia</li>

<li>Tess</li>

<li>Emily</li>

</ul>

</div>

</section>

<section>

<div class=”boys”>

<h2>&nbsp;Boys</h2>

<ul>

<li>Jacob</li>

<li>Ricky</li>

<li>John</li>

</ul>

</div>

</section>

</body>

</html>

Figure 1 shows the output, but the important point is that the <div> tag was employed only to provide the background colors for two different <section> elements.

977279-fg0506.eps

Figure 1: Using the <div> tag for styling.

As you can see in the listing, the div element allowed two different background styles in the section containers without having to add classes to the <section> tag. Overall, though, keep in mind that both <p> and <div> are more generalized elements, and at all times, you should use elements that are the most descriptive of your object on the Web page.

Besides grouping and styling using the <div> tag, lists also serve to outline data. HTML5 still uses the <ul> tags to group baby names for boys and girls. However, a subtle yet important difference is built into ordered (<ol>) and unordered lists (<ul>).

The use of unordered or ordered lists depends on the context. For example, in the 2010 Fédération Internationale de Football Association (FIFA) World Cup in South Africa, four of the teams competing for the championship were Germany, Netherlands, Spain, and Uruguay. If you were listing them at the beginning of the competition, you might use an unordered list. At the end of the competition, you may want to use an ordered list to show the final results.

<!DOCTYPE HTML>

<html>

<head>

<style type=”text/css”>

/*20268C,0C080C,2F8C2B,F27507,F20505 */

body {

background-color:#2F8C2B;

color:#0C080C;

font-family:Verdana, Geneva, sans-serif;

}

h2 {

background-color:#F27507;

color:#20268C;

font-family:”Comic Sans MS”, cursive;

}

h3 {

font-family:”Comic Sans MS”, cursive;

}

ol {

background-color:#F27507;

}

ul {

background-color:#F20505;

}

</style>

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

<title>Ordered and Unordered</title>

</head>

<body>

<h2>&nbsp;World Cup 2010</h2>

<h3>Beginning</h3>

<ul>

<li>Spain</li>

<li>Netherlands</li>

<li>Germany</li>

<li>Uruguay</li>

</ul>

<h3>End</h3>

<ol>

<li>Spain</li>

<li>Netherlands</li>

<li>Germany</li>

<li>Uruguay</li>

</ol>

</body>

</html>

As you can see in Figure 2, the meaning of the group at the beginning of the World Cup has no hierarchy — the list is just four teams at the World Cup. However, at the end, the order means everything, so the ordered list element is more appropriate.

977279-fg0507.eps

Figure 2: Ordered and unordered lists convey different meanings.

You may also note that the two different kinds of lists have different background colors added with CSS3. So when using grouping elements, you might also want to further group the content using color, as shown in both Figures 1 and 2.

Other  
  •  Smashing Html5 : Organizing a Page - A Design in Sections
  •  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
  •  
    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