List of 25+ New tags introduced in HTML 5

Even though HTML 5 has not been a W3C recommendation yet, its is good to start understanding and working with it because it is the the Future of Web Designing and Development. HTML 5 has brought in some cool new features like embedding audio, video, graphics, client-side data storage, and interactive documents in the Web Pages. It is expected to bring Clarity and reduce development costs by making precise rules on how to handle all HTML elements, and how to recover from errors.

There have been quite a few new Tags which are being introduced in HTML 5 which were not present in the earlier versions of HTML. Also, about 15 tags have been removed from the list. Lets us know about the New Tags here:

<article> Tag

The tag defines external content. The external content could be a news-article from an external provider, or a text from a web log (blog), or a text from a forum, or any other content from an external source.

<aside> Tag

The tag defines some content aside from the content it is placed in. The aside content should be related to the surrounding content.

<audio> Tag

The tag defines sound, such as music or other audio streams.

<canvas> Tag

The <canvas> tag is used to display graphics. The <canvas> tag is only a container for graphics, you must use a script to actually paint graphics.

<command> Tag

The <command> tag defines a command button, like a radiobutton, a checkbox, or a button. The command element must be inside a menu element. If not, it will not be displayed.

<datalist> Tag

The <datalist> tag defines a list of options. Use this element together with the input element, to define which values the input element can have. The datalist and its options will not be displayed, it is only a list of legal input values. Use the input element’s list attribute to bind it together with a datalist.

<details> Tag

The <details> tag is used to describe details about a document, or parts of a document.

<embed> Tag

The <embed> tag defines embedded content, such as a plug-in.

<figcaption> Tag

The <figcaption> tag contains a caption for the “figure” element. The “figcaption” element should be placed as the first or the last child of the “figure” element.

<figure> Tag

The <figure> tag is used to group some elements. The content inside a figure element is stand-alone content, typically used to explain parts of a document, but also able to move from the document and put somewhere else.

<footer> Tag

The <footer> tag defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information.

<header> Tag

The <header> tag defines an introduction to the document.

<hgroup> Tag

The <hgroup> tag defines the heading of a section or a document. The hgroup element is used to group headers, <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings.

<keygen> Tag

The <keygen> tag defines a generated key.

<mark> Tag

The <mark> tag defines marked text. Use the <mark> tag if you want to highlight parts of your text.

<meter> Tag

The <meter> tag defines a measurement. Used only for measurements with a known minimum and maximum value.

<nav> Tag

The <nav> tag defines a section of navigation.

<output> Tag

The <output> tag defines different types of output, such as output written by a script.

<progress> Tag

The <progress> tag defines work-in-progress. Use the progress element to display the progress of a time consuming function in JavaScript.

<rp> Tag

The <rp> tag is used in ruby annotations, to define what to show browsers that do not support the ruby element. A ruby annotation is Chinese notes or characters. Used in East Asia, to show the pronunciation of East Asian characters.

<rt> Tag

The <rt> tag defines an explanation or pronunciation of characters (Chinese notes or characters). Used in East Asia, to show the pronunciation of East Asian characters.

<ruby> Tag

The <ruby> tag defines a ruby annotation (Chinese notes or characters). Used in East Asia, to show the pronunciation of East Asian characters. Use together with the <rt> and/or the <rp> tags:

The ruby element consists of one or more characters (that needs an explanation/pronunciation), and a rt element that gives that information, and optionally a rp element that defines what to show browsers that do not support the “ruby” tag.

<section> Tag

The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.

<source> Tag

The <source> tag defines media resources for media elements, such as <video> and <audio>.

<summary> Tag

The <summary> tag contains a header for the “details” element, which is used to describe details about a document, or parts of a document.

<time> Tag

The <time> tag defines a time or a date, or both.

<video> Tag

The <video> tag defines video, such as a movie clip or other video streams.

I would like to hear from you all, How do you think these latest Tags and Web-development and Designing practices are going to change the People who Design Web Pages?

  • http://www.techhamlet.com/ Pubudu Kodikara

    :D HTML 5 sure is a hit…. if im right , it can even replace flash right?

  • http://www.techfreakstuff.com Rohit Sane

    @Pubudu: Exactly! You can replace flash too…

  • http://agentdeepak.com/ Agent Deepak | Blogging. Marketing & Success

    When is this going mainstream?

  • http://forum.wedost.com/register/ Pankaj Gupta

    As you said that it is not a recommendation yet, Does it mean HTML5 is not yet launched or it is launched but these tags are under consideration?

  • http://www.techfreakstuff.com Rohit Sane

    @Deepak: No idea when it is going public.

    @Pankaj: Its launched but it is not for public use. You can use it privately Coz most browsers wont support it.

  • http://www.uprinting.com/ticket-printing-company.html Michelle | Event Tickets

    Wow, extra tags, might have some use for those. But I kind of hate html tags, hard for me to use them without a guide.

  • Victorina

    Good list. Yes HTML5 is said to be killer of Flash, let’s wait and see will it happen :D

  • http://www.techbusy.org/ abhi

    I have to update myself now. :)

  • http://www.techno-pulse.com/ Techno-Pulse

    HTML getting richer. It’s a good sign & will help the evolution of web

  • http://www.door2windows.com/ Kishan Bagaria

    Nice list. Easy to find the all the tag info on HTML5.

  • http://www.pricebonus.com/ Michelle

    Wow, extra tags, might have some use for those. But I kind of hate html tags, hard for me to use them without a guide.

  • http://mediadk.dk Tobias C. Jensen

    Good list! Looking forward to use some of these tags. However I believe that there are some unnecessary ones as well. I guess they are still in an experimental phase and some will be removed in the next version. Like what happened, when they created HTML4.01 and deprecated tags like <font> and <b>.
    I also think Flash is threathened – but the advantage of Flash is that you don’t need to code to do animation, and you will most likely have to with HTML5. So I think we need an application/interface that can write animation code for HTML5 for us.

    Just my 2 cents. :)

  • http://www.archigator.com/ TheArchitect

    Hmm, nice list. But HTML4 is good enough for me, because I just an ordinary blogger. I don’t know about technical things too much. :D

    Nice to see this blog.

  • http://www.bringbackjason.com/ Patrick

    Nice list. Easy to find the all the tag info on HTML5.

  • http://sixbytesunder.com Wojtek

    This is just ridiculous. There is far to many tags. HTML files will grow up ten times in size and we’ll never remember / know all those tags.
    Soon we’ll have tags for end of a sentence like . just to make sure the search engine knows we’ve ended our thought.

    Too many rules and regulations is never a good idea. Only a few will fully follow them.

  • http://www.whitehatandroid.com Shekhar Sahu

    this is a nice post. I’ll defenitely use them.
    firefox supports html5

  • http://webdevvote.com/WebDesign/List_of_New_Tags_introduced_in_HTML_5 WebDevVote.com

    You are voted!
    Track back from WebDevVote.com

  • http://www.pallab.net Pallab

    Awesome list. HTML5 is awesome. Unfortunately its going to take ages for the internet to migrate to HTML5 fully.

  • http://www.rajablog.com/ Ian

    Hmm, nice list. But HTML4 is good enough for me, because I just an ordinary blogger. I don’t know about technical things too much. :D

    Nice to see this blog.