- 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.
- Drupal Multimedia
- 中文版CorelDRAW X8基礎培訓教程（全彩版）
- RESTful PHP Web Services
- SPSS統計分析從基礎到實踐
- IBM Lotus Notes and Domino 8.5.1
- 中文版3ds Max 2022基礎教程
- MATLAB在日常計算中的應用
- Mastercam 2019 完全自學寶典
- Python 3 Web Development Beginner's Guide
- 這樣學Excel數據處理與分析更高效（視頻版）
- MSC Fatigue疲勞分析標準教程
- 從小白到高手：Studio One快速上手教程
- 從零開始：CINEMA 4D中文版案例教程
- Photoshop CC漫畫繪制技法
- Webpack+Babel入門與實例詳解