Skip to content
Integrated Webworks
  • Close
  • home
  • about
  • solutions
    • web design & development
    • mobile app development
    • application development
    • online marketing
    • digital media
    • branding
  • work
  • clients
  • blog
  • contact
904.279.0279

the blog

catch up on the latest news

What’s New on the Web: HTML5

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:

HTML 5 Structure

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.
  • HTML 5 Search Feature

  • Tel
    You’ll notice in the example that the iPhone’s number keyboard is enabled when the field is clicked.
  • HTML 5 Telephone Number Feature

  • url
    You’ll notice in the example that the iPhone’s keyboard is enabled when the field is clicked.
  • HTML 5 URL Feature

  • Email
    This field will check for certain characters like an @ and a . to make sure the email address is valid.
  • HTML 5 Email Feature

  • 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.
  • HTML 5 Number Feature

  • Range
    This field brings up a new slider allowing you to select a certain range.
  • HTML 5 Range Feature

  • 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.
  • HTML 5 Placeholder Feature

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:

The Old Way to Load a Video

Now here’s the new HTML5 way.

The New HTML5 Way to Load a Video

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

May 14
Categories
  • Online Marketing
  • Technology
  • Web Design
  • Web Development

Post navigation

Previous Previous post: : Happy Holidays from your team at Integrated Webworks!
Next Next post: : Happy 4th of July from Everyone at Integrated Webworks
Integrated Webworks

We collaborate with ambitious brands and people,
let's reach new heights together.

  • home
  • about
  • solutions
  • work
  • clients
  • blog
  • contact

call us
904.279.0279

  • copyright © 2021 Integrated Webworks
  • terms & conditions
  • privacy policy