The <article> element is a new element in HTML5. It is one of the new HTML5 elements including the header, footer, section, nav etc.
nanadwumor
As the name suggests, the <article> element is used to to represent an article. It is similar to the <div> element except that the <article> element adds semantics. That is, it adds meaning to the content it marks. The <article> element is used to wrap a content in a document if the content will be outlined in the document.
Besides, content in the <article> element makes sense on their own. Examples of content wrapped by the <article> element include: a forum post, article in a magazine or newspaper, a blog entry, etc
Join other Subscribers on our YouTube channel and enjoy daily pogramming tutorials.
Syntax of <article> element
|
1 |
<article>...</article> |
In a document, typically there are multiple articles. For instance, a blog that shows the text of each article one after another will have each post contained in an <article> element.
When <article> elements are nested, the inner <article> elements represent articles that are in principle related to the contents of the outer <article>.
For example, a blog post on a site that accepts user-submitted comments could represent the comments as <article> elements nested within the <article> element for the blog post.
Recommended
Difference Between Absolute and Relative References in HTML
A relative reference does not specify the complete path to a web page. It specifies only the name...
Example of <article> in code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body> <article class="blogpost"> <h1>comments</h1> <article class="comment"> <h2>username</h2> <p>content of comment here</p> </article> <article class="comment"> <h2>username</h2> <p>content of comment here</p> </article> <article class="comment"> <h2>username</h2> <p>content of comment here</p> </article> </article> </body> </html> |
Output
When not to use the <article> element
Do not use the <article> element to mark up paragraphs or content that does not make sense on its own. The <article> element is preferred when the content it marks makes a complete sense as an article will be.
Program shows the <article> element wrongly used to mark content.
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <article > The book was owned by the first student.</article> <article > Many students have no time studing nowadays.</article> </body> </html> |
Output
Global Attributes
The <article> element supports the global attributes in HTML
Event Attributes
The <article> element supports the event attributes in HTML
Default CSS Settings
The default CSS setting in most browsers is as below:
|
1 2 3 4 |
article { display : block; } |
You May Also Like…
Block And Inline Level Tags in HTML
Block elements start on a new line and end with a carriage return. That's, immediately after ending on a horizontal...
Selecting a browser for HTML5 development
Google's Chrome browser is simple to use and has the most up-to-date HTML5 features making it easier for developers....
Top 10 HTML5 formatting tags
HTML offers a range of elements for formatting text. HTML formatting tags include : <b> - Bold text...
Recent Comments