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

Post a Comment

Popular posts from this blog

Conceptual design

Image
Consider this post is about visual design. A duct taped banana. This piece of art was sold for $150,000 in December 2019 at Miami's Art Basel . Actually $120K x 4 + $150K = $630,000. Not bad for 10 cents banana and few inches of duct tape. This became a sensation of 2019-2020. Why and how it happened brings up some questions about modern society and economy. How artists (or art dealers, or anyone else) create value from nothing? And emphasize the importance of the idea. In this particular case it's nothing more than an idea. Is this the art we'd like to see? Probably not. But perhaps it's the art we deserve.
Read more

Using Trello and Confluence to manage UX design project. Part 1

Image
This is part One. Part Two is here . Introduction. “ Describe your design process ”. It’s a typical interview question for UX designer position. User-centered design process indeed has defined set of steps. In theory. On the practice though, the adherence to these steps depends on many factors, such as communication and execution skills, practical experience, ability to influence people, being leader and influencer, and at what level your organization is a design driven org. So many businesses are not ready to adopt the design practice, and to place the design before the development. Or simply there is not time or budget to go through all steps. Here in Herbalife the UX Design team accepted Norman Nielsen group philosophy:   Empathize – Define –Ideate – Prototype – Test – Implement .  However the   interpretation of the practical tasks can differ dramatically in different organizations. Here what we currently do: Design Thinking and Agile Any project, which goes t
Read more

How do I use InVision

Image
Team lead asked me to write what InVision products do I use, how I use them, what are pros and cons. I wrote it today, and really think it will be helpful to share my thoughts with wider audience. So, below is the adaptation of what I provided to the engineering management in one fintech company.  I use InVision to share my hi-fi designs and specs, which I create in Sketch desktop application. This is my primary and every day usage of InVision, and about 90% of all usecases of all InVision products combined.  I sync designs via the plugin in Sketch made by Invision, called Craft .  When they are in InVision, we call those designs prototypes .  It works, but I often experience slowness. Sometimes sync process is failing, and I have to try it again. In Sketch I select one or more artboards, then initiate sync, which sends the artboard to InVision cloud. I have to be logged in Craft plugin with my InVision credentials. Almost every day, especially when I design intensely and re-publish
Read more