Developing in HTML5 with the New Structure Elements: Elements that Define Content

By Curtis Dicken

HTML 5 makes a leap forward in defining page content with several new “structure” elements that are designed to give web pages more ... you guessed it ... structure. In our previous article Developing in HTML 5 with the New Structure Elements: The Basics, we covered the basic structure elements of header, nav, section and footer. In this article we will start with the same example and expand it by adding the more content specific elements of article, aside, figure,figcaption, hgroup and iframe. We’ll also expand on the section element by adding a right and left column to our example. If you are not familiar with the basic elements of header, nav, section and footer yet, I invite you to review Developing in HTML 5 with the New Structure Elements: The Basics before you continue.

Page Layout by Example

Since we are going to be focusing on the structural elements of HTML 5, we are going to keep our example simple. In our article Developing in HTML 5 with the New Structure Elements: The Basics we created a simple page structure with a header, navigation bar, main content area and a footer. In this article we are going to modify the main content area to add a left and right column and add several elements inside the main content area to further define our content.

Note: In order to keep the examples as simple as possible we’ll be defining all of our style definitions within the elements themselves instead of placing the definitions in a CSS file. Just keep in mind that when you apply these examples in real life we suggest that you make your website development more manageable by using a CSS file and use the class attribute for your style definitions.

Defining the Page

Below is just the basic HTML we need to create the top portion our page which includes the header and navigation bar. This portion is virtually identical to our previous example with only a few content changes to the header. Just note that we are using the style attribute to define styles instead of the class attribute and a CSS (Cascading Style Sheet) file. If you are not familiar with CSS we suggest that you review the multitude of CSS articles here on HtmlGoodies.com.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>HTML 5 Structure Elements: Elements that Define Content</title>

</head>

<body style="background: #999999;">

<div style="width: 1024px; margin: 10px auto 0px auto;"> <!-- Centers the layout in the browser window -->

<header style="position: absolute; background: #ffffff; padding-left: 15px; padding-top: 0px; width: 1009px; height:100px; background-image: url('/images/HtmlGoodies_ByExample_Conte.png'); text-align: left;">

<h1>HTML 5 Structure Elements</h1>

<h3>Elements that Define Content</h3>

</header>

<nav style="position: absolute; background: #000000; margin-top: 100px; padding-left: 15px; padding-top: 4px; width: 1009px; height:20px; text-align: left;">

    <a href="MyHomePage.html" style="color: White;">Home</a>

    &nbsp;&nbsp;

    <a href="MyAboutPage.html" style="color: White;">About</a>

</nav>

Left, Center and Right Columns Using the <section> Element

As discussed in Developing in HTML 5 with the New Structure Elements: The Basics, the section element is intended to be the “catch-all” for the sections of content on your web page layout. In our redesign we have broken the main content area into three sections, the left column, the main content area, and the right column. We will be exclusively using the main content area for our examples to follow but this should give you a good idea how to layout your pages in a multi-column format. Please note the code example here only includes the left column and the opening declarations for the main content area. The closing tags for the main content area and the right column are in the Closing Out the Page section below.

<section id="LeftColumn" style="position: absolute; background: #ffffff; margin-top: 124px; padding-left: 5px; padding-top: 10px; padding-right: 5px; width: 110px; height:560px; background-image: url('/images/HtmlGoodies_ByExample_Co-03.png'); text-align: left;">

   <p>

                Left Column

  </p>

</section>

<section id="MainContent" style="position: absolute; background: #ffffff; margin-top: 124px; margin-left: 120px; padding-left: 15px; padding-top: 10px; padding-right: 15px; width: 700px; height:560px; background-image: url('/images/HtmlGoodies_ByExample_Co-04.png'); text-align: left; overflow-y: scroll; overflow-x: hidden;">

    <h2>My Main Content Section</h2>

<article>, <figure> and <figcaption> Elements

The first element that you see below is the article element. The article element is intended to define content that can stand alone within a page. Ideally it could be taken completely out of the page where it currently resides and be placed in any other page on your website and still make sense. In our case this article is being used as an example of the article element itself as well as the figure and figcaption elements. We have also created a fake figure example with associated caption. We have styled the figure so that it is right justified and the text of our article wraps around it. Hopefully this illustrates some of the common website development tasks of articles, figures and text wrapping.

You should also notice the caption that we created with the figcaption element. The figcaption element makes a simple block of caption text for your figures. The element is placed within the figure element so that the browser understands the association between your figure and its caption. You can style the figcaption element just like any other element. In this example we have simply defined our caption to be small and italicized. When you view this entire example in a browser you will notice how the caption text stays within the defined figure space.

