Developing in HTML5 with the New Structure Elements: Specialty Elements

This is our final installment in our series about the new HTML 5 elements related to page structure. In Developing in HTML 5 with the New Structure Elements: The Basics, we covered the basic structure elements of header, nav, section and footer. In our second article Developing in HTML 5 with the New Structure Elements: Elements that Define Content we discussed the more content specific elements of article, aside, figure, figcaption, hgroup and iframe. We’ll expand on our example again by adding and discussing the bdi, details, summary, time and wbr elements. If you are not familiar with the elements covered in our first two articles we invite you to review Developing in HTML 5 with the New Structure Elements: The Basics and/or Developing in HTML 5 with the New Structure Elements: Elements that Define Contentbefore you continue.

Elements not Implemented

Now, not all of the elements mentioned above have been implemented by the major browsers yet. Therefore, there is no point in including them in our example below because they will just be ignored by the browsers. Instead we are going to simply discuss their purpose here and maybe one day we will be able to add them to our example.

· bdi – This element stands for Bi-Directional Isolation which basically means the text within the element can go either direction, i.e. left-to-right or right-to-left. An example of this element in use could be in an online forum setting where you may be handling multiple languages. Another may be if you have multiple language-specific versions of your website and want to dynamically direct visitors to the appropriate website using their native language based on their browser language settings. Currently this element has not been implemented in any major browsers.

· time – This element is primarily used to encode date and time related information with text in a machine-readable way. This then, in theory, makes it easier for user agents to use the information to offer things like adding special date reminders to a calendar. Currently this element has not been implemented in any major browsers. It has two specific attributes of note which are:

o datetime – This attribute defines the date and/or time for the element. This will be necessary when the content between the time element tags is not an actual date and/or time. For example, <time datetime=”2012-02-05”>Superbowl XLVI</time>.

o pubdate –This attribute indicates the date and possibly time when the page document or the article in which the time element appears was published. I don’t expect this will be a widely used attribute but we’ll have to see once this element gets implemented. An example of this attribute in use would be; Article published on <time pubdate=”pubdate”>2012-01-02</time>.

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 previous articles we created a common page structure with a header, navigation bar, left column, main content area, right column and footer. In this article we are not going to modify the basic layout. We are instead going to add new elements 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 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 examples 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” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html >

<head>

<title>HTML 5 Structure Elements: Specialty Elements</title>

</head>

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

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

<h1>HTML 5 Structure Elements</h1>

<h3>Specialty Elements</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>

  

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

</nav>

<p>

Left Column

</p>

</section>

<h2>My Main Content Section</h2>

The <details> and <summary> Elements

The details and summary elements are designed to work together. The purpose of the details element is to allow developers to hide text that may be relevant to a topic but not necessarily important. This allows developers greater control over what content initially appears to the viewer which is especially useful when there is a great deal of content and limited screen space.

Using these elements is fairly straight-forward. First, decide what content you intend to hide and include it within the details element tags. Next, place a summary element within the details element tags and enter the content that will always be displayed. The summary element will be rendered with an arrow or some other icon next to it indicating that it can be expanded. When the viewer clicks on the icon or the summary content, the content that is within the details element will be displayed, excluding the summary element content, of course, as it is always displayed.

Notice that you can still apply whatever style choices that you like to either the details or summary elements. Just keep in mind that whatever style you set in the details element is inherited by the summary element. This is a bit counterintuitive at first glance because the summary element is what is continually displayed, like a header of sorts. Just remember that the summary element resides within the details element.

If you want to view these elements at work in a browser be sure to take a look in Google Chrome as it is the only major browser to implement these elements so far.

<article>

<h3>Article on the <em>details</em> and <em>summary</em> Elements</h3>

<p>The <em>details</em> and <em>summary</em> elements are designed to work together.

The purpose of the <em>details</em> element is to allow developers to hide text

that may be relevant to a topic but not necessarily important. This allows

developers greater control over what content initially appears to the viewer

which is especially useful when there is a great deal of content and limited

screen space.<br />

<br />

Using these elements is fairly straight-forward. First, decide what content you

intend to hide and include it within the <em>details</em> element tags. Next,

place a <em>summary</em> element <span style=”text-decoration:underline;”>within</span> the <em>

details</em> element tags and enter the content that will always be displayed.

The <em>summary</em> element will be rendered with an arrow or some other icon

next to it indicating that it can be expanded. When the viewer clicks on the

icon or the <em>summary</em> content, the content that is within the <em>details</em>

element will be displayed, excluding the <em>summary</em> element content, of

course, as it is always displayed.<br />

<br />

View this example in Google Chrome as it is the only browser that has

implemented these elements so far:<br />

<br />

<details style=”color:Gray;”>

<summary style=”font-weight:bold; color:Black;”>Learn more about the <em>details</em> and <em>summary</em> elements…</summary>

The <em>details</em> element could potentially have different icons used to

indicate to the viewer that they can view/hide its content. Since Google Chrome

is the only browser to implement this element so far it will be interesting to

see if other browsers follow Chrome's lead. The <em>details</em> element also

has the <em>open</em> attribute which is used to indicate that the <em>details</em>

element content is to be shown. This can be useful in situations where the

viewer is coming from another page on your website and you want to initially

show them content that may be relevant based on the page they just came from.

</details>

</p>

</article>

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

The <wbr> Element

The wbr element is designed to give developers more control over how text breaks between lines. For example, let’s say you had an unusually long word that you are concerned will cause an odd line break, i.e. two lines of text that are oddly sized. In the markup example below we have illustrated the same sentence twice. The first example shows the sentence without using the wbr element. The second shows it with the wbr element. Notice how the text appears more evenly distributed in the second example. Be sure to view this example in any browser except Internet Explorer as it has not yet implemented wbr.

<article>

<h3>All About the <em>wbr</em> Element</h3>

<p>The <em>wbr</em> element (Word BReak opportunity) is designed to give developers more control over how text breaks

between lines. For example, let's say you had an unusually long word that you

are concerned will cause an odd line break, i.e. two lines of text that are

oddly sized. In the example below we have illustrated the same sentence twice.

The first example shows the sentence without using the <em>wbr</em> element. The second

shows it with the <em>wbr</em> element. Notice how the text appears more evenly

distributed in the second example. Be sure to view this example in any browser

except Internet Explorer as it has not yet implemented <em>wbr</em>.<br />

<br />

One of the most famous songs from the popular Disney movie <em>Mary Poppins</em> was <em>

supercalifragilisticexpialidocious</em> which was released in 1964.

<br />

One of the most famous songs from the

popular Disney movie <em>Mary Poppins</em> was <em>

supercalifragilistic<wbr>expialidocious</em> which was released in 1964.</p>

</article>

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

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 all of the articles, sections, etc. from our previous examples.

<article>

<h3>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 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%;” />

<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'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%;” />

<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

either 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's cool. See the <em>iframe</em> element in action below.</p>

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

</article>

</section>

<p>

Right Column

</p>

</section>

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

 | 

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

 | 

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

 | 

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

<br />

</footer>

</div>

</body>

</html>

Conclusion

Now, you may be wondering why we didn’t include some of the obvious elements like video and embed that can really affect your page structure and layout. The reason is that those elements and others like them are more complex and really need to be covered as topics unto themselves in order to do them justice.

The elements that are discussed in this article are some of the more obscure options. They each have a small niche purpose but are very useful when the need arises. However, since none of them have been implemented in all of the major browsers they are not quite ready for prime time.

We encourage you to download and look at this complete example in a browser (Chrome is the best choice) in order to get a real feel for how these elements work. As discussed, the elements each have a very specific purpose but they are elements that all developers should at least be aware of should the situation arise when these elements are applicable.

Download the HTML markup and images.

Happy coding!

Developing in HTML5 with the New Structure Elements: Specialty Elements

Popular Articles

How to Reload the Page

HTML5 Navigation: Using an Anchor Tag for Hypertext

How to Create Indents and Bullet Lists

Featured

Top Online Courses to Learn SEO

Sellzone Marketing Tool for Amazon Review

The Top Database Plugins for WordPress

The Revolutionary ES6 Rest and Spread Operators

Advertisers

Menu

Our Brands