مقاله (article)
تگ «مقاله (article)» برای محتوای مستقل و خودبسنده است. یعنی هر «مقاله» جدا قابل پخش است. مثلا یک پست وبلاگ یا یک خبر. پس ساختارش باید تنها معنی بدهد.
کاربرد تگ مقاله (article)
هر بخش که بیرون از صفحه هم مفهوم دارد، مقاله است. مثلا پست انجمن، پست وبلاگ، یا خبر سایت. مرورگر ظاهر ویژه ای نمی دهد؛ اما با CSS می توان استایل داد.
نمونه محتوای مستقل با article
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
استایل دهی ساده به article با CSS
<html>
<head>
<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 web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
سه گام عملی ساخت مقاله
- عنوان واضح بگذار. مثلا با
<h2>. - متن مستقل بنویس. بیرون صفحه هم قابل فهم باشد.
- در صورت نیاز، با CSS ظاهر را بهبود بده.
نکته: هر مقاله باید خودش کامل باشد؛ وابستگی کم بهتر است.
هشدار: از article برای ظرف های عمومی استفاده نکن. معنی محتوا مهم است.
جمع بندی سریع
- article یعنی بخش مستقل و قابل انتشار.
- مرورگر استایل خاصی نمی دهد.
- با CSS فرم دهی کن.
- عنوان و متن باید کامل باشند.