Archive results for: HTML5

Semantic Elements

HTML5 provides semantic elements to hopefully somewhat replace the the humble <div> which is the cornerstone of nearly every modern web page. Using <div> elements, you can carve an HTML document into headers, side panels, navigation bars, and more.

This <div>-and-style technique is straightforward, powerful, and flexible, but it’s not transparent. That means when you look at someone else’s markup, it takes some effort to figure out what each <div> represents and how the whole page fits together. To make sense of it all, you need to jump back and forth among the markup, the style sheet, and the actual page in the browser.  And you’ll face this confusion every time you crack open anyone else’s halfway-sophisticated page, even though you’re probably using the same design techniques in your own websites.

HTML5’s new elements were created as a way to replace <div> with something better. Something that worked like <div>, but conveyed a bit more meaning. Something that might help separate the sidebars from the headers and the ad bars from the menus.

<HEADER> AND <FOOTER>

Almost every HTML document has a header and footer. The HTML5 specification recognizes this and includes two specific elements that you can use to semantically identify a header and footer. These elements are not restricted to one per document, however, and can be used to specify the header and footer areas of a particular section or article of a document.

The header element usually contains at least one h element:

The footer element is just as simple to use and requires no explanation:

The header element doesn’t have to appear at the top of the web document, just as the footer element doesn’t have to be placed at the bottom. You can actually place either wherever you want to. That said, it often makes sense to do so, just so the source of the document is easier to read.

<ARTICLE> AND <SECTION>

A section can have articles within it. Think of a news page; it might have a news section and, then within that, different news categories. You might have a heading of “News” and then all the different types of news, like a newspaper. In HTML4, you would wrap this in a div, but you can wrap this all in a section now. Each type of news would then be in its own section, with its own heading. If you think the content would make sense on its own, then it is an article.

<NAV>

The nav element is used to contain the primary navigation throughout your site. So any links to separate pages, such as About, News, and your blog, can be included here. It can also contain any links that are external to your site—that is, that take the user away from your site—for example, links to Twitter or Facebook accounts, as long as they constitute the primary navigation of your site.

The nav element is often contained within a header, although it doesn’t have to be. It can also be contained within a footer element, but only if it’s the primary navigation of your website.

<ASIDE>

The aside element is used to contain page non-main content that is relevant to the main content it sits next to, but the main content makes perfect sense on its own without it. The content of the aside element can also make sense on its own, although it doesn’t have to. A current, real-world use of the aside element is for sidebars, which of course can contain anything from widgets and social media feeds to related links and images.

Note how the aside element can also contain header and footer elements if they are appropriate.

<FIGURE> AND <FIGCAPTION> 

Two new elements were introduced to allow relating a multimedia element (image, video, or audio) to a specific caption, which of course makes the content contained within these new elements more semantic (there’s that word again!): the figure element and the figcaption element. The figcaption element can only exist within a figure element, although it doesn’t have to be there; obviously, not all content will have a caption:

Note: The hgroup element was removed from the HTML5 specification as of April 13, 2013: http://html5doctor.com/the-hgroup-element/

Use the HTML5 Doctor Element Flowchart to help determine which to use:

HTML5_flowchart

Reference: http://www.w3schools.com/html/html5_semantic_elements.asp


Video Playback

To learn more about HTML5 Video, you can take the HTML5 Video class

Not a day passes without us being told that video (and we’re not just talking about YouTube) is the future of the Web. If that is to be the case, particularly for the average user, we surely need an easy, reliable way of including video content without having to invest in expensive proprietary software.

HTML5 Video provides just that, directly in the browser with (at its minimum) a single line of markup.

Let’s take a look at how we’ve been adding video to our sites using the object tag in recent years. We’re sure you’ll all recognize YouTube’s embed code.

Pretty ugly, huh? Well, as you’ve probably already guessed, HTML5 not only helps us to be a little more semantic, but also makes adding video to our sites as easy as ABC (OK, almost as easy). The basic markup you need is:

By default, the browser doesn’t show any play controls; the user needs to open a context menu (right click or cmd+click) to play the video using this markup, which is not very intuitive. You’ll also see a small glitch when loading the page if you don’t explicitly set the width and height of the video while the browser calculates the dimensions. Also, the user doesn’t get a sneak peek of what they’re going to be watching. To remedy the situation, we’ll add the poster and controls attributes along with the dimensions.

The standard global attributes, along with poster and controls, aren’t the only attributes available, though.

