Design Shack — Web Design Gallery, Articles & Community

HTML5: New Elements (2 of 4)

by Joshua Johnson on 21st October 2009 with 9 Comments

A couple of days ago we posted an introduction to HTML5 and briefly covered some of the content we’ll be outlining in this series. Today’s post, which is the second in the series of four, will take a look at how to use six of the new elements in HTML5: canvas, article, audio, video, meter, and mark.

Keep in mind that HTML5 is not exactly ready for widespread use – so don’t go changing anything on your site quite yet. Be assured that HTML5 is in fact coming soon, therefore these concepts may prove useful in the near future.

The Canvas Element

The <canvas> element is a new container for graphics. Note that the canvas is merely that, an area where graphics can be placed. The <canvas> element should contain only two attributes: width and height. Here’s an example:

Comments & Discussion

9 Comments

Dylan Parry

Sorry but your usage of the article element is incorrect.

It is not for marking up references to external content. It is a block level element for writing a self-contained article, eg. a blog post, a news article, a story, etc. You would write the entire contents of said article within the element, using section elements to break it down if necessary.

For example, this blog post would contained within an article element, with section elements used to split the document into sections about the canvas element, the article element, the audio and video elements etc.

See http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element for more information on how you are supposed to use the article element.
Joshua Johnson

Hmmm… I was getting my information here:

http://www.w3schools.com/tags/html5_article.asp

“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.”
Dylan Parry

Ouch—it’s not unlike them to spread completely wrong information though! Best place to read about HTML5 (if you can handle all the technical jargon!) is straight from the horse’s mouth, ie. WHATWG or W3C.

Take anything you read on w3schools with a pinch of salt. They have nothing to do with W3C, and have been known to have inaccurate tutorials in the past.
Joshua Johnson

WHATWG definitely suggests that you are correct. It seems more in line with the other new elements like

if it is really just a new element to structure your own general content rather than merely something to refer to outside content. w3schools has let me down! I fact checked most everything one WHATWG but you’re right, it tends to get pretty technical so it’s easier to take w3schools at their word.
http://www.stikoo.co.uk Alastair Hodgson

Good Article

Think you might have missed out the tags from paragraph in the above example though.

Canvas looks very interesting, I can see it replacing flash in the future
http://www.linkedin.com/in/therealfrankanthony Frank Anthony

FYI for anyone who comes across this post late…

The article tag is for content on your site that could be distributed/syndicated
http://www.cheapleafletprinters.com Cheap Printing

Thing with html is it keeps evolving, i’m loving the latest releases.
http://replysmshindi.blogspot.com Reply SMS hindi

we’ll be looking at a few more new elements that represent some serious semantic changes in the structure of HTML files. APIs are defined using outfit to help the next generation of web applications, and ensure that standardized implementations.
http://www.mattscanvas.co.uk/ Canvas Prints

It’s hard to keep up with html when not working with it every day, so thanks for the detailed explanations I appreciate it.

Membership

About the Author