1. Introduction of HTML5 <article> tag
2. Syntax of HTML5 <article> tag
2. Syntax of HTML5 <article> tag
3. Attributes of HTML5 <article> tag
4. Example of HTML5 <article> tag
Introduction to HTML5 <article> Tag
The header, footer and sidebar in the website can be the same on different pages but the article is unique on every page.
The article is the section of a website that contains the main content and which is most important to the user. On the basis of this section of your website, you get a ranking in search engines.
The content of the <article> tag is independent of the rest of your website content. That is, this content does not require other content. As there are different articles in the newspaper and these are all independent, so every article tag on your website is independent.
An article usually contains headings and paragraphs. Headings and paragraphs are defined by <h1> and <p> tags respectively. The HTML syntax of an article is as follows.
An article usually contains headings and paragraphs. Headings and paragraphs are defined by <h1> and <p> tags respectively. The HTML syntax of an article is as follows.
<article>
<h1> Heading </ h1>
<p> This is a paragraph. </ p>
</ article>
Sub headings (<h2>, <h3> etc.) are also used as required in an article. The footer can be also define in the <article> element. As shown below.
<article>
<h1> Heading </ h1>
<p> This is a paragraph related to main heading </ p>
<h2> Sub Heading </ h2>
<p> This is a paragraph related to subheading </ p>
<article>
Attributes of HTML5 <article> Tag
There is no element specific attribute of the <article> tag. But this tag supports all global attributes such as id, class, title etc.
<article id = "HTMLTutorial">
</ article>
Similarly, you can use other global attributes with <article> tag.
Styling <article> Tag
Like any other HTML element, you can also apply CSS rules to the <article>. You can define the width, color, and display of the article by CSS.
article
{
width: 920px;
color: # 272727;
display: block;
}
As you can see in the syntax above, styles are applied by CSS on the <article> element. Similarly, you can apply many more CSS rules on this tag.
<article> Event Attributes
<article> element supports all global event attributes like onclick, onfocus, etc. By handling these events, you can make the web page interactive.
<article onclick = "script-code-here">
As you can see in the syntax above, onclick event attribute has been defined in the <article> element. Similarly, you can also define other event attributes.
As you can see, in the above example, the main heading has been created inside the <article> element and later a paragraph has been added after that a subheading and a paragraph has been added again.
 |
| ARTICLE-TAG-EXAMPLE |
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.