HTML5 - New Semantic/Structural Elements

HTML5 <article>

Published: 2012-12-19

The article tag is used to layout an independent content, such as forum, blog, news or comment posts (articles). <header>, <time>, <section>, <cite>, <aside>, <blockquote>, <div>, <>, <>, and <footer> tags are widely writen in <article> to compose the complete article elements.

HTML5 Tags: <article> | <footer> | <time> | <section> | <cite> | <aside> | <blockquote> | <div> | <details> |
NOTE: Use Visual Studio as the HTML editor so that you can copy the "clickable tag" and use "Paste Alternate" to paste the anchor with HTML source directly!

<time>

For the following example on the LHS (source code included)", specifying datetime attribute in <time> to denote the date of symbole text (e.g. Valentines day). Thus, JS codes can access the time attribute "datetime". The onetime attribute pubdate is an optional boolean attribute for denoting the publish date of the article. Note that pubdate applies only to the parent <article> element, or to the whole HTML document.

Value	Description
YYYY-MM-DDThh:mm:ssTZD	The date or time being specified. Explanation of components: YYYY - year (e.g. 2011) MM - month (e.g. 01 for January) DD - day of the month (e.g. 08) T - a required separator if time is also specified hh - hour (e.g. 22 for 10.00pm) mm - minutes (e.g. 55) ss - seconds (e.g. 03) TZD - Time Zone Designator (Z denotes Zulu, also known as Greenwich Mean Time)

"We open at 10:00 every morning. I have a date on Valentines day. 2012-12-19"
We open at <time>10:00</time> every morning. I have a date on <time datetime="2008-02-14">Valentines day</time>. <time pubdate>2012-12-19</time>

<section>

Articles should contain sections (chapters), in which contents within a <section> may consist of <h1-h6>, <footer>, <p>, etc. "article" denotes an independent content (such as a news article) with more specific semantics than "section" that may specify only a block of related content like abstraction and introduction.

1.1 HTML5 section

Section content here .... The second paragraph ...

* footer note ...

<section><h3> 1.1 HTML5 section</h3> Section content here .... <p /> The second paragraph ...<footer><small>* footer note ...</small></footer></section>

<cite>

<aside> is used to "float" the content that is related to the surrounding content within an article or web page. This type of content is often represented in sidebars. For example, the following glossary (put on the RHS with <aside>) is from HTML-5-Tutorial that makes the LHS concept clear.

Semantic HTML

Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation.
wikipedia

In HTML5, the <cite> tag defines the title of a work. For example, the following references are useful to realize the different between article, section, and div.
HTML5 articles and sections: what’s the difference?
The article element has the following suggestions:

Would the content would make sense on its own in a feed reader? If so use <article>

Is the content related? If so use <section>

Finally if there’s no semantic relationship use <div>

<aside>

The aside element is a block level element and can be used with block level elements, such as headings (h1 - h6) and inline elements (emphasize, black, font. etc.). <aside> block should be put before the surrounding content block. Try to used <aside>, <div>, and <blockquote> to observe differences among them. The effect of <aside> and <div> on the page layout are almost the same. But if you want to remove some content block without harming the complete of article content, using <aside> is a right solution due to the HTML parser can easily remove the <aside> DOM-node. On the other hand, the parser can not get a favor from <div>. The usage of <blockquote> is only appropriate for denoting the "quote" of a section of paragraph. For example, the following senctence should be "quoted".

The Semantic Web is a new form of Web content that is meaningful to computers will unleash a revolution of new possibilities.
By Tim Berners-Lee, James Hendler and Ora Lassila.

<details>

The details tag specifies additional details that the user can view or hide on demand. Without specifying "open" attribute in <details>, the detain content, except for texts within <summary> tag, will be hidden until the user click the link denoted by <summary>. That is, by specifying "open" attribute in <details>, all the content will initially become visible. The tag is useful to hide large pictures and make the page layout clear!

Click here to open hidden texts! (Currently supported by Chrome)

All Rights Reserved by iLearnBlogger.

Creative Commons Attribution-ShareAlike License