December 5, 2024
new-features

New Features of HTML 5

HTML5 offers new elements/tags and attributes that provide more functionality, flexibility, and efficiency for Web development. This article explains what is new in HTML5 or what are the new features of HTML5? Summary:

  • What is HTML 5?
  • Example of HTML 5
  • HTML5 New Features
  • New HTML5 API’s
Hyper Text Markup Language

What is HTML 5?
HTML5 is a version of markup language for structuring and presenting content for the WWW or World Wide Web. The previous version of markup language HTML4 has worked well, but it has some limitations. The HTML developers made a plan to overcome the limitations and try to build the HTML5 based on the following principles:

  • For functionality plug-in for dependency should be less.
  • Whenever possible, scripting should be replaced with markup language.
  • Device independency.

Example of HTML 5
A sample example of HTML5 is given bellow:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Cybarlab</title>
    </head>
    <body>
        Welcome to cybarlab.com
    </body>
</html>

HTML5 New Features
HTML 5 added lot of new features. This new features allow developers to make their documents more easily understood by the search engines, remove the uses of browser plug-ins (such Flash or Silverlight). Some of the features are given bellow:

New Doctype and Charset
The DOCTYPE and character encoding (charset) declaration for HTML5 is very simple.
<!DOCTYPE html>
<meta charset=”UTF-8″>

New Structure
Generally web page have body content, sidebar content, navigation, headers, footers, and other features. And HTML 5 has created some tags to support those elements of the page.

  • <section>    -used to define sections of pages
  • <header>     -used to defines the header of a page
  • <footer>     -used to defines the footer of a page
  • <nav>         -used to defines the navigation on a page
  • <article>     -used to defines the article or main content on a page
  • <aside>     -used to defines extra content like a sidebar on a page
  • <figure>     -used to defines images that annotate an article

New Form Controls
HTML 5 support all the previous standard form controls, with some new. The new HTML 5 new controls are given bellow:

  • search        -used for search fields
  • time        -used to select a time
  • date        -used for input fields that should contain a date
  • datetime    -used to select a date and time with time zone
  • datetime-local    -used to select a date and time with no time zone
  • month        -used to select a month
  • week        -used to select a week
  • number        -used for input fields that should contain only a numerical data or value
  • range        -used for input fields that should contain a value between a range
  • email        -used for input fields that should contain a email or e-mail address
  • url        -used for input fields that should contain a web address or web URL
  • tel        -used for input fields that should contain a telephone number

New Graphic Elements
HTML 5 includes graphical elements to draw graphical shapes on the page.

  • <svg>         -used to define vector-based graphics(SVG means Scalable Vector Graphics).
  • <canvas>    -used to draw graphics, on the fly with the help of scripting. It has several methods for drawing paths, text, boxes, circles, and adding images.

New Multimedia Elements
HTML 5 includes some multimedia elements to perform multimedia operation. Now we don’t need to use third party plagin.

  • <audio>     -used to add audio on the  page
  • <video>.    -use to add video on the page

Make Content Editable
With the help of new attribute (contenteditable) that can be applied to elements, we can change the text on the page.
<ul contenteditable=”true”>

Autofocus Attribute
Without JavaScript a particular input should be “selected,” or focused, by default with the help of autofocus attribute
<input type=”text” name=”mytext” autofocus>

Required Attribute
We can set a particular input mandatory.
<input type=”text” name=”mytext” required>

Allow Regular Expressions
HTML 5 supports regular express on a particular control using new pattern attribute.
<input type=”text” name=”mytext” pattern=”[A-Za-z]{1,10}”>

New HTML5 API’s
HTML5 included some new API’s to make our works easy. Some common new HML 5 API’s (Application Programming Interfaces) are given bellow:

  • HTML Drag and Drop
  • HTML Geolocation
  • HTML Local Storage
  • HTML Web Workers
  • HTML Application Cache
  • HTML SSE

HTML 5 adds a lot of great new features. Web design will be exciting when more browsers support it.

Rashedul Alam

I am a software engineer/architect, technology enthusiast, technology coach, blogger, travel photographer. I like to share my knowledge and technical stuff with others.

View all posts by Rashedul Alam →

3 thoughts on “New Features of HTML 5

  1. It hot…. I like it. I think it will be helpful for web developer. If possible provide some information regarding CSS also.
    Thanks for such a good article.

    Somon

Leave a Reply

Your email address will not be published. Required fields are marked *