HTML5 New Elements tutorials

Welcome to HTML5 New Elements tutorials blog, This blog is all about HTML5 new elements for better structure.

HTML5 new elements for better structure

1. <article> element: a straddles an article, which is intended to be an independently distributable document, like an article in a magazine.Here are this element’s attributes:

 
. accesskey
. class
. contenteditable
. contextmenu
. dir
. draggable
. hidden
. id
. lang
. spellcheck
. style
. tabindex
. title

e.g. Example 1

 
<!DOCTYPE HTML>
<html>
<body>
<article>
<header>
<h1>It’s going to rain</h1>
<p><time pubdate datetime=”2010-10-09T14:28-08:00”></time> </p>
</header>
<p>Current forecast is for bigtime rain.</p>
<section>
<h1>Comments</h1>
<article>
<footer>
<p>Posted by: Sam Budd</p>
<p><time pubdate datetime=”2010-10-10T19:10-08:00”>
</time></p>
</footer>
<p>We need the rain.</p>
</article>
</section>
</article>
</body>
</html>

2. <aside> element:The <aside> element represents an aside to the text, such as a sidebar. The text in an <aside> element is usually set
off from the main body of text. Here are the attributes of this element.

 
. accesskey
. class
. contenteditable
. contextmenu
. dir
. draggable
. hidden
. id
. lang
. spellcheck
. style
. tabindex
. title

3. For multimedia content, sounds, music or audio/ video streams.

<audio> : Supports multimedia content, sounds, music or other audio streams
<video> : Supports video content, such as a movie clip and video streams
<source>: Media resources for media elements, defined inside video or audio elements
<embed> : Embedded content, such as a plug-in
<track> : Text tracks used in mediaplayers

4. The <canvas> Element : The canvas element can be more useful with JavaScript to make drawings on a web page.
5. The <command> Element: The element can appear as a button, check box, or radio button.
e.g. command tag tutorial.

 
<menu type=”toolbar”>
<command type=”radio” radiogroup=”colors” checked=”checked” label=”Left” onclick=”red()”>
<command type=”radio” radiogroup=”colors” label=”Center” onclick=”blue()”>
<command type=”radio” radiogroup=”colors” label=”Right” onclick=”green()”>
<hr>
<command type=”command” disabled
label=”Publish” onclick=”publish()”>
</menu>

 

Share this nice post:

3 thoughts on “HTML5 New Elements tutorials

  1. Great article. I’ve enjoyed this contribution. Its nice to see every questions answered in a blog post like this. I will add this post on my blog and link to it. Thanks for a clear informative post, I’ve learned a lot. I hope to see videos though as I can be A.D.D and reading articles is not my favorite thing to do online. So what I do sometimes is just print the whole thing and read offline.

Comments are closed.