Main HTML5 Specific Elements

So far we have only really learned about general HTML tags and elements, now it’s time to get into some HTML5 specific elements.

As you may notice when you start to work with HTML and build some of your own web pages, it would be really helpful if there was a logical way to define the header and footer of our web page. With HTML5, we can just that with the header and footer tags!

Header & Footer

The header element defines a header for our html document. We could also have multiple headers in our html document, to define headers for different parts of our html.

The footer element defines a footer for our html document, just as we can with the header element we can also have multiple footer elements within our html document; defining footers for different parts of our html.

Along with these new header and footer elements, there is also a few more important elements that
have been introduced with HTML5.

Nav

We can now define a navigational element with the nav tag:

As you can tell, we would use this element to hold our main ‘navigational’ content.

Section, Article & Aside

Section:
We can now define a ‘section’ of our HTML document. However, do keep in mind that the content of a section should be related.

Article:
We can now define an ‘article’ within our HTML document. Within a section, we could have several articles.

Aside:
We can now define an ‘aside’; a part of our HTML content, that is ‘aside’ from our main content, but is still related.

Video

One of the greatest features of HTML5 is the ability to implement a fully featured Video with Controls.

We start out with the opening Video tag, passing in a height & width and the controls attribute, so the video player will have controls.

Next we need to actually add the Video to the src attribute of the source tag. Again this can be an absolute or relative URL.

Along with our actual video source, we need to tell the browser the mime-type.

A mime-type basically lets the browser know what kind of format or media type to expect.

To provide a similar cross-browser experience you will need to supply multiple formats, contained within separate source tags.

Here we have the video Element set to 640x480px with controls displayed, some fallback text (to display some text in a browser that doesn’t Support the video element) and two sources; each of a different format and mime-type.

        <video controls="controls" width="640" height="480">
            
            
            Fallback Text
        </video>

Audio

We are going to end this Tutorial on a Strong note!

As you have just learned about HTML5 Video, HTML5 Audio isn’t going to be all that difficult to grasp. HTML5 audio isn’t all that different from HTML5 Video (apart from the fact that it’s audio and not video).

With the audio element, we do not need to set the size, but it is ALWAYS good practise to use the controls attribute So your users can actually operate the Audio Player.

Just as we can have multiple sources in our video element, we do the same thing with our audio element; passing in audio files and appropriate mime-types.

        <audio controls="controls">
            
            
            Fallback Text
        </audio>

I hope you found this resource useful!