Dividing a Page Into Logical Sections

Most Web pages on the internet have a header, various content sections, an area for navigation, and a footer. Before HTML5, there was no standard way to explicitly include this kind of markup, so we used div elements to divide pages into logical chunks.

HTML5 introduces a handful of new structural elements that are block-level elements. We will be looking at several of these throughout the rest of the workshop.

If all Web developers implemented these new elements to their Web sites, then automated systems would know better what to expect. Search engines would be able to better index Web sites. Screen reader programs would be able to cater a better user experience, by adding options to jump directly to the navigation, or skip the header, and so on. Another perk of creating these semantic divisions is that we will be able to more conveniently target those areas of our document with CSS.

Semantic Structure Versus div Elements

A problem with the div was that it was absolutely meaningless to the semantics of the Web page. It was used solely for styling using CSS or interactivity using JavaScript. In fact, screen readers entirely ignore div markup.

Despite this, div elements still have their place. There are times when a region of the Web page is created purely for its appearance, and not what it means. But that is increasingly rare.

The HTML5 semantic structural elements have roles on a page, helping divide it into logical chunks. For a more complete list of these roles, see W3's page about the roles model.

Creating the Footer Element

It is a convention that Web pages include a footer section. Footers are typically the same on each Web page of a Web site, and provide quick access to various information and resources about that Web site.

Let's nest the final paragraph of the Web page within a footer element. Semantically, this new element identifies its content as playing a complementary role to the actual main content of the page.

Step1. To create the footer element, type:

<footer>
<p><a href="https://www.iu.edu/">Indiana University</a> Copyright 2015</p>
</footer>
</body>

Exiting code block

The final paragraph is now explicitly part of the footer.

Styling the Footer

The content of the footer usually is presented with a different style than the rest of the content of the page. Let's say we wanted our footer paragraph to be smaller than the rest of our text, and the text to be center aligned.

Before putting in the footer element, it would have been trickier to target the last paragraph in our document without inline CSS. But now that the paragraph is enclosed in this new markup, we can easily target it directly in our stylesheet.

We will create a new rule that targets the footer element, makes the font size to three quarters its ordinary size, and center aligns the content using the text-align property.

Step1. To create a rule that selects footer, type:

footer {
 font-size:.75em;
 text-align: center;
}

Exiting code block

Step2. Save and refresh index.html.

The footer's text should be smaller and center-aligned to the page, and this worked because the font-size and text-align properties were inherited by the footer's paragraph.

Creating the Nav Element

A Web page may have links all over it, but how does an automated system know which links are designated for the role of navigation? The new HTML5 nav element allows the designer to define the section of the Web page that is used for the primary navigation.

Let's wrap our two relative links in a nav element, in order to clarify the role of this section of our document as being navigation. Additionally, our nav element will fortify our links, which are inline elements, with their own structural block.

Step1. To create the nav element, type:

<p>equine-partnered life coaching</p>
<nav>
<a href="index.html">Welcome</a>
<a href="about.html">About</a>
</nav>
<h2>rediscover yourself</h2>

Exiting code block

We have now specified a navigation region of our page using the nav element.

Styling the Navigation

To make our navigation stand out a bit more, we will apply a background color to it. Background color can have all the same values text color can have.

Let's make a new rule to target our nav and apply the background-color property now.

Step1. To create a rule that targets the nav, type:

nav {
 background-color: navy;
}
footer {
 font-size:.75em;
 text-align: center;
}

Exiting code block

Step2. Save and refresh index.html.

The background color shows up, and this is actually the first time we can clearly see the space a block-level element consumes.

Styling the Navigation Links

While we can now clearly see the space that the nav block takes up, we can no longer easily read the links, because of the low contrast between the dark link color of the links in front of the dark background.

Let's make our links brighter by using the color property in a new rule that targets anchor elements.

Step1. To create a rule that targets anchor elements, type:

a {
 color: #ccccff;
}
footer {
 font-size:.75em;
 text-align: center;
}

Exiting code block

Step2. Save and refresh index.html.

The navigation links are now more legible, but if we were to scroll down to the bottom of the page, we would notice that our absolute link in the footer has adopted the color too. We want to only apply the color to our navigation links, so let's address that next.

Using Descendant Selectors

When we divide up the Web page into various regions, it is common to prefer that each region carry a different appearance, from different colors to different font choices. It is also common that these different regions share similar markup.

Anticipating these situations, CSS provides syntax to allow for a more specific selector. Instead of just targeting the element type in question, we can opt to also specify the markup from which the element descends. This is achieved through the descendant selector syntax.

To create a descendant selector, we write the element selector as usual, but we also precede it with any ancestor markup, separated with spaces. For example, to target paragraphs inside of our footer element, we would use footer p as our selector.

In the case of our navigation links, we'll want to tack nav onto the selector to be specific about where our links we intend to style are located.

Step1. To create the descendant selector, type:

nav a {
 color: #ccccff;
}

Exiting code block

Step2. Save and refresh index.html.

The navigation links should look the same, but the link in the footer should have changed back to its default color.

Complete stylesheets usually have many descendant selectors used.

Creating the Header Element

The header of a Web page encapsulates the content at the top of the page. This block usually contains the same content on every Web page of a Web site. The header content typically includes the logo or branding for the site, as well as common features we would want on every page, such as login links and so on. The role this content plays is that of a banner.

