The web is always growing and changing and people are constantly coming up with new ideas to help make things better both for the user and the developer. HTML5 and CSS3 are the newest changes to come to the web. There are a ton of new features that will make it easier on your users to both find and understand the content on your site. Some of these features add functionality like Video and Audio, some help with search engine optimization like the new structure tags, some help understanding like the new form tags and some just make the web look better like CSS3 drop shadows. In a series of articles we’ll go over these new functions and how they can help you and your visitors.
Lets take a look at HTML 5 first…
Page Structure
HTML5 introduces some new formatting tags to control the organization of a web page. This will help search engines and browsers understand the content of the page leading to higher search engine rankings for your site. These include the:
- < header >
Typically a headline or grouping of headlines, but may also contain other information about a section.
- < nav >
Defines the navigation or menu area, typically a list of links and should be contained in a section, header, or footer.
- < section >
A section is a group of content that is related and can be nested inside of each other to organize information.
- < article >
An individual entry in a blog, magazine, compendium, etc.
- < aside >
An aside indicates content that is tangentially related to the rest of the page.
- < footer >
The footer of a page typically containing information like copyright, who created or wrote the document, links to related documents, etc.
You can see how this new organizational framework would work in the chart below:
As you can see if it’s that much easier for a normal person to read, Google and Yahoo’s complex search engines should have an even easier time finding the appropriate content on a page.
Forms
HTML5 also added new functionality to forms. Most browsers do not support these functions yet, but we’ll show you on an Apple iPhone, Opera browser, and Safari browser how useful these new functions can be.
The new form functions include:
- Search
When you start to type in the search field a small X appears to let you clear the field.
- Tel
You’ll notice in the example that the iPhone’s number keyboard is enabled when the field is clicked.
- url
You’ll notice in the example that the iPhone’s keyboard is enabled when the field is clicked.
- Email
This field will check for certain characters like an @ and a . to make sure the email address is valid.
- datetime, date, month, week, time, and datetime-local
Depending on your options this will either show a date picker, or a field to select a time or a combination of the above.
- Number
This field only allows you to input a number or select the number by increments.
- Range
This field brings up a new slider allowing you to select a certain range.
- Color
This brings up your browsers color picker allowing you to select a color, but is not supported in any browser at this time.
In addition to these new fields there are also some improvements to how these fields work such as:
- Autofocus
This allows you to set which field you want the users cursor to appear in when they enter the page.
- Placeholder
This tag allows you to inset placeholder text into a field explaining what the field is for, when clicked this text then disspears.
Video and Audio
The < video > element is probably what most users are going to be excited about in HTML5 and as you probably figured out, it allows you to play a movie in your website. This tag can also contain images or audio associated with it in addition to video.
You may say, but I already have video on my website using flash! Well, that’s in the past now and to be honest, Flash is kind of clunky. First of all your users have to have a plugin to even see your flash video. To deal with the second, lets take a look at how the video is called into the page.
Here’s the old way:
Now here’s the new HTML5 way.
Not only is it easier to implement and much cleaner, but utilizing some of the options for video in HTML5 we can have a screenshot of the video appear and some text telling them where to download the video if their browser doesn’t support HTML5.
The HTML5 audio tag works in much the same way enabling sound on your website. Just think, you won’t have to worry about telling all your visitors to download multiple plug ins to see the content of your site. They’ll have everything they need already!
Coming Soon: CSS3’s new features
