This is my final post about the new tags in HTML5. There are still more Project HTML5 posts to come, but this concludes the 'new tags' series.
Here are all of my previous Project HTML5 posts if you haven't read them already:
- Getting ready for HTML5
- Getting ready for HTML5- New tags, part one
- Getting ready for HTML5- The video tag...
- Getting ready for HTML5- New tags, part two
- Getting ready for HTML5- Browser support
So obviously, I haven't described all of the new features of HTML5, but I'm mentioning the new tags I find the most exciting. You can look forward to a post coming up about the tags in HTML4 that have been dropped in 5, which is very useful if you're trying to convert your pages to the new HTML5 standard. I'm definitely going to have to get out of my ugly habit of using the <center> tag, that's for sure!
Okay, the last new HTML5 tags I believe that are worth mentioning-
The new <mark> tag is like applying a highlighter to some of your prose text. For reference purposes, and possibly to get the reader's attention, you want those words to stand out. For example:
<p>My name is Kim Crawley, and I'm a freelance web designer. I can make a <mark style="background-color:#EC47FF;">beautiful, professional looking, custom website</mark> for you or your small business.</p>
I'm assuming that CSS3 will have some options for stylizing the way you want <mark> to display.
I've already gone into detail about the new <video> and <audio> tags, so I must describe the new <source> tag, too. Most web designers know that visitors don't always have the right codecs available for their browser to use some types of audio or video files. Some people might not even have codecs for popular media formats available in their browser. Someone might have codecs for .wma files, but not for .mp3s, for instance. If you are wise when integrating different media in your web design, you may have different file format versions of the same content. You can make use of that sort of preparation this way:
Here's some proof that my mother is a horrible singer:<br><br>
<audio height="30" width="150" align="right" autoplay><source src="http://www.kimcrawley.com/mymothershorriblesinger.wma" type="audio/x-ms-wma"><source src="http://www.kimcrawley.com/mymotherisahorriblesinger.mp3" type="audio/mpeg">Your browser doesn't support HTML5.</audio>
So, the <source> tag doesn't need a closing tag, but it must be between <audio> and </audio> or <video> and </video>. As I mentioned in previous posts, any text between <audio> and </audio> or <video> and </video> will display in browsers that don't support the tag, but won't display in browsers that do.
And the very last new HTML5 tag that I'll mention is the <nav> tag. If your webpage's navigational links are rendered as text or images as opposed to JavaScript or Flash, this is a useful new tag to enclose your navigational links in. Your browser may find this useful. I'm thinking it may allow be useful with web bots, because it will know, for instance, not to display that data in your Google listing.
So, the new <nav> tag may be used like this:
<nav><a href="http://www.kimcrawley.com/links.html">Links</a>|<a href="http://www.kimcrawley.com/portfolio.html">Portfolio</a>|<a href="http://www.kimcrawley.com/aboutme.html">About Me</a></nav>
There are no attributes for the <nav> tag, but a closing </nav> tag must be used.
Next in my Project HTML5 series, I'll mention some of the tags from earlier versions of HTML (and possibly some from XHTML) that have been dropped.
kimcrawley.com
twitter.com/kim_crawley
No comments:
Post a Comment