The standard global attributes defined in HTML5 are:

  • autoplay: Tells the browser to start playing the video as soon as it is downloaded.
  • controls: Displays built-in controls that are native to the browser. Basic controls tend to include a play/pause button, time counter, volume control, and time scrubber.
  • crossorigin: Either allows or prohibits the sharing of a video across other domains.
  • height: Identifies the height of the video (if your height/width aren’t in the correct ratio, you will see black banding above and below the video; it will not distort).
  • loop: Tells the browser to loop the video after playback has been completed.
  • mediagroup: Allows multiple media elements to be linked together by creating a media controller. Therefore you can synchronize multiple videos or a video with audio.
  • muted: Allows the author to specify if the video should be muted when it begins to play.
  • poster: Identifies the location of a still image to use as a holding frame.
  • preload: Allows the author to inform the browser to start (or not start) downloading the video as soon as the page is loaded. preload has replaced the autobuffer attribute. The autoplay attribute can override the preload attribute if present.

  • src: Identifies the location of the video file.
  • width: Identifies the width of the video (if your height/width aren’t in the correct ratio, you will see black banding above and below the video; it will not distort).

Reference: http://www.w3schools.com/tags/tag_video.asp

Video Containers and Codecs

The file extensions .mp4, .avi, and .flv that we associate with video aren’t codecs themselves, but rather a container format. These containers tend to include multiple tracks, generally at least one for the video and one for the audio. The tracks are synchronized by markers contained in the audio track. There can be multiple audio tracks for different languages or tracks for subtitles. Containers can also have associated metadata that might include the title of the video or chapter points.

  • WebM: Based on the Matroska container format, it is designed to be used with the open source VP8 video codec and Vorbis audio codec. YouTube supports the WebM format making sure you  are using a compatible browser. Mozilla Firefox and Chrome play .webm.
  • Ogg: An open standard container format without any patent restrictions, it is maintained by the Xiph.Org Foundation. Ogg’s video codec is called Theora and the audio equivalent is Vorbis. Mozilla Firefox, Chrome, and Opera play .ogv.
  • MPEG-4: Based on Apple’s QuickTime container format MOV. It is associated with the file extensions .mp4 and .m4v. The downside to MPEG 4 is that it is patent encumbered, which may mean the user will have to pay royalties starting in 2016. MPEG 4 uses the H.264 video codec. Safari, Chrome and IE 9/10 play .mp4.

Adding video source

source allows us to specify multiple alternative videos for our media elementst. It is an invisible element, which means that nothing is rendered by the browser to indicate its presence visually in the document.

If you don’t add the type attribute to the source element, the browser will download a small part of each file before realizing the codec is unsupported. Therefore, you should ensure that the type attribute is always included for each video source.

The browser will play the first video that is in a format it understands. If a browser doesn’t understand the type of video, it will simply skip to the next source element until it finds one it does understand.

The order of the source elements is equally important: MP4 must come first because on older iPads it only looks at the first source element (now resolved). WebM is placed second due to that fact that its quality is higher than that of Ogg, thus ensuring Opera 10.6+ and Firefox 4+ will play the WebM file rather than the Ogg; Ogg is placed third to support Opera 10.5 and Firefox 3.5/3.6.

As time passes (or perhaps even now if you’re so inclined), it’s likely we won’t have to encode our videos with Ogg, as newer versions of browsers that currently use it will also support the higher-quality WebM.

Enter our old friend Flash

In this instance our trusty old friend Mr. Flash helps us to support older versions of Internet Explorer (IE 8 and older). There are a number of Flash video players available, so which one you use is up to you. This example uses the non-commercial version of JW Player . The default code that it provides after linking the script follows:

By combining the Flash object with our earlier example, we end up with an accessible, cross-browser, native solution.

Reference: State of HTML5 Video

JavaScript API and Custom Controls

HTML5 video provide a lot of functionality out of the box, but it doesn’t stop there. HTML5 also provides a wonderfully easy-to-use Media JavaScript API that you can use to extend that basic functionality in other ways. Aan excellent use of the JavaScript API is to roll out your own multimedia controls. You can style them however you like using CSS, and then hook them up via the API to control your video.

Here is a list (.pdf) of the attributes and events of each multimedia element of the API.

There’ll come a time when you’ll need to do more with your video, whether it’s creating custom controls that are on brand or adding fast forward and rewind buttons.

We’ll add custom play and pause buttons as well as a seek for forwarding and sound slider our video.

Firstly, we need to reference our <video> element:

Then our custom buttons:

The Play button will toggle to Pause when clicked:

We will have a button to mute the sound:

Then we need code to reference the current time duration of the video:

Then, we can add a button for showing the video fullscreen:

Here is an example of the demo.


Form Validation

HTML5 web forms have introduced new form elements, input types, attributes, and other features. Many of these features we’ve been using in our interfaces for years: form validation, combo boxes, placeholder text, and the like. The difference is that where before we had to resort to JavaScript to create these behaviors, they’re now available directly in the browser; all you need to do is set an attribute in your markup to make them available.

HTML5 Form Attributes

Browsers that support these HTML5 attributes will compare data entered by the user against regular expression patterns provided by the developer (you). Then they check to see if all required fields are indeed filled out, enable multiple values if allowed, and so on. Even better, including these attributes won’t harm older browsers; they’ll simply ignore the attributes they don’t understand.

