html1

HTML5 New Features you must know

The term HTML5 should be familiar by a lot of people, since a lot of media talking about this emarging markup language However, did you exactly know what are the new Features offer by HTML5?? Here I am going to sum up the Top 15 new features of HTML5 you must know.

1. New Docype

Currently a lot of web-page is using XHTML 1.0 doctype and would declare the doctype on the first line like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

In HTML5, the above declare is no longer valid. The declaration of HTML5 doctype as follow:

<!DOCTYPE html>

2. No more Types for Scripts and Links

In HTML4 or XHTML, you would use the following lines to add CSS and JavaScript files in your web page.

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

However, in HTML5, this is no longer necessary to specified the type attribute already. Hence, the code can be simplified as following:

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

3. The Semantic Header and Footer

In coding HTML4 or XHTML, you would probably use the following codes to declare “Header” and “Footer ” sections in your web page.

<div id="header">
...
</div>
..........
<div id="footer">
...
</div>

In HTML5, there are two elements available which can replace the above markup and make the code more semantic.

<header>
...
</header>
<footer>
...
</footer>

4. hgroup

In HTML5, there are numbers of new elements introduced. And “hgroup” is one of those. Imagine, I had my site name and immediately followed by a subheading. And we can use <h1> and <h2> tag respectively to create the markup. However, this markup did not illustrate the relationship between the two. Moreover, the use of an h2 tag presents more problems, in terms of hierarchy, when it comes to displaying other headings on the page.

In HTML5, we can group these headings together by using hgroup element which would not affect the flow of the document’s outline.

<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>

5. Mark Element

Think of the <mark> element as a highlighter. A string wrapped within this tag should be relevant to the current actions of the user. For example, if I searched for “Open your Mind” on some blog, I could then utilize some JavaScript to wrap each occurrence of this string within <mark> tags.

<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

6. Figure Element

In HTML4 or XHTML, the following makeup would be used for image with captions.

<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>

However, the aboove mark up did not provide a semantic way to associate the captiona and image iteself. Hence, HTML5 introduced the <figure> element. When combined it with <figcaption> element, we can now semantically associate captions with their image counterparts.

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

7. Small Element redefined

In HTML4 or XHTML, <small> element already exist. However, there is not a well defined description on how to use this element properly. In HTML5, <small> element being redefined to small print. Imagine a copyright statement in the footer of your site; according to the new HTML5 definition of this element; the <small> would be the correct wrapper for this information.

8. Placehoders

Imagine in HTML4 or XHTML, you may use JavaScript to create placeholer for textbox. Like, you can initially set the value attriute with a pre-defined message and add some JavaScript to make the pre-defined message disapper as soon as the user input some value.

However, in HTML5, there is new attribute ” placeholder” introduced to simplified this action.

<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />

9. Required Attribute

A new attribute “required” introduced in HTML5 which specifies whether a paricular input is required. And there are two ways to declare this attribute

<input type="text" name="someInput" required>
<input type="text" name="someInput" required="required">

When the textbox with required specified, the form cannot be submitted if it is blank. And here is a example to illustrate on how to use it which also added placeholder attribute as well.

<form method="post" action="">
<label for="someInput"> Your Name: </label>
<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
<button type="submit">Go</button>
</form>

On the above example, if the input is blank and the form is submitted, the textbox will be highlighted.

10. Autofocus Attribute

Again, HTML5 removes the need for JavaScript solutions. If a particular input should be “selected,” or focused, by default, we can now utilize the autofocus attribute.

<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

11. Audio Support

Currently, to render audio, we need to rely on third party plugins. However, in HTML5, <audio> elements being introduced.

<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
</audio>

Please be reminder to include two audio file format when using <audio> element . Since Firefox will want to see an .ogg file, while Webkit browsers will work just fine with .mp3 extension. Also, IE doesn’t support this as usual and Opera 10 and lower can only work with .wav files.

12. Video Support

As <audio> element being introduced, <video> element also introduced in HTML5. However, <video> has a similar case as <audio> element which HTML5 didn’t specified a specific codes for video and it’s left to the browsers to decide. Safari and Internet Explorer 9 support video in he H.264 format while Firefox and Opera are sticking with open source Theora and Vorbis formats. Hence, you have to offer both format when specified HTML5 video.

