HTML5 <article> Tag
Definition and Usage
The <article> tag defines content that stands alone and is complete on its own.
The article should be self-contained and understandable on its own. It must be able to be shared separately from the rest of the website.
Possible sources for the <article> element:
- Forum post
- Blog post
- News story
Note: The <article> tag doesn't have a special look in a browser. But you can make it look different using CSS (like in the example below).
Global Attributes
The <article> tag in HTML can also use the Global Attributes.
Event Attributes
The <article> tag in HTML can also handle Event Attributes.
More Examples
Default CSS Settings
Most browsers will show the <article> tag with the following preset
values:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a tool made by Google for exploring the internet. It was introduced in 2008 and is now the most popular web browser worldwide.</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p> Mozilla Firefox is a free web browser made by Mozilla. It's open-source, which means anyone can see its code. Since January 2018, Firefox has been the second most popular web browser.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser created by Microsoft and released in 2015. It replaced Internet Explorer.</p>
</article>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers>h1,
.browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser>h2,
p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p> Google Chrome is a tool made by Google for exploring the internet. It was introduced in 2008 and is now the most popular web browser worldwide.</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p> Mozilla Firefox is a free web browser made by Mozilla. It's open-source, which means anyone can see its code. Since January 2018, Firefox has been the second most popular web browser.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser created by Microsoft and released in 2015. It replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
article {
display: block;
border: 1px solid #ccc;
padding: 10px;
margin: 20px;
}
</style>
<article>
<h1>Hello, this is a dummy content!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan, ligula id facilisis feugiat, dui elit
auctor nisi, sit amet dignissim metus ex sed purus.</p>
</article>
</body>
</html>
HTML
CSS
Javascript
Jquery
PHP
MySQL