HTML тег <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> визначає незалежний самодостатній вміст.
Стаття повинна мати сенс сама по собі, і її має бути можливість поширювати незалежно від решти сайту.
Потенційні джерела для елемента <article>:
- Повідомлення на форумі
- Публікація в блозі
- Новини
Примітка: Елемент <article> не відображається як щось особливе у браузері. Однак ви можете використовувати CSS для стилізації елемента <article> (див. приклад нижче).
Підтримка браузерами
Числа в таблиці вказують на першу версію браузера, яка повністю підтримує елемент.
| Елемент | |||||
|---|---|---|---|---|---|
| <article> | 6.0 | 9.0 | 4.0 | 5.0 | 11.1 |
Глобальні атрибути
Тег <article> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <article> також підтримує Атрибути подій в HTML.
Більше прикладів
Приклад
Використовуйте CSS для стилізації елемента <article>:
<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>
Спробуйте самі »
Пов’язані сторінки
HTML DOM довідник: Об’єкт Article
Налаштування CSS за замовчуванням
Більшість браузерів будуть відображати елемент <article> з наступними значеннями за замовчуванням:
article {
display: block;
}
