The HTML5 Diaries – Part 1 – Semantic Markup, Forms, Media and SVG

This blog post will cover the topics discussed in the first module in the Microsoft HTML5, CSS3 and JavaScript video training course for the 70-480 exam. If you have no idea what’s going on, click here to have a look at the first post in this blog series which discusses setting up a development environment, registering for the exam and the online training content. Then, watch the video lessons for first module of the course, which is delivered by the charming and charismatic duo of Jeremy Foster and Michael Palermo.

Once you’ve gotten round to doing the courses, you might benefit from reading my course notes that are below. Most of the content below is gleamed from watching the lessons and making notes, and also from third-party resources that I like, such as dev.opera and the W3C Consortium. If you have any issues with the content or want to make a correction, please drop me an email or leave me a comment in the box below.

Semantic Tags

And thus, we begin. So… Semantic tags. What are they? Semantic tags are a new feature of HTML 5 that allow you to structure your code in a manner that represents how your site will actually look and are the first topic covered in this module. So, what do they do? They basically formalize design patterns. So, what does that actually mean?

Let’s think of a fairly popular website. How about BBC News? It has a navigation bar. It has articles. It has content within those articles which is kinda, but not really related to the actual content. It has structure. And most web pages are a bit like that. They have some form of structure and layout.

Semantic tags allow you to describe that structure and the content of your web page. And for the most part, they’re fairly easy to grasp.

Element

Level

Purpose

Article

Block

Independent content, such as blog posts and articles.

Aside

Block

Content that’s slightly related to main content

Figure

Block

This groups standalone content. The example given in the W3C documentation groups a video and a figcaption (I’ll get to those in a minute).

FigCaption

Text

This captions a figure element. Fairly self explanatory.

Footer

Block

This will go at the bottom of your page and will contain cool stuff like copyright information and author attribution.

Header

Block

Introductory headings or navigational aids.

Hgroup

Block

Groups a set of heading elements from <h1> to <h6>.

Nav

Block

For site level navigation.

Mark

Text

Text to be referenced or highlighted

Section

Block

Grouping of content with a heading. Sorta similar to chapters.

Time

Text

Represents date and time.

Semantic tags are generally a good idea, because they allow you to cleanly express the types of content of your page without actually having to look at any content. And they’re useful. Learn them.

Before you go any further, you might want to have a look at the W3C specification for HTML5. It’s a little bit dry for some tastes, but it’s incredibly thorough and detailed and covers extensively semantic markup. It’s also worth noting that the venerable Smashing Magazine has a rather good article about semantic tags, written by none other than the legendary Bruce Lawson. Have a read.

Forms

Forms have seen a massive overhaul in HTML5, and are discussed extensively in module one of the 70-480 training course. So, what’s new? Well, you can do cool stuff like this now.

[sourcecode]<form>
<input type=”text” required />
</form> [/sourcecode]

Yep, you saw that right. In a deviation from previous versions of  HTML, there’s an attribute (“required”) that is just floating out there.Does it make you feel a bit uncomfortable? Well, you can always do this.

[sourcecode]<input type=”text” required=”required” /> [/sourcecode]

What about if you want to have a placeholder in the input box? That’s simple.

[sourcecode] <input type=”text” required placeholder=”example@example.com” /> [/sourcecode]

Now, let’s look at some really cool stuff. Suppose you want to have a box where people can leave their phone number?

[sourcecode]<input type=”tel” pattern=”\d\d\d-\d\d\d\d\” /> [/sourcecode]

See what I did there? I also specified the input to have a type of “tel”. That’s basically for phone numbers. There are other input types, such as “email” and “url”, and they’re fairly obvious. Inayaili de León wrote a good blog post about using the latest features of HTML5 in making your web forms. You might find it useful.

You’ll also notice that in the “pattern” attribute, I wrote a regular expression which all input will be validated against. And you can customize your regex based upon the input that will be submitted.  Speaking of which, you can read all about the different things you can throw at a HTML5 form right here.

One other thing about Regex. Yes, it’s hard. No, it’s not particularly fun. But it’s important. Zed Shaw has a rather good book called Learn Regex The Hard Way. It’s free. Have a look. You might also want to have a look at this blog post by Staffan Noteberg.

Music and Video

HTML5 is kinda cool in the respect that it does multimedia very, very well. You can embed an MP3 with just a single line of code, and it just works. You no longer have to deal with Flash, or Shockwave, or Quicktime, or any other ghastly framework from the late 90’s that refuses to die.

Want to embed an MP3? Simple.

[sourcecode]<audio src=”yourmp3.mp3” controls> </audio>[/sourcecode]

That’s fairly self-explanatory, and ideal if you’re embedding within a HTML5 desktop or mobile app, like a Metro, Phonegap or Blackberry 10 application. If you’ve developing for the web, you might want to do something like this.

[sourcecode]<audio controls>
<source src=”source.ogg” />
<source src=”source.mp3” />
Your Browser Doesn't Support HTML5 Audio. Get with the times man!
</audio>[/sourcecode]

