- HTML5 Multimedia Development Cookbook
- Dale Cruse Lee Jordan
- 377字
- 2021-04-02 19:27:38
Using the time element
"The
<time>
element represents either a time on a 24-hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5
How to do it...
In this recipe we'll display dates and times that will be readable for both humans and machines. Let's look at four examples.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js> </script>[endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <article> <header> <h2>Headline</h2> <time datetime="2010-11-29">November 29, 2010</time> </header> <p>First paragraph</p> <p>Second paragraph</p> <footer>Meta information.</footer> </article> <article> <header> <h2>Headline</h2> <time datetime="2010-11-29">Nov. 29</time> </header> <p>First paragraph</p> <p>Second paragraph</p> <footer>Meta information.</footer> </article> <article> <header> <h2>Headline</h2> <time datetime="2010-11-29">the date this was written</time> </header> <p>First paragraph</p> <p>Second paragraph</p> <footer>Meta information.</footer> </article> <article> <header> <h2>Headline</h2> <time datetime="2010-11-29T11:34">the date and time this was written</time> </header> <p>First paragraph</p> <p>Second paragraph</p> <footer>Meta information.</footer> </article> </body> </html>
How it works...
We can use the new <time>
element to indicate specific dates, times, or both.
There's more...
The new <time>
element specifies an exact moment in time — not a time period.
Odd rules
One interesting aspect of the new <time>
element is that you can't use a date before the Christian Era. You also can't use a date like "November 2010." Whatever date we specify must be a positive, specific date — not a relative one. The HTML5 Working Group continues to address this seemingly arbitrary restriction.
<time>'s Time will come
Browsers display the new <time>
element but don't do anything special with it — yet.
Always remember SEO
Time. Why are we so obsessed with it? One very valid reason to focus on time and dates on the web is Search Engine Optimization. SEO, once seen as some sort of mysterious voodoo only black hatted wizards understood, is now everyone's responsibility online. You spend time creating good code and expect a writer to create content worth reading. Now go one step further and ensure that your intended audience can actually find the content you have taken the time to create. And the new <time>
element is just one of the ways search engines draw attention to the most recent content.
See also
The new HTML5 <time>
element is a possible addition to the Microformats movement. Microformats promise to add additional semantic meaning to our markup. Though not officially a standard, Microformats are slowly gaining acceptance in the web development community. Learn more at Microformats.org.
- Adobe創(chuàng)意大學(xué)After Effects CS5 產(chǎn)品專家認證標準教材
- 剪映短視頻制作全流程:剪輯、調(diào)色、字幕、音效
- 中文版SolidWorks 2015技術(shù)大全
- Learning Facebook Application Development
- 平面設(shè)計綜合教程:Photoshop+Illustrator+CorelDRAW +InDesign(微課版)
- 照相館的故事:Photoshop CC 2018調(diào)色合成精修
- Mastering phpMyAdmin 3.3.x for Effective MySQL Management
- Photoshop數(shù)碼攝影后期處理技法從入門到精通
- Photoshop CC移動UI設(shè)計實用教程
- Backbone.js Cookbook
- Python 3 Object Oriented Programming
- Photoshop CC入門與提高
- Cinema 4D/After Effects印象 影視包裝技法精解基礎(chǔ)篇
- Learning Ext JS
- Creo 5.0從入門到精通(第2版)