HTML5 <article>
Published: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>
Value | Description |
---|---|
YYYY-MM-DDThh:mm:ssTZD | The date or time being specified. Explanation of components:
|
<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 ...<cite>
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:
<article>
<section>
<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.