Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In HTML5 First Look, author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future. Exercise files accompany the course.
One of the most intriguing things about HTML5 is the addition of new elements that allow you to place new types of content directly into your pages, without requiring plug-ins or additional programs. Now, the concept isn't new. For example, we've been placing images into our pages for years through the use of the image tag. Let's take a look at the new types of content we can place in our pages through HTML5. First, I want to take a look at the figure element. Technically, you can list a figure element under sectioning content, but I want to discuss it here for what it allows us to do with illustrations or visual content.
As the specifications says, the figure element represents some flow content, optionally with a caption, that is self- contained and is typically referenced as a single unit from the main flow of the document. The element can thus be used to annotate illustrations, diagrams, photos, code listings, etcetera, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.
In many ways, you can look at a figure tag and the related fig caption element as a way of grouping or sectioning visual content related to the pages' overall content. With that in mind, I wanted to make sure I discuss the figure element in this movie so that you could see its relation to the new content elements. Next, I want to discuss the video element. By now, I'm sure you've heard at least some of the discussion around the video tag. The specification states that the video element is a media element whose media data is ostensibly video data, possibly with associated audio data.
Pretty short definition for something so monumental, wouldn't you agree? Well, rest assured, the specification goes into a fair amount of detail regarding the video element and how to use it, some of which we'll cover a little bit later on. The audio element is a media element whose media data is ostensibly audio data. As with video, there are numerous events, attributes, and elements that help control the playback, source, and any responses to the audio stream's current state. Now, here's an element that you may have seen before, the embed tag. You might say to yourself, "hey, that's not new!" Well, it is. Sort of.
You see, the embed tag is one of the last reminiscence of the early days of the web, when browser manufacturers created new tags to add capabilities to their browsers. If they caught on, chances were they would find their way into the HTML5 specifications. Hey, it worked for the image tag. Now, oddly enough, the embed tag never made it into any of the previous HTML or XHTML specifications, even though it has enjoyed widespread use and is recognized by all major browsers. Think of its inclusion here as sort of setting the record straight.
So what does it do? Well, according to the HTML5 specification, the embed element represents an integration point for an external, typically non-HTML application or interactive content. What does that mean? Well, the embed tag is widely used to insert plugging content like Flash into your web sites. Yes, folks, you can still embed Flash content in your pages even in HTML5, regardless of what you may have heard. Next up is the canvas element. What is canvas? Well, it's defined as, and I quote, "providing scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly." To that you might be saying, "what?" Well, the canvas API, which we'll talk more about later, allows you to import graphics, modify them, and draw directly on the page.
Of course to take advantage of those methods you first need to define a canvas area. You do that by specifying a canvas element, typically passing along a defined width and height as well. These new and not so new elements allow you to place different types of content directly into your applications or pages. Although the majority of them require the use of their associated APIs to control them, the basic syntax for placing elements on the page is thankfully quite simple.
There are currently no FAQs about HTML5 First Look.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.