5 Tips for Using HTML5 to Develop Your Website

5 TIps for Using HTML5 to Develop Your Website
HTML5 is the latest version of the HTML, or Hypertext Markup Language, that programmers and developers use to create documents on the Internet. It offers several enhanced features and tools that allow programmers to develop that awesome website effects that you see every day. The language is a just a set of rules that tell your browser how a page is supposed to be displayed. Today, HTML5 is supported by Safari, Google Chrome, Firefox 3.6 and later, Internet Explorer 10 and other modern browsers.

Before HTML5, HTML has been expanded, tweaked, and modified well beyond its initial purpose of displayed text information to accommodate today’s mobile applications, multimedia, and other high levels of interactivity. Technologies such as Flash and Java took up some of the slack but with high costs. To create a “better user experience” and battery life, mobile manufacturers such as Apple have decided not to support these tools leaving media sites inaccessible to these devices. HTML5 and its sibling technology CSS3 were design to mitigate this reduced functionality by streamlining some of the features of those extra add-ons. With HTML5 you won’t have to worry about not having the right browser plugin for your website.

If you are ready to take the plunge into HTML5 for your own website, here are 5 basic tips to get you started.

1. The HTML5 Doctype

The first tip is something all HTML5 pages need to have: the doctype. It may not seem like much, but people often forget to include it. The doctype tells the browser that the page is in HTML5. If you don’t have it, browsers may display the page wrong. The syntax is:

<!DOCTYPE HTML>

2. Overlaying Multiple Backgrounds

If you have several images you like to display together as your webpage’s background, you can do with HTML5’s enhanced background property. Just use the following or similar CSS3 code:

body {
background:
url(../images/bottom-left.png) top right fixed no-repeat,
url(../images/bottom-right.png) top left fixed no-repeat,
url(../images/top-left.png) bottom left fixed no-repeat,
url(../images/top-right.png) bottom right fixed no-repeat;
background-color:#ffffff;
}

3. Add Shadows to Your Webpages

HTML allows you to add shadows to your page elements such as images, form inputs and text. The effect can make your page look 3D or it can let you smoothly overlay one section over another. The choice is yours. The syntax couldn’t be any easier.

h1 {
text-shadow: 0px 1px 1px rgba(0,0,0,.2);
}

4. Add Captions to Your Pictures

Before HTML5, adding captions was a lesson in frustration. There was no way to associate the captions with the images. Now there is a way to combine the two with a few lines of code using the figure and figcaption tags.

<figure><img src="path/to/image" alt="About image" /><figcaption>This is an image of something interesting.</figcaption></figure>

5. Make Great Multimedia Websites with the Video and Audio Tags.

Before HTML5, you needed a plugin to do multimedia. You would then had to play around the object tag, the embed tags or some other frustrating method to get them to play with every browser your visitors use. Now, you don’t have to worry about that. HTML5 provides two easy to use tags for multimedia. Video handles all video files while audo handles your audio.

You may also like...

Leave a Reply