Hello, If you haven’t already then you may want to read my previous post that highlights some popular HTML5 tags. Link to that post is http://jaspreetchahal.org/html5-new-elements-to-define-page-layout/This post is continuation to the previous post and we will touch base on a few more elements and I will tell you which element are no longer part of HTML5 before we jump onto other topics. Ok so lets first of check which elements made their way out
- is gone, Instead use
- is gone, Instead use
- is gone, Instead use CSS styling
is gone, Instead use CSS style text-align:center - ,
and were a nuisance and they are dead now, even though you still can use iFrame - Old fashioned way to set text font is gone, instead use CSS styles
is gone, instead use CSS style text-decoration:strikethrough or- , are dead too. Use CSS styles instead
If you know any other element that are gone please let me know, so that I can update above list. Ok so now that we know that above mentioned elements are gone, so it makes more sense not to use them anymore. let's go ahead and check elements like details, time, address, mark, progressbar and meter To know better lets do another web page that will explain their usage.
The problem: create profile page showing way to use details, time, address, mark, progressbar and meter element
Alright lets build a simple profile page that will show usage of above mentioned tags, We will use them in context.
Here is an example with Demo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<body class="container"> <header> <img alt="Jaspreet Chahals Blog" src="/images/logo.png" /> <hgroup> <h1><a href="#">Jaspreet Chahals Profile</a></h1> </hgroup> </header> <address> North of Melbourne <br> 3086 Victoria <br> Australia </address> <article class="clearfix"> <header> <h1>Enrolment</h1> <p>Last updated: <time datetime="2012-10-19">19<sup>th</sup> October 2012</time>, Next update: <mark>pending</mark></p> </header> <h3>Course details</h3> <section> <details> <summary>Click here to check out the details</summary> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </details> </section> <h2>Progress</h2> <progress value="3" max="10" style="border: 1px solid;">30% there</progress> <h2>Drive quota used (30%)</h2> <meter max="6" value="2">2 of 6 GB</meter> </article> <aside> <h2>Site wide navigation</h2> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Meet the team</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li></ul> </nav> </aside> <footer class="clearfix"> <small>© Copyright JaspreetChahal.org</small> </footer> </body> |
Here is a demo for above code.
Demo
Try it in Chrome, Firefox, Safari or IE10
http://jaspreetchahal.org/examples/html5/html5-new-elements-example-2.html
A bit explanation on new tags
- details
Well! this is such a powerful addition, at the time of writing only Chrome supportstag. Ask yourself a question, how many time in your web programming career you used javascript to show hide some details.? Many times! should be your answer. This new element takes care of that. Load the demo in Chrome and you will see exactly what I mean. - summary
The summary element goes hand in hand with details element and show summary of whats hidden by details element. I used it in our example as a message to user as you can see from our example. - time
- address
is more or less again there to give semantic meaning for a section. This element represents contact information. - mark
mark is used to highlight some text to get attention of user or for references purposes. Basically it indicates a highlight. - progressbar
nor supported in IE9 or below progress bar represent progress of an action. e.g. If you are uploading a file you can use progress bar to show user status of their upload in percentage, bytes left of total, bytes sent of total etc. In our example we used it to show my course progress. possible attributes are
1. value
2. max
Currently supported in all major browsers including IE10 - meter
element represents a scalar measurement. In our example we used it to represent "Drive quota". A max value should be know and the current value should be within minimum value and maximum value. Possible attributes are
1. value : the actual value for the scale. e.g. 1 out of 5 will have value 1.
2. min: minimum allowed value. If not mentioned then ZERO is assumed.
3. max: maximum value, this should be greater than minimum value else minimum value will be used as maximum value.
4. low: low part of the value range, this should be less than high value, if low is less than min then low = min
5. high: high part of the value range, if high > max then high = max
6. optimum this value needs to be between min and max.This tag is not supported in IE yet.
There are few things you can try. New elements are added to give more meaning to the content you write. More you use them more habitual you will become knowing your content better.
To know more about the elements I have mentioned in this post you must click on the "w3 specification links" that are added to the elements themselves. I think you will learn more that way. Idea of my post is not to explain each and every element in depth but rather focus on how to use them semantically.
If you think this post need some more resources links please let me know there are heaps floating around that are good.
Once again its a good idea to include this little snippet in all your HTML5 pages to that likes of IE7, IE8, IE9 can understand new elements.
1 2 3 |
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> |
You should put all your CSS below above snippet.
In the next post in HTML5 category, I will be talking about browser handling and good HTML5 resources to kick start your next project.
Cheers
Leave a Reply