HTML5: New Elements (2 of 4)

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.

2 Million+ Digital Assets, With Unlimited Downloads

Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.

Graphic Templates

Graphic Templates

Logos, Print & Mockups
 CMS Templates

CMS Templates

Shopify, Tumblr & More
 Web Templates

Web Templates

Landing Pages & Email
 Presentation Templates

Presentation Templates

PowerPoint & Keynote
 Fonts

Fonts

Sans Serif, Script & More
 Graphics

Graphics

Icons, Vectors & More

Explore Envato Elements

The Canvas Element

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

<html>
	<head>
		<script src="testscript.js" type="text/javascript">
	</head>

	<body onload="draw();">
		<canvas id="graphicsCanvas" width="600" height="600">
	</body>
</html>

The actual drawing for this example is done in JavaScript. The key to implementing the graphics in your script is to reference a context through the method getContext. For now the only context you can call is “2d”. Think of the 2d context as your actual drawing plane (defined by the HTML canvas size) beginning at coordinates 0,0 (the very top left of the screen). To draw an item, you first decide at what coordinates the item will begin. For example, if you want to draw something that’s ten pixels in from the left and ten pixels in from the top, your coordinates are (10,10).

There are a number of ways to use the 2d context to create graphics. Everything from simple rectangles to curves and gradients are supported. For our purposes, we’ll keep it simple just to get you started. Here’s the JavaScript, implementing the principles outlined above:

   function draw() {
      var canvas = document.getElementById("graphicsCanvas");
      if (canvas.getContext) {
        var context = canvas.getContext("2d");

        context.fillStyle = "rgb(50,50,50)";
        context.fillRect (20, 20, 150, 150);
        context.strokeRect (20, 20, 300, 300);
      }
    }

If you’re using a supported browser (Safari, Firefox, or Opera) you should see the following result when you combine the HTML and JavaScript we just looked at.

screenshot

Again, before you do any drawing remember to implement the 2d context or you won’t see any graphics at all! Just in case you’re wondering what the heck this “fillRect” rubbish is about, here’s a quick explanation of the syntax for a few of the drawing methods.

Drawing Rectangles

First of all, you should know that when you see four numbers in the format (0,0,0,0), this represents (distance from the left, distance from the top, width, height). Now let’s look at a few specific syntax examples:
fillStyle = “rgb(50, 50, 50); Determines the color of the fill
fillRect (20, 20, 150, 150); Creates a simple filled rectangle
strokeRect (20, 20, 150, 150); Creates a stroked rectangle
clearRect (20, 20, 150, 150); Creates a transparent area (a hole)

Drawing Shapes

beginPath (); Starts a path
closePath (); Closes a path
moveTo (20, 20,); Lifts drawing pen and starts in a new location
fill (); Fills the drawn shape
stroke (20, 20); Strokes the drawn shape

Much More!

For much more information on how to draw with JavaScript and how to use the canvas element, check out Mozilla’s tutorial.
Also, here’s a handy Canvas Cheat Sheet from Jacob Seidelin.

The Article Element

The article element is simply a way to refer to a blog post, news article, etc. within your page. Here’s the syntax:

<article>
	<p><a href="http://articleLinkHere>
	 Article Title Here

	 Article </p>
</article>

As you can imagine, this will make it super easy to target and style articles in your CSS without defining a class.

The Audio and Video Elements

Like the article element, these are simply containers that hold content. Again you can see the benefit immediately when you start to style these with CSS without the need of any custom classes. Here’s the simple syntax for each (any text placed between the brackets only shows up in unsupported browsers):

<video src="http://videoSourceHere">Unsupported browser!></video>

<audio src="sample.mp3">Unsupported browser!</audio>

Audio Attributes

Both the audio and video elements contain important attributes that you should know. First let’s look at those for the audio element (source: w3shcools).

autoplay (true or false)
If true, then the audio will start playing as soon as it is ready

controls (true or false)
If true, the user is shown some controls, such as a play button.

start (numeric value)
Defines where in the audio stream the player should start playing.
As default, the audio starts playing at the beginning.

end (numeric value)
Defines where in the audio stream the player should stop playing.
As default, the audio is played to the end.

height (pixels)
Sets the height of the video player

width (pixels)
Sets the width of the video player

loopend (numeric value)
Defines where in the audio stream the loop should stop,
 before jumping to the start of the loop. Default is the end
attribute's values.

loopstart (numeric value)
Defines where in the audio stream the loop should start.
Default is the start attribute's values

playcount (numeric value)
Defines how many times the audio clip should be played.
Default is 1.

poster (url)
The URL of an image to show before the video is ready

src (url)
The URL of the audio to play[/code]

Video Attributes

The video element contains all the same attributes as the audio element as well as 3 more (source: w3shcools).

height (pixels)
Sets the height of the video player

width (pixels)
Sets the width of the video player

poster (url)
The URL of an image to show before the video is ready[/code]



The Meter Element

The meter element can be used to contain measurements of any kind (percentage, score, day counter, etc.). This time, before we look at an example, let's go straight into the attributes (again, straight from w3shcools).

high (number)
Defines at which point the measurement's value is consider a high value

low (number)
Defines at which point the measurement's value is consider a low value

max (number)
Defines the maximum value. Default value is 1

min (number)
Defines the minimum value. Default value is 0

optimum (number)
Defines what measurement's value is the best value.
If this value is higher then the "high" attribute's value,
it means that the higher value the better. If this value is
lower than the "low" attribute's value, it means that the
lower value the better.

value (number)
Defines the measurement's value[/code]
The two specially important attributes in this set are max and min. The meter element can only be used when the measurement has a known maximum and minimum value. That doesn't necessarily mean you have to define a max and a min (you could use the default), just that you have to be aware of what they are. Here's an example:

You found 25 out of 50 or 50% of the hidden words!
[/code]
Notice that for the first meter element required specification of the min and max because the range was between 0 and 50. However, the second meter used the default range of 1-100 because percentages usually fall in this range.

The Mark Element

The final element we'll take a look at is . Simple in concept, the mark element can be used to highlight a specific section of text to make it more noticeable to the reader. Here's an example:

<p>A good highlighter is hard to find.</p>


Now we can use the mark tag to easily target the section we want to highlight in our CSS:


mark {
	background-color: yellow;
	font-weight: bold;
}


The result is nice, highlighted text that you can spot in an instant.


Conclusion


In summary, we covered six brand new elements from HTML5. First we looked at the canvas element, which is a container for a wide variety of graphical items that you can create using a number of JavaScript functions. Then we learned about the article element, which represents a new way to refer to external content. Next we outlined how to use the audio and video tags along with their various attributes as well as how to properly tag values falling within a specified range using the meter element. Finally, we discovered how to highlight a specific portion of text using the mark element.


I hope you've learned as much reading this as I did writing it! Use the comments below to ask any questions you might have or share your own bit of HTML5 knowledge. The next article in this series is perhaps the most important because we'll be looking at a few more new elements that represent some serious semantic changes in the structure of HTML files. So check back soon to see how you'll be laying out your HTML for years to come!