SHARE

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

Written By

Feb 9, 2012

9 minute read

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.

HTML 5 Structure Elements: Elements that Define Content

HTML 5 Structure Elements

Elements that Define Content

Left, Center and Right Columns Using the

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.

Left Column

My Main Content Section

,

”Projected — 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.

*My Lead Article with Figure Element*



*Projected Widget sales for some year by some company in some country.*

            *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*
            *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.*

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. Notice how the caption text*
                *stays within the defined figure space.*


and
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.


*My Second Article*

*featuring the *hgroup* and *aside* elements*


            *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.*

            *Don't find fault, find a remedy.*
            *— Henry Ford*

*In this article we look at *hgroup* 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 *aside* which is explained in the*
            *aside* element show here.

*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 *aside* that you would add to any *div*
            *or *span* element like background images and borders.*




*My Second Article*

*featuring the *hgroup* and *aside* elements*


            *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.*

            *Don't find fault, find a remedy.*
            *— Henry Ford*

*In this article we look at *hgroup* 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 *aside* which is explained in the*
            *aside* element show here.

*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 *aside* that you would add to any *div*
            *or *span* element like background images and borders.*


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:

*My Final Article on the 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 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 *iframe* but you really need a good reason to place it on your web*
            *page .. other than it's cool. See the *iframe* element in action below.*

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.

Right Column

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!

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

HTML 5 Structure Elements

Elements that Define Content

My Main Content Section

My Lead Article with Figure Element

Curtis Dicken

Company

Categories