The Building Blocks of Pages

Page Structure and Extra Markup Identifying with ids Styling with Classes Grouping with Divs Sectioning with Spans Building a Page (Step-by-Step) TODO

Iframes

The 3-Part iframe Element 1. The <iframe> Tags 2. Source 3. Width and Height Review: The iframe Element Websites in the iframe Element Maps in the iframe Element Media in the iframe Element TODO

The Meta Element

The Meta Element Character Set Attribute Description Attribute Author Attribute Keywords Attribute Viewport Element Review: Meta Elements TODO

Escape Characters

Solving Conflicts with Escape Characters Escape Character Names Escape Character Codes Common Escape Characters TODO

Media Management

Media on the Web Sourcing Images Sourcing Video Sourcing Audio Optimizing for the Web Media Hosting and Storage TODO

Video

Adding Video in HTML The 5-Part Video Element 1. The <video> Tags 2. Source 3. Poster 4. Width and Height 5. Other Attributes Review: The Video Element Formats and Browser Support TODO

Audio

Adding Audio in HTML The 3-Part Audio Element 1. The <audio> Tags 2. Source 3. Other Attributes Review: The Audio Element Formats and Browser Support TODO

Formats and Browser Support

As with many HTML5 elements including the <video> and <audio> elements, not all browsers support the same format. Therefore, even with HTML5 you need to provide your files in multiple formats.

Video Formats

Required self-hosted video formats:

H.264 (likely MP4): IE and Safari
WebM or OGG Video: Android, Chrome, Firefox, Opera

We use the <source> element inside the multi-source <video> element to specify the video source. This would be used in-place of the src="" attribute in the single-source video element.

“Not Supported!”

You should include a paragraph element “fallback” that will be displayed if the browser does not support the video element or the format of video used. The browser will display whatever is between the opening and closing video tags.

Note Any written content placed between the <video> will display should the video not load in the browser. You should always include some descriptive text of the video (just like with images), so users know what element they are missing out on.

HTML

<video src="#" poster="#" width="" height="" preload controls>
  <p>A quick description of the movie...</p>
  <p>Sorry, your browser does not support the video tag.</p>
</video>