We are going to put our heading 1 element and our first paragraph in our header.

Step1. To create the header element, type:

<body>
<header>
<h1>Equinurture</h1>
<p>equine-partnered life coaching</p>
</header>
<nav>

Exiting code block

We have now specified the header section of the Web page. Let's now give it some style.

Styling the Child Elements of the Header Element

For our footer, we put text styles in a rule that directly targeted the footer, and those styles descended to the children of the footer. In the case of the header, let's say that we want our heading 1 and our paragraph to possess different text styles.

It would be best to take advantage of the descendant selector syntax, in order to isolate each of the children. We will create two additional rules: one that targets h1 elements in the header element, and one that targets p elements in the header element.

Step1. To create a rule that targets the heading 1 inside the header, type:

color: #343434;
}
header h1 {
 color: sienna;
}
nav {

Exiting code block

Step2. To create a rule for any paragraphs inside the header, type:

color: sienna;
}
header p {
 font-style: italic;
}
nav {

Exiting code block

Step3. Save and refresh index.html.

The main heading should now have a different color, and the tagline paragraph should now be italicized.

Creating Article & Section Elements

Besides the header, footer, and nav, the main content of this document has multiple logical sections. We can handle them with section elements. For the main content of the document (the content within the sections), there is a main element, but unfortunately its proper role is not fully supported by all browsers yet. So we will use a semantically similar element, article, to perform this role. The article element will contain the section elements., and all of their content, acting as a wrapper.

The Web page implicitly has two primary sections, which are currently identified by our heading 2 elements. We will create an article element for all of the main content, and be explicit about our sections by implementing two main section elements. For this document, we do not want the header element to be within the article element, based on the structure of our content on the pages of this Web site. This is an arbitrary decision for this particular site; some others sites may include the header within the article element.

Let's see how to add this important structural elements.

Step1. Place the cursor on a blank line just above the first h2 element.

Step2. To create the opening tag for the article element, type:

</nav>
<article>
<h2>rediscover yourself</h2>

Exiting code block

Step3. To create the opening tag for the first section element, type:

</nav>
<article>
<section>
<h2>rediscover yourself</h2>

Exiting code block

We have now marked the beginnings of our article (the main content) and of the first section. The two sections are siblings to each other, so we will close the first one, and immediately open the next.

Step4. To create the junction of the section elements, type:

</section>
<section>
<h2>the experience</h2>
<h3>interacting with emme</h3>

Exiting code block

This second section and our article elements will both close before the footer element begins.

Step5. To create the closing tags for these elements, type:

</section>
</article>
<footer>

Exiting code block

Step6. Save and refresh index.html.

You should see no difference in the viewport, since all we have added are structural elements.

We have now identified the main content, and split it into two different sections using markup.

Creating Custom Markup Using Classes & IDs

So far, we have successfully styled everything with just element selectors. Almost inevitably, we will find ourselves in a situation where it will become difficult to effectively target every piece of our markup using our stylesheet.

In this project, for example, let's say that we wanted to apply a different color to each of our heading 2 elements. With our current markup, both heading 2 elements have practically the same context, i.e., children of section elements, which are direct descendants of article. This means that we cannot be specific enough with descendant selectors.

In order to select our heading 2 elements separately, you may be tempted to use inline CSS. Instead, we can create custom markup through the use of particular attributes for the targeted elements.

There are special HTML attributes which allow you to apply a custom name to any element in the body, enabling you to then target that element in a stylesheet. The attribute id is intended for an element which has a unique name on that page, while class is used for names which may appear one or more times on a given page.

Let's create a couple of ids for our section elements now, so that we can be more specific about targeting their respective children elements.

Adding the ID Attribute

In order to more effectively target our two section elements separately, we will give them each a different class with the id attribute.

The value of the id attribute is where we specify the id name. The name of the id can be anything we choose, with some minor limits: an id name cannot start with a number or special character, except for the underscore or hyphen.

Let's use the id name "intro" for our first section, because it represents the introduction to our home page.

Step1. Locate the opening tag for the first section element.

Step2. To add the id attribute, type:

<article>
<section id="intro">
<h2>rediscover yourself</h2>

Exiting code block

The first section element now invokes the id named "intro." Since our second section is headed with the text "the experience," let's use the id name "exp" for our second section.

Step3. Locate the opening tag for the second section element.

Step4. To add the id attribute, type:

</section>
<section id="exp">
<h2>the experience</h2>

Exiting code block

We can now differentiate our section elements by their id names, and with CSS we can use descendant selectors to target our heading 2 elements separately.

Using the ID Selector

We can reference our classes in our stylesheet using id selectors. The id selectors look just like element selectors, except that they are preceded by a hash (#).

Let's say we want the heading 2 in our intro section to invoke the color brown, and the heading 2 in our exp section to invoke the color navy. We'll do this by adding new style rules that target each h2 elements that descend from their respective sectionids.

Step1. To create a rule that targets the h2 element in the intro section, type:

footer {
 font-size:.75em;
 text-align: center;
}
#intro h2 {
 color: brown;
}

Exiting code block

As you can see, we are referencing our intro id by preceding the name with a hash.

Step2. Save and refresh index.html.

You see that only the first heading has any color change.