Web Design with HTML and CSS

258

The <video>, <audio>, and <canvas> elements

Web Design with HTML and CSS Digital Classroom

Section and Article

Most of the new HTML elements designed for layout use are logical, but some are not as

intuitive as <nav>, for example, <section> and <article>. A section is a distinct and often

self-contained block of related content. It is similar to the practice of defi ning a div as main or

content:

<section id="smoothies">

<h1>Banana Smoothie Recipes</h1>

<p>The following list of banana smoothie recipes were collected from

our readers </p>

<h1>Facts about bananas</h1>

<p>Bananas contain lots of potassium and their peels are often used

for practical jokes </p>

</section>

An article is also a self-contained block of related content, but is used when the content could

exist independently of the web site:

<article>

<h1>Reviewing the Fruit-o-matic 10 speed blender</h1>

<p> We put the Fruit-o-matic through its paces in various

blending, ice-crushing, and puréeing tasks.</p>

</article>

The <article> element is useful because of its independent nature and the way people

currently access content on the web. You can publish an article on your web site, but using

technologies such as newsreaders and mobile devices, a user might have your latest articles

delivered to their device without visiting your web site.

The

One of the most publicized features of the HTML5 specifi cation is the inclusion of native

tags that allow you to add multimedia without the need for browser plugins. The <video>

and <audio> tags allow you to embed video and audio into your pages the same way you

would with the <img> tag. The <canvas> tag is designed to supply HTML with a native

drawing and animation format. This tag could provide an alternative platform for displaying

the type of graphics and animation most often found in Flash movies. As innovative as the

development of these new tags might be, there are signifi cant issues that must be addressed.

Embed media fi les using <video> and <audio> elements

The structure for embedding video and audio is simple. For example, the code for adding

video to your web page is similar to this:

<video src="catz.mp4" width="400" height="300"></video>