10 Latest HTML5 Tags to Get Professional Skills

HTML5

HTML5 is the 5th revision of HTML standard, which was created in 2004, but deserved a particular attention only in 2010, after Steve Jobs’s speech on Flash. HTML5 aims to improve the World Wide Web language with support for the latest multimedia while keeping it easily readable and understood by computers and devices. What earlier was reached with the help of third-party applications, now is implemented within the HTML coding. In a word, HTML5 offers a number of new unique features aiming to change the way websites and users interact. Let’s revise the key tag innovations of HTML5 markup.

1. <video> tag

Thanks to HTML5, web users can forget about troublesome Flash plugin. The special <video> tag  lets webmasters to embed video without any add-ons from the user’s side. Have a look at the simplest code for HTML5 video:

<video src=”/myvideo.mp4″></video>

Or this code can look like this:

<video width=”640″ height=”480″ controls autoplay preload>

<source src=”myvideo.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>

<source src=”myvideo.webm” type=’video/webm; codecs=”vp8, vorbis”‘>

<source src=”myvideo.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>

<p>If you are reading this, it is because your browser does not support the HTML5 video element.</p></video>

As you can see here, HTML5 video requires three sources: H.264, OGG, WebM, since modern browsers haven’t agreed on the common HTML5 video format support. You may use Freemake Video Converter to convert your file to all those formats. The <video> tag also allows multiple attributes, such as autoplay, controls, preload, etc. Still you may easily omit them, as each browser offers default HTML5 video parameters. It’s also advisable to add Flash fallback for old IE browsers which are still majorly used worldwide.

2. <audio> tag

Similar to <video> tag, <audio> makes it possible to embed audio files “as-is”, without third-party software. HTML5 supports the following formats for audio files: MP3, OGG and WAV audio. The code looks like follows:

<audio src=”sound.mp3″ controls autoplay loop></audio>

Among parameters which you may add to the audio player there’s autoplay, loop, controls, preload. Flash fallback is also recommended:

<object type=”application/x-shockwave-flash” data=”media/OriginalMusicPlayer.swf” width=”225″ height=”86″>

<param name=”movie” value=”media/OriginalMusicPlayer.swf”/>

<param name=”FlashVars” value=”mediaPath=sound.mp3″ />

</object>

3. <canvas>

HTML5 introduces an interesting drawing tag called <canvas> which allows website owners to play around with user’s attention and create highly engaging content. This tag also lies in the basics of HTML5 game development. The main tool here is JavaScript. HTML5 Canvas is a very big subject, it is big enough for you write a book with. If you’d like learn more about it, have a look at W3 schools and these HTML5 Canvas tutorials.

4. <article>

The <article> tag specifies an independent content code. It’s the best HTML5 addition from a SEO point of view. Probably, search engines will put more weight on the text inside the <article> tag than to the contents on the other parts of the page. The <article> tag also makes the HTML code cleaner and reduces the need to use <div> tags. Just have a look:

<article>

<h1>Internet Explorer 9</h1>

<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011 at 21:00 PDT…..</p>

</article>

5. <section>

If a blog post was broken into several sections by subheaders, each section could be wrapped with a <section> tag. The key advantage is that each section can have its own HTML heading. As with the <article> tag, it can be presumed that search engines will pay more attention to the contents of separate sections. For instance, if the words of a search string are found in one section, this implies higher relevance as compared to when these words are found all across the page or in separate sections.

<article>

<h1>Welcome</h1>

<section><h4>What We Do</h4>

<p>We protect sharks…</p></section>

<section> <h4>News Items</h4>

<p>Man eats shark…</p></section>

<section><h4>Contact Us</h4>

<p>At the beach…</p></section>

</article>

6. <header>

The <header> tag specifies a header for a document, section, or article. It might contain navigation, branding or the document headline. The <header> tag is also beneficial for SEO. It’s very similar to the <H1> tag but the difference is that it can contain a lot of stuff, such as H1, H2, H3 elements, whole paragraphs of text, hard–coded links (and this is really precious for SEO), and any other kind of info you feel relevant to include.

<header>

<h1>Internet Explorer 9</h1>

<p><time pubdate datetime=”2011-03-15″></time></p>

</header>

There is also the <footer> tag which might not be as useful as the <header> one but still it allows to include important information and it can be used for SEO purposes as well. A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.

<footer>

  <p>Posted by: Bill Johnson</p>

  <p><time pubdate datetime=”2012-06-01″></time></p>

</footer>

7. <nav>

The <nav> tag is meant to enclose site navigation. This can be used anywhere: main site navigation, previous/next article links, or pagination. However, not all links of a document must be in a <nav> element. The <nav> element is intended only for major block of navigation links.

<nav>

  <a href=”/html/”>HTML</a> |

  <a href=”/html5/”>HTML5</a> |

  <a href=”/css/”>CSS</a> |

  <a href=”/css3/”>CSS3</a> |

  <a href=”/js/”>JavaScript</a>

</nav>

8. <button>

The <button> tag defines a clickable button. Inside a <button> element you can put content, like text or images and you can also apply JavaScript. Here is an example:

<button name=”aName”>ButtonText</button>

The tag can be defined with different attributes, see the full list here. Please note that the behavior of the interactive content displayed inside an HTML5 button element varies from browser to browser.

9. <cite>

The HTML5 <cite> tag is used to indicate a citation. Text enclosed in <cite> tags is intended to represent the title of a work (e.g. a book, paper, essay, song, script, video, game, theatre production, etc). Usually the text in a cite is rendered by the browser using an italic font style. It can be used by itself, or along with one of the quote tags <q> and <blockquote>:

According to <cite title=”HTML & XHTML: The Definitive Guide. Published by O’Reilly Media, Inc.; fifth edition (August 1, 2002)”>Chuck Musciano and Bill Kennedy</cite>, the HTML cite tag actually exists!

10. <aside>

The tag <aside> indicates the that is related to the surrounding content within an article or web page, but could still stand alone in its own right. In other words, it could be used on a website sidebar or within an <article> tag for special call-outs  (e.g. “did you know” call-outs).

<p>My family and I visited The Epcot center this summer.</p>

<aside>

  <h4>Epcot Center</h4>

  <p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

Author’s Bio

Elena Vakhomova is guest blogger and SMO specialist. She loves writing about free Windows and iOS apps and never misses the opportunity to spread the word about her favorite Freemake YouTube Converter.

Enjoyed this post?

Don't forget to subscribe to our RSS-feed and follow us on - for recent updates

About the Author


Name *

Mail (will not be published) *

Website (optional)

Your Comment *