<article>

        <h3>My Lead Article with Figure Element</h3>

        <p><figure style="width: 250px; float: right; margin: 5px;">

                <img src="/images/Figure_Example.png" alt="Projected Widget Sales" width="250" height="250" style="border: 1px; border-color: Black; border-style: solid;" />

                <figcaption style=" font-size: small; font-style: italic;">Projected Widget sales for some year by some company in some country.</figcaption>

            </figure>

            The <em>article</em> element is intended to define content that can stand alone within a page.

            Ideally it could be taken completely out of the page where it currently resides

            and be placed in any other page on your website and still make sense. In our

            case this article is being used as an example of the <em>article</em> element

            itself as well as the <em>figure</em> and <em>figcaption</em> elements. We have

            created a fake figure example with associated caption. We have styled the figure

            so that it is right justified and the text of our article wraps around it.

            Hopefully this illustrates the common website development tasks of articles,

            figures and text wrapping.</p>

            <p>You should also notice the caption that we created with the <em>figcaption</em>

                element. The <em>figcaption</em> element makes a simple block of caption text

                for your figures. The element is placed within the <em>figure</em> element so that the

                browser understands the association between your figure and its caption. You can

                style the <em>figcaption</em> element just like any other element. In this example we

                have simply defined our caption to be small and italicized. Notice how the caption text

                stays within the defined figure space.</p>

    </article>

    <hr style="width: 100%;" />

<hgroup> and <aside> Elements

In this article we illustrate a common use for the hgroup and aside elements. The first element that you should notice is hgroup. Its purpose is to group together headings that belong together. This is not so much a stylistic element as it is a purely structural element that makes it easier for search engines and developers alike to quickly and easily see what headings belong together.

The second element of our article is the aside element. The aside element is intended to contain information that is relevant to the article content. It can be used to highlight information in the article or provide additional information that may be slightly off topic like a famous quote.

When you view this example in a browser you will see how the aside element offers great possibilities for highlighting points in a topic discussion, providing a space for definitions of terms, reserving a location for topic relevant advertisements, and much more. You can add the same style choices to aside that you would add to any div or span element like background images and borders.

<article>

        <hgroup>

            <h3>My Second Article</h3>

            <h4>featuring the <em>hgroup</em> and <em>aside</em> elements</h4>

        </hgroup>

        <aside style="width: 250px; float: left; margin: 5px; padding: 10px; width: 200px; height:210px; background: #999999; font-size:medium; color: White;">

            The <em>aside</em> element is intended to contain information that is relevant to

            the article content. It can be used to highlight information in the article or provide

            additional information that may be slightly off topic like a famous quote.<br /><br />

            <em>Don&#39;t find fault, find a remedy.</em><br />

            -- Henry Ford</aside>

        <p>In this article we look at <em>hgroup</em> element first. Its purpose is to group

            together headings that belong together. This is not so much a stylistic element

            as it is a structural element that makes it easier for search engines and

            developers alike to quickly and easily see how headings belong together. The

            second element of our article is the <em>aside</em> which is explained in the

            <em>aside</em> element show here.</p>

            <p>As you can plainly see, the aside element offers great possibilities for

            highlighting points in a topic discussion, providing space for definitions of

            terms, a location for topic relevant advertisements, and much more. You can add the

            same style choices to <em>aside</em> that you would add to any <em>div</em>

            or <em>span</em> element like background images and borders.</p>

    </article>

    <hr style="width: 100%;" /><article>

        <hgroup>

            <h3>My Second Article</h3>

            <h4>featuring the <em>hgroup</em> and <em>aside</em> elements</h4>

        </hgroup>

        <aside style="width: 250px; float: left; margin: 5px; padding: 10px; width: 200px; height:210px; background: #999999; font-size:medium; color: White;">

            The <em>aside</em> element is intended to contain information that is relevant to

            the article content. It can be used to highlight information in the article or provide

            additional information that may be slightly off topic like a famous quote.<br /><br />

            <em>Don&#39;t find fault, find a remedy.</em><br />

            -- Henry Ford</aside>

        <p>In this article we look at <em>hgroup</em> element first. Its purpose is to group

            together headings that belong together. This is not so much a stylistic element

            as it is a structural element that makes it easier for search engines and

            developers alike to quickly and easily see how headings belong together. The

            second element of our article is the <em>aside</em> which is explained in the

            <em>aside</em> element show here.</p>

            <p>As you can plainly see, the aside element offers great possibilities for

            highlighting points in a topic discussion, providing space for definitions of

            terms, placing topic relevant advertisements, and much more. You can add the

            same style choices to <em>aside</em> that you would add to any <em>div</em>

            or <em>span</em> element like background images and borders.</p>

    </article>

    <hr style="width: 100%;" />

