HTML5 introduced a few new tags to the markup language. Below is a partial list of these tags:
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 Newsh1> <p>The quick brown fox jumps over the lazy dogp> <aside> <h1>Side Noteh1> <p>Oh, by the wayp> aside> article>
These tags are examples of semantic markup, which was discussed in Part 1 of this series.
FIGURE AND FIGCAPTION
The sample below:
<figure> <img src="babelfish.png"> <figcaption> The mysterious babelfish figcaption> figure>
would render something like below:
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
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
We can identify the media source using the src attribute in the following example:
or we can identify multiple video sources by enclosing
<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.