<video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>

13. Preload attribute in Vidoes element

In <video> element, the preload attriute which specifed the HTML5 video to preload when user visit the page. To enable preload function, simply add preload=”preload” or preload on video element.

<video preload>

14. Display Controls

If you’re working along with each of these tips and techniques, you might have noticed that, with the code above, the video above appears to be only an image, without any controls. To render these play controls, we must specify the controls attribute within the video element.

<video preload controls>

15. Regular Expressions

In HTML4 or XHTML, if you want to validate a particular textbox value, you have to work it with JavaScript by using regular expressions. However, in HTML5, a new attribute “pattern” added which allow regular expression directly insert into your markup.

<form action="" method="post">
<label for="username">Create a Username: </label>
<input type="text"
name="username"
id="username"
placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}"
autofocus
required>
<button type="submit">Go </button>
</form>

To Conclude

Actually there are more elements and feature are being introduced. The above just highlighted those I think it is much common to adopt in web development. And here is the completed list of new elements added in HTML5 for your reference.

New Semantic/Structural Elements

HTML5 offers new elements for better structure:

Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<command> Defines a command button that a user can invoke
<details> Defines additional details that the user can view or hide
<summary> Defines a visible heading for a <details> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section
<header> Specifies an introduction, or a group of navigation elements for a document
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<ruby> Defines a ruby annotation (for East Asian typography)
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<rp> Defines what to show in browsers that do not support ruby annotations
<section> Defines a section in a document
<time> Defines a date/time
<wbr> Defines a possible line-break

New Media Elements

HTML5 offers new elements for media content:

Tag Description
<audio> Defines sound content
<video> Defines a video or movie
<source> Defines multiple media resources for <video> and <audio>
<embed> Defines a container for an external application or interactive content (a plug-in)
<track> Defines text tracks for <video> and <audio>

The new <canvas> Element

Tag Description
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

New Form Elements

HTML5 offers new form elements, for more functionality:

Tag Description
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

Remove Elements

The following HTML 4.01 elements are removed from HTML5

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>
  • <u>

Related Posts


11 thoughts on “HTML5 New Features you must know

  1. copeland blog

    I thought it was going to be several uninteresting aged post, but it surely paid for for my time. Let me post a hyperlink for this site in my weblog. More than likely this site guests will see that very useful.

    Reply
  2. erdani

    Thank you for some other informative web site. The place else may just I get that kind of information written in such an ideal approach? I have a mission that I am simply now running on, and I have been at the glance out for such info.

    Reply
  3. Mitchell Kersey

    I simply want to tell you that I’m new to weblog and seriously savored this web page. More than likely I’m want to bookmark your blog . You actually have exceptional articles. With thanks for revealing your web site.

    Reply
  4. A-Linie Brautkleider

    Online shopping, I like’s a I Purchase of high quality wedding, your content, I really like post.

    Reply
  5. Marquerite Mckitrick

    Nice post. I be taught one thing tougher on different blogs everyday. It can all the time be stimulating to learn content material from different writers and apply a little one thing from their store. I’d prefer to make use of some with the content on my blog whether you don’t mind. Natually I’ll give you a hyperlink on your web blog. Thanks for sharing.

    Reply
  6. Senuke X discount

    Wonderful work! This is the kind of information that are supposed to be shared across the internet. Shame on the search engines for no longer positioning this post higher! Come on over and consult with my site . Thanks =)

    Reply
  7. sacs louis vuitton

    Thanks for your post. I also believe that laptop computers are getting to be more and more popular right now, and now are usually the only kind of computer used in a household. It is because at the same time potentially they are becoming more and more reasonably priced, their computing power is growing to the point where they’re as highly effective as desktop computers out of just a few years ago.

    Reply
  8. livraison pizza

    I do trust all the ideas you’ve offered on your post. They are really convincing and will certainly work. Still, the posts are very quick for beginners. Could you please lengthen them a bit from next time? Thanks for the post.

    Reply
  9. magia sztuczki

    It is actually a nice and helpful piece of info. I’m satisfied that you just shared this helpful information with us. Please stay us up to date like this. Thank you for sharing.

    Reply

Leave a Reply

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


*