# Thursday, 05 December 2013

HTML5 introduced a few new tags to the markup language. Below is a partial list of these tags:

  • article
  • aside
  • audio
  • canvas
  • command
  • datalist
  • details
  • embed
  • figure
  • figcaption
  • footer
  • header
  • hgroup
  • keygen
  • mark
  • meter
  • nav
  • output
  • progress
  • rp
  • rt
  • section
  • source
  • summary
  • time
  • video
  • wbr

Let’s look at a few of these new tags.

FOOTER, HEADER, ARTICLE, and ASIDE

The Footer, Header, Article, and Aside tags do not affect the page rendering. Instead, they are used to organize the content of a page, making it clear which parts belong together.

The Header and Footer tags should contain summary information about the page and the site. These typically belong at the top and bottom of a page, but you will need to add styling to make this happen.

The Article tag is for a blog or newspaper-style site that contains multiple, distinct stories or articles. Enclose each story with the Article tag to distinguish it from other stories on the page. Within each article, you can specify a quote from that article or HTML that relates to that article. Do so by surrounding this HTML with the Aside tag. An example is shown below.

<article>
    <h1>Breaking News</h1>
    <p>The quick brown fox jumps over the lazy dog</p>
    <aside>
        <h1>Side Note</h1>
        <p>Oh, by the way</p>
    </aside>
</article> 

These tags are examples of semantic markup, which was discussed in Part 1 of this series.

FIGURE AND FIGCAPTION

The <figure> tag is designed to enclose a picture, diagram, code-listing, or other content that stands apart from the body of a document.

The <figcaption> tag is contained within a <figure> tag and contains a caption to describe that figure. There should be at most one figcaption for each figure.

The sample below:

<figure> 
    <img src="babelfish.png"> 
    <figcaption> 
        The mysterious babelfish
    </figcaption> 
</figure> 

would render something like below:

image 

WBR

When a browser is resized or when a web page is viewed at different resolutions, by default, the text on the page wraps to accommodate the new boundaries. Sometimes, this wrapping can make the text look awkward, particular when a long word is involved. The <wbr> tag can help this by splitting a word at the appropriate point.

The <wbr> tag should be inserted in the middle of a long word to indicate where it should be broken, in case it needs to move to a new line.

VIDEO AND AUDIO

In the past, the only way to render multimedia in a browser was to use a plug-in, such as Flash or Silverlight. With HTML5, we now have the <audio> and <video> tags to play multimedia files natively, without the need for an external plug-in.

We can identify the media source using the src attribute in the following example:

<video src=”MyVideo.avi> 

or we can identify multiple video sources by enclosing <source> tags within an <audio> or <video> tag, as in this example:

<video>
    <source src="yyy.mp4" />
    <source src="yyy.ogv" />
    <source src="yyy.webm" />
 </video> 

Supplying multiple media formats is advised if you want your media file to play on multiple platforms. Since there is no universal audio or video format for all platforms, it’s a good idea to encode your multimedia files into different formats for different clients. The browser will try each format in order until it finds a supported one.

Some other useful attributes of the audio and video tags are

  • controls - When present, this attribute adds a set of controls on the page, allowing the user to start, pause, and change volume. This attribute needs no value.
  • loop - When present, this attribute causes the media file to replay after it finishes. This attribute needs no value.
HTML5 | Web