Test HTTP Requests Tools Blog Learn Quizzes Smile API Log In / Sign Up
Test HTTP Requests Tools Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated the website and our policies to make sure your privacy rights and security are respected.
Click here to learn more about the way our website handles your data.

Remove this message.

10 new and old HTML 5 tags you should consider using

Daniel Gheorghe Difficulty: 5 / 50 Tweet

This article is old. Be careful! It might contain outdated information.
Here's an alternate resource that I am recommending for this topic.

HTML5-Painted-On-Cute-Girl

HTML has come a long way from its inception back in Tim Berners-Lee mind in the late 1970's but its core standard of using tags within angled brackets hasn't changed much from its first, faltering steps. Indeed, with the World Wide Web Consortium (W3C) getting towards the final stages of standardizing HTML5 not far away, there are now many new elements that you can use to enhance your web constructions, and that includes many you probably didn't realize exist.

Web developers can't be accused of not enjoying innovation - they spend their days creating new and exciting ways of presenting information on web sites - but there is always more that you can do and eye-catching new ways of producing content, and HTML5 can help with that. But before you can use them, you really need to know what tags you've missed in the past, and below we present a series of the lesser known, but wholly excellent tags that can enhance your web development and turn good sites into eye-popping sites!

<Video>

Playing multimedia content is easy in HTML5 since it can use the <video> tag as a standard, allowing you to manipulate the content to utilize multiple codecs, so you will never struggle to get a video to play. An example of how this might be configured is:

    
        <video width="640" height="420" controls>
            <source src="filename.mp4" type="video/mp4">
            <source src="filename.ogg" type="video/ogg">
        </video>
    

Obviously, a similar set of tags can be used to format and play audio as well using the related configuration of the <audio> tag. This process gives the developer much greater control and flexibility with their development.

<Details>

The interactive nature of the web almost begs the use of collapsing and expanding text to show what a reader wants to see and to show more information if they are particularly interested in a heading. Using the <details> tag, you can stipulate which blocks of text remain hidden until the user clicks on a header. Using <details> couldn't be easier. You simply put the text you want normally hidden between <details> headers and footers, like so:

    
        <details>
            <summary>Hotel Alonso 2014.</summary>
            <p>All Rights Reserved.</p>
            <p>All content and graphics on the Hotel Alonso web site are the property of the company.</p>
        </details>
    

<Progress>

It used to be that a developer had to turn to a widget to demonstrate the advance of a process such as a particular task or a download taking place, but it's now taken care of for you with in HTML5 by using the <progress> tag. Typically there are two attributes associated with the tag - a value and a maximum value. The value is a floating number and becomes a percentage of the maximum, and is reported as such. Progress completes when the maximum value is reached. Typical usage might be:

    
        <progress max="100" value="58"></progress>
    

<Article>

Using the normal <nav> and <header> elements that you may be used to, you will not be able to vary content very much from page to page. Using the much more flexible

tag allows you to vary content to a much greater extent and allows for self-contained input. The <article> tag is highly adaptable, but may be used in the following way:

    
        <article>
            <h1>Google Chrome</h1>
            <p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
        </article>
    

This would make the content self-contained and independent. The <article> tag might be used in news stories, comments and blogs, ensuring that the content remains bespoke to the page rather than being repeated through the site.

<Figcaption>

Almost always used in conjunction with the <figure> tag, <figcaption> allows you attach a caption as necessary to a figure. For that reason, <figcapture> usually sits within a <figure> enclosure, and works as a discrete part of the overall code section. It may be used as:

    
        <figure>
            <img src="naked_nun.jpg" alt="The Naked Nun" width="420" height="640">
            <figcaption>Image 11. - A nun with no clothes on.</figcaption>
        </figure>
    

So <figcaption> becomes an important sub-feature of a normal figure or image and serves to identify that image.

<Datalist>

Behaving much like a combo box, the <datalist> tag but it allows users to input their own text. This makes it a very capable piece of code that used to require lines of JavaScript to perform the same function. An example of how this might be used is to allow a user to select a preferred color from a list:

    
        <div>Choose a color to display:</div>
        <input list="colors">
        <datalist id="colors">
            <option value="Blue">
            <option value="Red">
            <option value="Green">
            <option value="Silver">
        </datalist>
    

So a simple few lines of code can give the user options that are clear and easy to use.

<Mark>

Essentially a means of highlighting specific text based on a user's requirements, <mark>is an easy to use but very helpful tag. It can be inserted within a search mode to select and highlight specific terms that the user is searching for, making an enquiry much easier. The <mark> term may be inserted in code to act as a means of drawing attention to relevance. A <mark> tag may look like:

    
        <p>Do not forget to complete <mark>financial forecast</mark> today.</p>
    

This code would result in the term "financial forecast" being highlighted for the reader for easy identification.

<Meter>

This is a useful tag to measure a scalar figure within a known value range. It's useful because the measurement can be a huge array of different figure and present the information accordingly. Using it as per the code below... Would show a figure of 63%. That might be used as completion for an on-line survey or even a score in a related test. <Meter> if very flexible and can be used in all types of coding situations where you might want to show a score or percentage.

    
        <p>Site Completion: <meter value="0.63"></meter>63%</p>
    

Don't confuse this with the <progress> tag mentioned earlier; they do different things for you within code.

<Aside>

This is a useful tag that allows the developer to place additional information after a particular statement. For example, after telling the reader that Buckingham Palace is the official residence of the Queen, the <aside> tag may be used to announce that "Buckingham Palace is in London" which may be information that only some readers may find interesting. It may be used such as:

    
        <p>Buckingham Palace is the official residence of the Queen.</p>
        <aside>
            <h4>Buckingham Palace</h4>
            <p>Buckingham Palace is situated in central London.</p>
        </aside>
    

<Time>

This is a small but hugely useful tag that allows the developer to either show a specific time or some special date. Easy to use, the <time> tag may look as simple as:

    
        <p>This shop opens at <time>10:00</time> every morning.</p>
    

There are many new features to HTML5, of which these are just a few, but by working with these and others, you will start developing web pages that flow and present data in a clear and logical way. Go use them!

comments powered by Disqus