In fact, you can use these attributes and their values to power your scripting fallbacks, instead of hard-coding validation patterns into your JavaScript code, or adding superfluous classes to your markup.

The required Attribute

The Boolean required attribute tells the browser to only submit the form if the field in question is filled out correctly. Obviously, this means that the field can’t be left empty, but it also means that, depending on other attributes or the field’s type, only certain types of values will be accepted.

If a required field is empty or invalid, the form will fail to submit, and focus will move to the first invalid form element. Opera, Firefox, and Chrome provide the user with error messages; for example, “Please fill out this field” or “You have to specify a value” if left empty, and “Please enter an email address” or “xyz is not in the format this page requires” when the data type or pattern is wrong.

The required attribute can be set on any input type except button, range, color, and hidden, all of which generally have a default value. The syntax is either simply required, or required=”required”.

The autofocus Attribute 

The Boolean autofocus attribute specifies that a form control should be focused as soon as the page loads. Only one form element can have autofocus in a given page.

HTML5 New Form Input Types

HTML5 gives us input types that provide for more data-specific UI elements and native data validation. HTML5 has a total of 13 new input types: search, email, url, tel, datetime, date, month, week, time, datetime-local, number, range and color.

Email Address

The email type (type=”email”) is, unsurprisingly, used for specifying one or more email addresses. It supports the Boolean multiple attribute, allowing for multiple, comma-separated email addresses.

When you focus on the email field, the iPhone, iPad, and iPod will all display a keyboard optimized for email entry (with a shortcut key for the @ symbol). Firefox, Chrome, and Opera also provide error messaging for email inputs: if you try to submit a form with content unrecognizable as one or more email addresses, the browser will tell you what is wrong.

Styling Required Form Fields

You can style required form elements with the :required pseudo-class. You can also style valid or invalid fields with the :valid and :invalid pseudo-classes.With these pseudo-classes and a little CSS magic, you can provide visual cues to sighted users indicating which fields are required, and also give feedback for successful data entry:

 

HTML5_Validation1

Older browsers mightn’t support the :required pseudo-class, but you can still provide targeted styles using the attribute selector:

Fallback using Modernizr

Now as discussed in a previous post explaining how we can use Mondernizr to detect browser support of HTML5 CSS3 capabilities, we can add code to this example for older browsers:

 

Here is a working demo example.


Handling IE 7 & 8

IE7 and 8 (yes, they are still around), by default, do not recognize the most HTML5 elements. To have these older versions of IE recognize all HTML5  elements, you can programmatically create them through JavaScript as part of the DOM and then style them accordingly, as in this example:

Of course, doing that for every single new HTML5 element would be a little tedious, and chances are that you would miss something.

Luckily, you can use something called HTML5Shiv (http://code.google.com/p/html5shiv), written by Remy Sharp, which includes all the new elements and another bit of JavaScript called IE Print Protector, which helps IE display HTML5 elements correctly. The “shiv” is designed to allow versions prior to IE9 to recognize the HTML5 elements and allow them to be styled using CSS.

Even though the script has conditional code within, so it runs only in IE, you might as well wrap it in a conditional comment of your own so only IE 8 and older download and run the code. This script must go in the head tag and before style sheet calls. It is up to you if you prefer to serve the html5shiv file locally or link directly to the http://googlecode.com-hosted file.

Having the file locally will prevent both “resource not found” from any remote access issues and breakages due to future modifications to the JavaScript file.

Reference: http://www.paulirish.com/2011/the-history-of-the-html5-shiv/

Making CSS Compatible

Now that you can make IE support new HTML5 elements, you need to make it play nice with CSS. Most modern browsers know how to handle the new elements by default and without any styling; however, to make sure IE plays nice, you need to set your new elements to display: block.

If you use a CSS reset, you could include the code above, or there are various CSS resets currently available that include the HTML5 fixes:

 Polyfilling

Being able to detect what HTML5 features are supported, is only half the battle. Ultimately the goal is to be able to support the HTML5 functionality in the various browsers and versions of browsers that your users use to visit the web applications and sites you create. To allow for browsers that do not support a specific HTML5 functionality, you would need to use a third-party library that includes code for the various browsers to have the same functionality. The code or library of code that allows the feature to be supported on browsers is called a polyfill or polyfiller.

An example of a polyfiller could be a library that provides canvas support for Internet Explorer since Internet Explorer does not support the canvas element directly but has its own drawing functionality such as Silverlight. You want to be able to develop with the new APIs and still offer the same experience to browsers that do not support them natively. We have seen examples of using a JavaScript library such as jQuery to plug some of the gaps, but there is no one library that will fix everything.

Reference: http://html5please.com/#polyfill


Page 2 of 212