Some ideas on new HTML features

Some cool features are introduced in HTML5 which help in better SEO and reducing dependency on external plugins.

  1. Tags like <header>, <nav>, <section>, <aside>, <footer> are introduced in html5. For example <header> tag is used to define header for a page or a section in a page. But it does not have any inbuilt CSS to make it look like a header. For example, it doesn’t make it center aligned. Earlier in previous versions of HTML the developer had to name a particular section for himself with id or class names. This made it very difficult to search engines to know what is what.

The purpose of these new elements is to let browser to know what a particular section is meant for and also help in SEO.

2. Javascript is used to add dynamic functionalities to a rather static html pages. When JavaScript is not present or disabled in the client’s browser some functionalities will not work. In this case we could use <noscript> tag to alert users about this.

<noscript> Javascript is disabled in your browser. Please enable it to use this website to its full potential! </noscript>

3. Declaring language attribute in html tag is helpful for screen readers and in SEO.

<html lang="en-US">

4. Using figure and figcaption tags:

<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption>
</figure>

Usage: to display images along with captions.

5. Only MP4, WebM, and Ogg video formats are supported by HTML5 and MP3, WAV, and Ogg audio formats are supported by HTML5.

6. HTML5 video tag usage:

<video width="320" height="240" autoplay controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Note:

  1. Controls: used to show play/Pause/Stop buttons
  2. Autoplay: plays the video on loading without requiring any user action.
  3. If the browser doesn’t support the video tag, the text is displayed.

7. HTML5 audio tag usage:

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

8. Object tag is used to embed plugins, images or even html files into the current html page.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s