Five (5) cool new HTML5 text-level semantics elements

HTML5 adds to our web pages the new structural semantic elements like <header>, <aside>, <nav>, <section> and many other, which are pretty awesome. But what even more exciting are the new text-level semantics elements which change text visually without extra (and sometimes complex) coding. Below are the overview of five of them. Unfortunately only Chrome browser supports them in full today. 4 out of 5 work in Opera. Firefox and Safari support fewer, Internet Explorer 9 is on last place, and hopefully this will be changed in upcoming IE 10. Refer to the table of supporting browsers at the end of the post.


1. The "mark" Element


The <mark> tag is used to highlight or reference a run of text due to it's relevance in some other context. You can incorporate this tag into the search results page on your website or blog to enable your visitors to more quickly find the content they search for.


2. The "progress" Element


If you wish to define the progress of any task, such as weight-loss or project completion, consider using the new <progress> tag. You can specify the current and the maximum value.

Your download is 49% complete.

Code for this example:
49%


3. The "meter" Element


<meter> tag define the measurement value in HTML web documment.
Like the <progress> tag, the <meter> tag shows overall progress. You may consider using it on a multi-page survey or quiz, for example.

Your score is (21): F
Your score is (81): B
Your score is(91): A
Percentage meter: 

Code:
Your score is (21): F

Your score is (81): B

Your score is(91): A

Percentage meter: 



4. The "datalist" Element


The new <datalist> HTML tag allows you to create a list of data. Previously, you may have used a drop-down menu without anchor destinations to perform this function. The list appears similar to the text input and you can specify a list of values that appear when the visitor clicks the input. You may use this as a method to allow visitors to select an item from a list in a form. Try to type a car brand from datalist in the input field, e.g. BMW or Volvo:



Code:
  


5. The "details" Element


The new <details> tag in HTML is a handy tag that allows you to define details, such as a copyright notice, without using valuable real estate on your page. When used in combination with the <summary> tag you can show a summary that is clickable to reveal more details. An arrow denotes this section on a Web page.



Your Summary (click to expand or collapse).   Additional details go here.

Code:
Your Summary (click to expand). Additional details go here.

Enjoy!


UPDATE: As of September 5th, 2012 here is the table illustrating the major five browser support on my Windows 7 desktop:


Browser
<tag>Chrome 21.0Opera 12.02Firefox 15.0Safari 5.1.7IE 9
markyesyesyesyesyes
progressyesyesyesnono
meteryesyesnonono
datalistyesyesyesnono
detailsyesnononono

And it's getting better! January 2013 (IE10 on Windows 8, other browsers are on Mac):

Browser
<tag>Chrome 23 Opera 12.12 Firefox 17.0.1 Safari 6.0.2 IE 10 
markyesyesyesyesyes
progress yesyesyesyesyes
meteryesyesyesyesno
datalistyesyesyesnoyes
detailsyesnonoyesno
And if you want to see the comprehensive report of how well your browser supports HTML5 then visit this link: http://html5test.com/.

Comments

Popular posts from this blog

Data visualization for Roadmap Microsite (Angular and D3.js)

Conceptual design

Four tools for prototyping: Sketch, Figma, Principle, and FramerX