Demo Files

In 2014, the W3C released the final standardized version of HTML5, which had been in development and testing since 2004. The previous standard, HTML4, had been finalized in 1997. HTML5, along with many other improvements and new features for HTML, introduced semantic tags, including basic tags for the conventional sections of a website.  It also introduced new media tags for audio and video which allow embedding media into the page without using Quicktime or Flash.  Today, we’re going to go over the basic semantic tags, as well as demonstrating the uses of the audio and video tags.

Semantic tags

Definitions from Dive into HTML5

section –  represents a generic document or application section

nav – element represents a section of a page that links to other pages or to parts within the page: a section with navigation links

article  – element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable

aside  – element represents a section of a page that consists of content that is tangentially related to the content around the aside element

header – element represents a group of introductory or navigational aids

footer – element represents a footer for its nearest ancestor sectio.ning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like

In the demonstration today, we will create a new HTML page using these elements.

HTML5 Media

Video and audio files can be embedded using the following tags:

<video controls> 
  <source src="cat.mp4" type="video/mp4"> 
  <source src="cat.ogg" type="video/ogg"> 
  Your browser does not support HTML5 video : ( 
</video>

The controls attribute, which does not need a value, will add the default user interface to the element.  Other attributes include autoplay and loop.  See the rest of the video attributes.  The media elements accept different file types, which we’ll cover more next class when we talk about video editing.