HTML тег <article>html5

HTML теги

Значение и применение

Тег <article>html5 (статья) применяется для обозначения раздела страницы, содержащего завершенную, независимую композицию. Данный элемент может содержать в себе такую информацию как запись блога, товар в интернет-магазине, пост на форуме, газетная статья, любой другой независимый элемент содержимого или просто основной текст страницы.

Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от <h2> до <h6> (если до этого не использовался <h1>, то допускается его разовое размещение). Внутри тега <article>html5 могут содержаться другие одноименные элементы с близким по смыслу содержимым.

<article> <!-- начало основной статьи -->
	<h1>Статьи о птицах</h1><!-- заголовок первого уровня (если был использован в документе, то h2, а во вложенных h3) -->
	<p>Вводная информация о птицах...</p>
	<article> <!-- начало первой вложенной статьи -->
		<h2>Статья о воробье</h2> 
		<p>Информация про воробьев...</p>
	</article> <!-- конец первой вложенной статьи -->
	<article> <!-- начало второй вложенной статьи -->
		<h2>Статья о синице</h2>
		<p>Информация про синиц...</p>
	</article><!-- конец второй вложенной статьи -->
</article> <!-- конец основной статьи -->
Пример размещения тега <article> на странице.
Пример размещения тега <article> на странице.

Совместное использование тегов <section>html5 и <article>html5

Обратите внимание, что допускается в качестве дочернего (вложенного) элемента тега <article>html5 использовать тег <section>html5 (раздел), как бы разбивая по смыслу содержимое. При этом необходимо, чтобы элемент <article>html5 и вложенные элементы <section>html5 имели в качестве дочернего (вложенного) элемента заголовок от <h2> до <h6> (если до этого не использовался <h1>, то допускается его разовое размещение внутри <article>html5).

Пример размещения тега <section> внутри <article>.
Пример размещения тега <section> внутри <article>.

По аналогии с вышерассмотренным примером допускается помещать элементы <article>html5 внутрь элементов <section>html5, формируя при этом разделы с тематической информацией. При этом на элементы действуют те же правила по размещению заголовков:

Пример размещения тега <article> внутри <section>.
Пример размещения тега <article> внутри <section>.

Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.

Рис. 43 Человек, который использует только тег <div>.
Рис. 43 Человек, который использует только тег <div>.

HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега <div>. HTML 5 предлагает новые блочные семантические элементы для определения различных частей веб-страницы, вы можете детально с ними познакомиться в статье учебника HTML 5 "Теги разметки страницы".

Поддержка браузерами

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<article>html56.04.011.15.09.012.0

Пример использования

Рассмотрим пример в котором сделаем простую разметку для сайта, используя современный стандарт гипертекстовой разметки HTML5.

<!DOCTYPE html>
<html>
	<head>
		<title>Разметка страницы</title>
	</head>
	<body>
		<header style = "background-color:khaki; height:100px">
			<p>Верхний колонтитул (тег <header>)</p>
		</header>
		<nav style = "background-color:coral; height:75px">
			<a href = "#">Ссылка 1</a> |
			<a href = "#">Ссылка 2</a> |
			<a href = "#">Ссылка 3</a> |
		<p>Панель навигации (тег <nav>)</p>
		</nav>
		<aside style  = "float:right; width:200px; height:250px; background-color:tan">
			<p>Справа мы разместили тег <aside></p>
		</aside>
		<main style = "height:250px">
			<h1>Главный заголовок сайта</h1>
			<p>Основное содержимое (тег <main>)</p>
			<section style = "background-color:grey; height:75px">
				<h2>Заголовок второго уровня</h2>
				<p>Раздел 1 (тег <section>)</p>
			</section>
			<section style = "background-color:grey; height:75px">
				<h2>Заголовок второго уровня</h2>
				<p>Раздел 2 (тег <section>)</p>
			</section>
		</main>
		<footer style = "background-color:khaki; height:80px">
			<p>Нижний колонтитул (подвал) тег <footer></p> 
			<address>Пример с сайта basicweb.ru</address>
		</footer>
	</body>
</html>

Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный CSS стиль, применение встроенных стилей не является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3.

И так по порядку, что мы сделали в этом документе:

Результат нашего примера:

Разметка страницы на HTML 5

Разметка страницы на HTML 5.

Значение CSS по умолчанию

article {
display: block;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги