More HTML5 Semantics: New Elements and Features
We’ve introduced you to and expounded on some of the more practical new elements and features. In this section, let’s touch on lesser-known elements, attributes, and features that have been added to the HTML5 spec.
The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.
The details Element
This new element helps mark up a part of the document that’s hidden, but can be expanded to reveal additional information. The aim of the element is to provide native support for a feature common on the Web—a collapsible box that has a title, and more info or functionality hidden away.
Normally this kind of widget is created using a combination of HTML and JavaScript. The inclusion of it in HTML5 removes the scripting requirements and simplifies its implementation for web authors, thus contributing to decreased page load times.
Here’s how it might look when marked up:
<details>
<summary>Some Magazines of Note</summary>
<ul>
<li><cite>Bird Watcher's Digest</cite></li>
<li><cite>Rower's Weekly</cite></li>
<li><cite>Fishing Monthly</cite></li>
</ul>
</details>In the example, the contents of the summary element will appear to the user, but the rest of the content will be hidden. Upon clicking summary, the hidden content appears.
If details lacks a defined summary, the browser will define a default summary (for example, “Details”). If you want the hidden content to be visible by default, you can use the Boolean open attribute on the details element.
The summary element can be used only as a child of details, and it must be the first child if used.
As of this writing, details lacks complete browser support, but it’s improving. To fill the gaps, a couple of JavaScript-based polyfills are available, including a jQuery version by Mathias Bynens and a vanilla JavaScript version by Maksim Chemerisuk.
Ordered lists, marked up using the ol element, are quite common in web pages. HTML5 introduces a new Boolean attribute called reversed so that when present, it reverses the numbers on the list items, allowing you to display lists in descending order. Additionally, HTML5 has brought back the start attribute, deprecated in HTML4. The start attribute lets you specify with which number your list should begin.
Support is good for both reversed and start. As of this writing, Internet Explorer is the only browser without support for reverse-ordered lists. If you want a polyfill, you can use a script by one of the book’s authors.
Scoped Styles
In HTML5, the style element, used for embedding styles directly in your pages (as opposed to referencing a linked stylesheet), allows use of a Boolean attribute called scoped. Take the following code example:
<h1>Page Title</h1>
<article>
<style scoped>
h1 {
color: blue;
}
</style>
<h1>Article Title</h1>
<p>Article content.</p>
</article>
Because the scoped attribute is present, the styles declared inside the style element will apply only to the parent element and its children (if cascading rules permit), instead of the entire document. This allows specific sections inside documents (such as the article element in this example) to be easily portable along with their associated styles.
This is certainly a handy new feature, but it’s likely going to take some time for it to be implemented in all browsers. The only browser that currently supports scoped styles is Firefox. Chrome previously supported it, but it was removed due to “high code complexity.” And at the time of writing, the IE team has no immediate plans to add this feature.
The async Attribute for Scripts
The script element now allows the use of the async attribute, which is similar to the existing defer attribute. Using defer specifies that the browser should wait until the page’s markup is parsed before loading the script. The new async attribute allows you to specify that a script should load asynchronously. This means it should load as soon as it’s available, without causing other elements on the page to delay while it loads. Both defer and async are Boolean attributes.
These attributes must only be used when the script element defines an external file. For legacy browsers, you can include both async and defer to ensure that one or the other is used, if necessary. In practice, both attributes will have the effect of not pausing the browser’s rendering of the page while scripts are downloaded; however, async can often be more advantageous, as it will load the script in the background while other rendering tasks are taking place, and execute the script as soon as it’s available.
The async attribute is particularly useful if the script you’re loading has no other dependencies, and if it benefits the user experience for the script to be loaded as soon as possible, rather than after the page loads. It should also be noted, however, that if you have a page that loads multiple scripts, the defer attribute ensures that they’re loaded in the order in which they appear, while there’s no guaranteeing the order with async.
The picture element
One of the most recent additions to the HTML5 spec is the picture element, which is intended to help with responsive web design, specifically responsive images. picture lets you define multiple image sources. This allows users on mobile browsers to download a low-res version of the image, while offering a larger version for tablets and desktops.
The picture element has its accompanying source elements (which are also used for video and audio elements, as described in Chapter 5), in addition to some new attributes such as srcset and sizes. These two attributes can be used on picture, img, and source.
For a good discussion of the way these new features are used in responsive image implementations, see this excellent article by Eric Portis on A List Apart.
Other Notables
Here are some further new HTML5 features you’ll want to look at using, each with varying levels of browser support:
-
The dialog element, which represents “a part of an application that a user interacts with to perform a task; for example, a dialog box, inspector, or window.”
-
The download attribute for a elements, used to indicate that the targeted resource should be downloaded rather than navigated to (useful for PDFs, for example).
-
The sandbox and seamless attributes for iframe elements. sandbox lets you run an external page with restrictions and the seamless attribute integrates the iframe content more closely with the parent document, adopting its styles more seamlessly.
-
The menu element and its menuitem child elements, which allow you to create a list of interactive commands. For example, you can mark up an Edit menu with options for Copy, Cut, and Paste, adding scripting functionality as needed.
-
The address element, which lets you mark up contact information applying to the nearest article or body element.
There are other new elements not discussed here, simply because of lack of space. Be sure to check out the specs from time to time to see if anything new has been added or changed.
Ordered lists, marked up using the ol element, are quite common in web pages. HTML5 introduces a new Boolean attribute called reversed so that when present, it reverses the numbers on the list items, allowing you to display lists in descending order. Additionally, HTML5 has brought back the start attribute, deprecated in HTML4. The start attribute lets you specify with which number your list should begin.
Support is good for both reversed and start. As of this writing, Internet Explorer is the only browser without support for reverse-ordered lists. If you want a polyfill, you can use a script by one of the book’s authors.
Scoped Styles
In HTML5, the style element, used for embedding styles directly in your pages (as opposed to referencing a linked stylesheet), allows use of a Boolean attribute called scoped. Take the following code example:
<h1>Page Title</h1>
<article>
<style scoped>
h1 {
color: blue;
}
</style>
<h1>Article Title</h1>
<p>Article content.</p>
</article>Because the scoped attribute is present, the styles declared inside the style element will apply only to the parent element and its children (if cascading rules permit), instead of the entire document. This allows specific sections inside documents (such as the article element in this example) to be easily portable along with their associated styles.
This is certainly a handy new feature, but it’s likely going to take some time for it to be implemented in all browsers. The only browser that currently supports scoped styles is Firefox. Chrome previously supported it, but it was removed due to “high code complexity.” And at the time of writing, the IE team has no immediate plans to add this feature.
The async Attribute for Scripts
The script element now allows the use of the async attribute, which is similar to the existing defer attribute. Using defer specifies that the browser should wait until the page’s markup is parsed before loading the script. The new async attribute allows you to specify that a script should load asynchronously. This means it should load as soon as it’s available, without causing other elements on the page to delay while it loads. Both defer and async are Boolean attributes.
These attributes must only be used when the script element defines an external file. For legacy browsers, you can include both async and defer to ensure that one or the other is used, if necessary. In practice, both attributes will have the effect of not pausing the browser’s rendering of the page while scripts are downloaded; however, async can often be more advantageous, as it will load the script in the background while other rendering tasks are taking place, and execute the script as soon as it’s available.
The async attribute is particularly useful if the script you’re loading has no other dependencies, and if it benefits the user experience for the script to be loaded as soon as possible, rather than after the page loads. It should also be noted, however, that if you have a page that loads multiple scripts, the defer attribute ensures that they’re loaded in the order in which they appear, while there’s no guaranteeing the order with async.
The picture element
One of the most recent additions to the HTML5 spec is the picture element, which is intended to help with responsive web design, specifically responsive images. picture lets you define multiple image sources. This allows users on mobile browsers to download a low-res version of the image, while offering a larger version for tablets and desktops.
The picture element has its accompanying source elements (which are also used for video and audio elements, as described in Chapter 5), in addition to some new attributes such as srcset and sizes. These two attributes can be used on picture, img, and source.
For a good discussion of the way these new features are used in responsive image implementations, see this excellent article by Eric Portis on A List Apart.
Other Notables
Here are some further new HTML5 features you’ll want to look at using, each with varying levels of browser support:
-
The
dialogelement, which represents “a part of an application that a user interacts with to perform a task; for example, a dialog box, inspector, or window.” -
The
downloadattribute foraelements, used to indicate that the targeted resource should be downloaded rather than navigated to (useful for PDFs, for example). -
The
sandboxandseamlessattributes foriframeelements.sandboxlets you run an external page with restrictions and theseamlessattribute integrates theiframecontent more closely with the parent document, adopting its styles more seamlessly. -
The
menuelement and itsmenuitemchild elements, which allow you to create a list of interactive commands. For example, you can mark up an Edit menu with options for Copy, Cut, and Paste, adding scripting functionality as needed. -
The
addresselement, which lets you mark up contact information applying to the nearestarticleorbodyelement.
There are other new elements not discussed here, simply because of lack of space. Be sure to check out the specs from time to time to see if anything new has been added or changed.