<iframe> Element

The iframe element is basically a method of placing a browser window within the browser window. It simply pulls in the content of a web page via a web URL or a source file and displays it in a window on your web page. It does provide some interesting possibilities for restricting how the iframe content functions within the iframe but you really need a good reason to place it on your web page .. other than it's cool.

The unique attributes of the iframe element are defined below. If you are familiar with the HTML 4 version of the iframe element you will notice that it has been drastically overhauled and offers far fewer attributes than before. That is why it has been included in this article, not because it is new but because it has had significant changes.

height – Defines the height of the iframe window.

name – Defines a name for the iframe.

sandbox –This attribute allows you to set restrictions on the content of the iframe. It is possible to list multiple restrictions for sandbox attribute by separating them by a comma, e.g. sandbox=”allow-forms,allow-scripts”. Currently only Chrome and Safari support this attribute. The attribute options are:

·         “” - i.e. empty string which applies all the restrictions listed below.

·         allow-same-origin – which allows the iframe content to be treated as if it had the same origin as the page that contains the iframe.

·         allow-top-navigation – which allows the iframe content to navigate content in the page that contains the iframe.

·         allow-forms – which allows form submissions.

·         allow-scripts – which allows scripts to be executed.

seamless –This specifies whether the iframe should look like it is seamlessly blended into the page where it appears. The presence of the seamless attribute indicates the iframe should render seamlessly and the absence indicates it should render normally. Currently there are no major browsers that support this attribute.

src –This specifies the URL address for the content that is to be displayed in the iframe.

srcdoc –This specifies the document which contains the source for the content that is to be displayed in the iframe.

width –Defines the width of the iframe window.

The HTML markup:

<article>

        <h3>My Final Article on the Iframe Element</h3>

        <p>The <em>iframe</em> element is basically a method of placing a browser window

            within the browser window. It simply pulls in the content of a web page via

            a URL or a source file and displays it in the window. It does provide

            some interesting possibilities for restricting how the web page functions within

            the <em>iframe</em> but you really need a good reason to place it on your web

            page .. other than it&#39;s cool. See the <em>iframe</em> element in action below.</p>

        <iframe src="http://www.wikipedia.com" style="width: 700px; height: 300px;"></iframe>

    </article>

Finishing Out the Example

All that is left now is to close out all of our tags and finish up the page. The markup below includes the right column section, the footer and all of the closing tags that we need to finish our example.

</section>

<section id="RightColumn" style="position: absolute; background: #ffffff; margin-top: 124px; margin-left: 850px; padding-left: 5px; padding-top: 10px; padding-right: 5px; width: 164px; height:560px; background-image: url('/images/HtmlGoodies_ByExample_Co-05.png'); text-align: left;">

    <p>

        Right Column

    </p>

</section>

<footer style="position: absolute; background: #ffffff; margin-top: 694px; padding-left: 15px; padding-top: 10px; padding-right: 15px; width: 994px; height: 58px; background-image: url('/images/HtmlGoodies_ByExample_Co-06.png'); text-align: center;">

    <a href="MyHomePage.html" style="color: Black;">Home</a>

    &nbsp;|&nbsp;

    <a href="MyAboutPage.html" style="color: Black;">About</a>

    &nbsp;|&nbsp;

    <a href="MyAContactPage.html" style="color: Black;">Contact Us</a>

    &nbsp;|&nbsp;

    <a href="MySitemapPage.html" style="color: Black;">Sitemap</a>

    <br />

    Copyright © 2012 - All rights reserved

</footer>

</div>

</body>

</html>

Conclusion

We encourage you to download and look at this complete example in a browser in order to get a real feel for how these elements can be used in everyday development. All of these elements, save the iframe, are very intuitive and fully implemented in all modern browsers. The elements also make your HTML markup more readable for developers and search engines alike. Search engines will especially appreciate how your content is more organized. That is not to say that using these new HTML 5 elements are guaranteed to boost your search engine rankings, at least not yet anyway. Although, as we see the older browsers naturally fade away we may see search engine guidelines begin to shift favor to HTML 5 markup.

Download the HTML markup and images.

Happy coding!



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date