HTML :: Тег <article>

В HTML тег <article> (от англ. article – статья) выделяет независимый фрагмент веб-страницы, который можно отнести к статье, новости, сообщению на форуме или записи комментария. При этом содержимое элемента должно быть связано с общим содержимым страницы, но также иметь и свой собственный смысл. Кроме того, в элементе <article> может присутствовать собственный заголовок одного из уровней h1-h6, а также собственные локальные элементы <header>, <footer>, <section>, <nav> или <aside>.

Разрешается использовать одни элементы <article> внутри других. Однако запрещается располагать внутри <article> элемент <main>. Кроме того, элемент <article> не должен быть потомком элемента <address>.

Синтаксис

	<article>
		...
	</article>       
	
	Закрывающий тег: обязателен.

Атрибуты

Для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/sections.html#the-article-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/article

Примеры

HTML

htmlCodes

<!-- ----------- Уникальный контент страницы -------------- -->
<main>
	
	<!-- Делаем разметку для статьи о яблоках -->		
	<article>
		
		<!-- Собственная шапка -->
		<header>
			<!-- Задаем собственный заголовок 2-го уровня -->
			<h2>Красные или зеленые яблоки?</h2>
			
			<!-- Внутренняя навигация по статье -->
			<nav>
				<ul>
					<li><a href="#red_apples">О красных сортах яблок</a></li>
					<li><a href="#green_apples">О зеленых сортах яблок</a></li>
				</ul>
			</nav>
		</header>
		
		<!-- ----------- 1-й раздел статьи ---------- -->
		<section id="red_apples">
			<!-- Задаем собственный заголовок 3-го уровня -->
			<h3>О красных сортах яблок</h3>
			<p>
				Не для кого не секрет, что красные сорта яблок...
			</p>
		</section>
		
		<!-- ---------- 2-й раздел статьи ----------- -->
		<section id="green_apples">
			<!-- Задаем собственный заголовок 3-го уровня -->
			<h3>О зеленых сортах яблок</h3>
			<p>
				Зеленые сорта яблок...
			</p>
		</section>
		
		<!-- ---------- «Подвал» всей статьи ----------------------- -->
		<footer class="site_footer">
			
			<p>
				Дата публикации: <time datetime="2015-05-15 19:00">15 мая</time>
     		</p>
			
			<!-- Информация об авторе -->
			<address>
				Автор: Петр Романовский<br>
				Тел. +375-444-44-44 (до 23-00)
			</address> 
		</footer>
	</article>
	
	<!-- ... и другие статьи, например, о пирогах с яблоками -->
	
</main>

Пример №1

HTML

htmlCodes

<!-- Рецензия на новый фильм -->	
<article class="filmReview">
  
	<!-- Заголовок статьи -->
	<header>
	
		<h2>Парк Дохлого периода</h2>
		
	</header>

	<!-- Общая рецензия от сайта -->
	<section class="main_review">

		<p>За 3 доллара и такой шедевр!</p>

	</section>


	<!-- Отзывы пользователей -->
	<section class="user_reviews">

		<!-- Отзыв первого пользователя -->
		<article class="user_review">

			<p>По-моему они реально дохлые!</p>
			
			<!-- Подвал первого отзыва -->
			<footer>
				<p>
					Опубликовано
					<time datetime="2019-05-16 22:00">16 мая</time>
					Ванюшей.
				</p>
			</footer>

		</article>


		<!-- Отзыв первого пользователя -->
		<article class="user_review">

			<p>Слишком заметно, что резиновые.</p>

			<!-- Подвал второго отзыва -->
			<footer>
				<p>
					Опубликовано
					<time datetime="2019-05-17 19:30">17 мая</time>
					Катериной.
				</p>
			</footer>

		</article>

	</section> <!-- Конец секции с отзывами пользователей -->
 
	<!--  Подвал всей статьи -->
	<footer>
		<p>
			Опубликовано
			<time datetime="2015-05-15 19:00">15 мая</time>
			Стаффом.
		</p>
	</footer>
  
</article> <!-- Конец всей статьи -->

Пример №2