Why is that example ideal for a web application? So, you’ll probably notice that there are two audio sources there. That’s because different browsers support different codecs. If you use just one file format, you might see yourself running into a few cross-browser compatibility issues. Although, if you’re developing an application for Metro, you’ll likely be safe with just MP3/MP4. Embedding video is more of the same. You can insert it into your application like so.

[sourcecode]<video src=”video.mp4” controls ></videos>[/sourcecode]

And if you’re embedding video in a website, you can use…

[sourcecode]<video loop autoplay muted controls>
<source src=”video.webm”/>
<source src=”video.mp4”/>
Oh noes! Your browser doesn't support HTML5 Video.
</video>[/sourcecode]

Notice how I passed some parameters in the opening video tag? I won’t insult your intelligence by explaining what they do. That said, you probably should know what they do. You can find out more by having a butchers over here.

Also note that the file types of the video in thetags. Webm video is used extensively by Google Chrome, Opera and Firefox, whereas MP4 is used by most other browsers. If you want your video to work nicely cross-platform, it’s probably a good idea to use a variety of file formats.

Canvas

Canvas is fairly cool. What does it do? Well, the clue is in the name. Like a painter’s canvas, you can draw shapes. Except with Canvas, you do it programatically. With JavaScript! Yay! You could probably write a really, really long book about Canvas if you wanted to (and, let’s face it, someone probably has). But I don’t want to do that. To be honest, I’d rather just write a really short example and explain what’s happening, and then point you in the direction of some further reading. So, let’s get started.

[sourcecode]<canvas id=”testcanvas” width=”200” height=”200”>
</canvas>[/sourcecode]

So, here you’re creating a Canvas with an id of “testcanvas” (don’t forget to give it an ID. It’s important. Also, remember that it’s case-sensitive), a width of 200 and a height of 200. Fairly simple stuff. Now, here’s where it gets tricky.

[sourcecode]
<script>
var tstcnvs = document.getElementById(“testcanvas”);
var ctx = tstcnvs.getContext(“2d”);
ctx.fillstyle = “rgb(0, 0, 255)”;
ctx.fillrect(10, 10, 180, 180);
</script>
[/sourcecode]

Line one declares a variable called “tstcnvs”, which refers back to the canvas you created before. Line two declares a variable called “ctx” which then calls getContext which returns all sorts of fun methods to create geometric shapes and stuff and tells it that you’re dealing with 2d shapes. Line three then says that you’re going to colour your shape blue. Line four paints the rectangle by calling the fillrect method. It passes four parameters to this method. The first is the X coordinate. The second is the Y coordinate. The third is the height. The fourth is the width.

That was nothing more than a cursory glance at Canvas. But it’s an integral part of HTML5 and you should definitely look into it further. The Mozilla Developer Network is a good resource and they have heaps of stuff about Canvas, amongst other things. Opera has some good documentation regarding it too!

SVG

The last part of this write-up covers SVG. Scalable Vector Graphics basically allow you to create computer graphics, but with XML. Yep, you heard that right. Using XML to create graphics. There are some instances where you might want to use SVG over Canvas. There are some circumstances where you’ll want to use neither, as plain old HTML/CSS will do the job.

With that said though, I’m not really going to go into SVG that much. It’s only briefly mentioned in the online tutorial and it’s a fairly huge topic. Instead, I’m going to talk about where you’ll use SVG over Canvas, and vice versa and where you should not use SVG. I’ll also talk about where you can learn more about using SVG to make graphics.

Here’s what Opera (the guys who make the web browser that’s really popular in Belarus) have to say about the ideal use cases of Canvas and SVG.

You should use Canvas for:

  • Interactive image editing: cropping, resizing, filters (think red eye removal, sepia, colorize, etc.)
  • Generating raster graphics: data visualizations, data plots, rendering fractals, function plots.
  • Image analysis: read pixels to gather data for histograms, color usage, and anything else you can imagine.
  • Rendering game graphics, such as sprites and backgrounds.

You should use SVG for:

  • Resolution-independent Web application user interfaces.
  • Highly interactive animated user interfaces.
  • Data charts and plots.
  • Vector image editing.”

Some research has shown that Canvas scales better than SVG and generally renders a bit faster. It’s also worth noting that it’s generally not a good idea to use SVG to do stuff that you can do with CSS, such as page layout and rounded borders. For some further reading, have a look at this MSDN blog post.

Being able to create graphics with SVG is without a doubt a good skill to have under your belt, and odds are good it’ll come up on the 70 – 480 exam so you might want to brush up on it. A cursory glance on Amazon suggests that there are a good few tomes on the subject. In the meantime, have a look on MDN and dev.opera for more information.

Fin

And that’s that. If you have any comments or feedback, please leave it in the comment box below. The next post will be about CSS3 Selectors and Style Properties.

About Matthew Hughes

Matthew Hughes is a software developer, student and freelance writer from Liverpool, England. He is seldom found without a cup of strong black coffee in his hand and absolutely adores his Macbook Pro and his camera. You should follow him at @matthewhughes.

4 comments

Leave a Reply