HTML5 — Элемент article — ИТ Шеф
Статья, в которой рассматривается HTML-элемент article
из категории sectioning.
Назначение элемента article
Элемент article
предназначен для создания секции в документе, контент которой представляет собой некоторое завершённое или автономное содержимое. Другими словами, с помощью данного элемента можно добавить смысл в документ, который будет говорить о том, что данный контент является некоторой вещью, и может быть рассмотрен и понят пользователем отдельно от остального содержимого страницы.
Обычно этот элемент применяется для создания секции на странице, содержимое которой представляет собой статью, пост блога, запись на форуме, комментарий пользователя, интерактивный виджет, гаджет, или любой другой независимый контент.
Применение элемента article
Например, рассмотрим использование элемента article
для разметки поста блога:
<article> <!-- Заголовок поста --> <header> <h2>Тема поста</h2> <p> <time datetime="2015-10-09"> Дата публикации </time> </p> </header> <!-- Основное содержимое поста --> <p>...</p> <!-- Футер поста --> <footer> <!-- Содержимое футера --> </footer> </article>
Вложенные элементы article
При создании структуры документа спецификация HTML 5 позволяет помещать одни элементы article
в другие. Это используется для того, чтобы показать то, как контенты этих элементов относятся друг к другу. А именно передать то, что содержимое дочерних элементов article
связано с содержимым родительского элемента
.
Например, рассмотрим фрагмент кода, содержащий статью с комментариями.
<article> <!-- Заголовок статьи --> <header> <h2>Тема статьи</h2> <p> <time datetime="2015-10-09"> Дата публикации </time> </p> </header> <!-- Основное содержимое статьи --> <p>...</p> <!-- Секция статьи, содержащая комментарии --> <section> <!-- Заголовок секции, содержащей комментарии --> <h2>Комментарии</h2> <!-- 1 комментарий к статье --> <article> <!--Футер 1 комментария--> <footer> <p>Автор комментария</p> <p> <time datetime="2015-10-10"> Дата комментария </time> </p> </footer> <!-- Содержимое 1 комментария --> <p> Текст комментария... </p> </article> <!--2 комментарий к статье--> <article> <!--Футер 2 комментария--> <footer> <p>Автор комментария</p> <p> <time datetime="2015-10-11"> Текст комментария </time> </p> </footer> <!-- Содержимое 2 комментария --> <p> Содержимое комментария.
.. </p> </article> </section> </article>
Вышеприведенный пример будет иметь следующую структуру (outline):
[article] Тема статьи [section] Комментарии [article] Untitled [article] Untitled
Примечание: Согласно спецификации HTML5, элемент article
не может иметь элемент main
в качестве своего потомка.
Переход HTML уроки для начинающих академия
HTML5CSS.ru
ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
❮ Назад Дальше ❯
Переход из HTML4 в HTML5
Эта глава целиком посвящена переходу из HTML4 в HTML5.
В этой главе показано, как преобразовать страницу HTML4 в страницу HTML5, не уничтожая ничего из исходного содержимого или структуры.
Вы можете перенести с XHTML на HTML5, используя тот же алгоритм.
Старый Тег HTML4 | Новый Тег HTML5 |
---|---|
<div> | <header> |
<div> | <nav> |
<div> | <section> |
<div> | <article> |
<div> | <footer> |
Обычная HTML4 страница
Пример
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
«http://www.w3.org/TR/html4/loose.dtd»>
<html lang=»en»>
<head>
<meta
http-equiv=»Content-Type» content=»text/html;charset=utf-8″>
<title>HTML4</title>
<style>
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
div.
margin: 5px;
padding: 10px;
background-color: white;
}
div#menu ul {
padding: 0;
}
div#menu ul li {
display: inline;
margin: 5px;
}
</style>
</head>
<body>
<div>
<h2>Monday
Times</h2>
</div>
<div>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>
<div>
<h3>News Section</h3>
<div>
<h3>News Article</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
<div>
<h3>News
Article</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
</div>
</div>
<div>
<p>&copy; 2016 Monday Times. All rights reserved.</p>
</div>
</body>
</html>
Изменение документа HTML5
Изменение документа:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
для документа HTML5:
Пример
<!DOCTYPE html>
Изменение в кодировке HTML5
Измените сведения о кодировке:
<meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″>
в кодировку HTML5:
Пример
<meta charset=»utf-8″>
Добавить HTML5Shiv
Новые семантические элементы HTML5 поддерживаются во всех современных браузерах. Кроме того, вы можете «научить» старых браузеров, как обрабатывать «неизвестные элементы».
Тем не менее, IE8 и более ранних версиях, не позволяет стилизации неизвестных элементов. Таким образом, HTML5Shiv является обходным путем JavaScript для включения стилизации элементов HTML5 в версиях Internet Explorer до версии 9.
Добавьте HTML5Shiv:
Пример
<!—[if lt IE 9]>
<script src=»https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js»></script>
<![endif]—>
Узнайте больше о HTML5Shiv в поддержке браузера HTML5.
Изменение семантических элементов HTML5
Существующий CSS содержит идентификаторы и классы для стилизации элементов:
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
div.article {
margin: 5px;
padding: 10px;
background-color: white;
}
div#menu ul {
padding: 0;
}
div#menu ul li {
display: inline;
margin: 5px;
}
Замените на одинаковые стили CSS для семантических элементов HTML5:
body {
font-family: Verdana,sans-serif;
font-size: 0. 9em;
}
header, footer {
padding: 10px;
color: white;
background-color: black;
}
section {
margin: 5px;
padding: 10px;
}
article {
margin: 5px;
padding: 10px;
background-color: white;
}
nav ul {
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
Наконец, измените элементы на семантические элементы HTML5:
Пример
<body>
<header>
<h2>Monday Times</h2>
</header>
<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>
<section>
<h3>News Section</h3>
<article>
<h3>News Article</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
<article>
<h3>News Article</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
</section>
<footer>
<p>© 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
Разница между <article> <section> и <div>
Существует путаница (отсутствие) разницы в стандарте HTML5, между <article>
<section>
и <div>
.
В стандарте HTML5 элемент <section>
определяется как блок связанных элементов.
Элемент <article>
определяется как полный, автономный блок связанных элементов.
Элемент <div>
определяется как блок дочерних элементов.
Как это интерпретировать?
В приведенном выше примере мы использовали <section>
в качестве контейнера для связанного <articles>
.
Но, мы могли бы использовать <article>
в качестве контейнера для статей, а также.
Вот несколько различных примеров:
<article> in <article>:
<article>
<h3>Famous Cities</h3>
<article>
<h3>London</h3>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article>
<h3>Paris</h3>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h3>Tokyo</h3>
and the most populous metropolitan area in the world.

</article>
</article>
<div> в <article>:
<article>
<h3>Famous Cities</h3>
<div>
<h3>London</h3>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div>
<h3>Paris</h3>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div>
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
<div> в <section> в <article>:
<article>
<section>
<h3>Famous Cities</h3>
<div>
<h3>London</h3>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div>
<h3>Paris</h3>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div>
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>
<section>
<h3>Famous Countries</h3>
<div>
<h3>England</h3>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div>
<h3>France</h3>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div>
<h3>Japan</h3>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world. </p>
</div>
</section>
</article>
❮ Назад Дальше ❯
Популярное
html картинка
как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html
таблица html
как сделать ссылку в html
html элементы
Copyright 2018-2020 HTML5CSS.ru
Правила и Условия Политика конфиденциальности О нас Контакты
HTML5 TAG — Geeksforgeeks
Связанные статьи
- Напишите опыт интервью
Напишите статью
HTML FAYS
HTML ATTRIBUTES
HTML GRAPHICS
HTML ATTRIBUTE
HTML 5
HTML 5 MathML
Курс HTML
Вопросы HTML
Улучшить статью
Сохранить статью
- Уровень сложности: Легко
- Последнее обновление: 20 июл, 2022
Улучшить статью
Сохранить статью
Тег Тег HTML
Другими словами, элемент article представляет компонент страницы, состоящий из автономной композиции в документе, странице или сайте. Для экс. в синдикации.
Потенциальным источником элемента статьи являются:
- Статья в журнале/газете
- Запись в блоге
- Сообщение на форуме
- Пользовательский комментарий
- На странице с одним фрагментом контента можно использовать один элемент
, чтобы содержать основной контент и отделять его от остальной части страницы. - На странице с несколькими частями содержимого (страница индекса блога, страница результатов поиска, страница категории, новостная лента) можно использовать несколько элементов
для содержания каждой отдельной части содержимого.
В любом случае, он похож на элемент
Примечание: Этот тег не отображается в браузере как нечто особенное, для этого вам нужно использовать CSS.
Настройка CSS по умолчанию: Большинство браузеров отображают элемент Article со следующими значениями.
HTML
|
Example: Using inline styling in an article element
HTML
|
Output:
Supported Browsers:
- Google Chrome 5.
0 и выше
- Edge 12.0 и выше
- Internet Explorer 9.0 и выше
- Firefox 4.0 и выше
- Opera 11.1 и выше
- Safari 5.0 и выше
Статьи по теме
Что нового
Мы используем файлы cookie, чтобы обеспечить вам максимальное удобство просмотра нашего веб-сайта. Используя наш сайт, вы подтверждаете, что вы прочитали и поняли наши Политика в отношении файлов cookie & Политика конфиденциальности
Элемент статьи | HTML5 Doctor
Мы обсуждали множество новых элементов здесь, в HTML5Doctor, но элемент article
каким-то образом ускользал от микроскопа… до сих пор! артикул
является одним из новых секционных элементов. Его часто путают с разделом , разделом
и , разделом
, но не волнуйтесь, мы объясним разницу между ними.
Что говорит спецификация
К счастью, спецификация короткая и приятная:
Элемент
Спецификация W3Carticle
представляет собой компонент страницы, который состоит из автономной композиции в документе, странице, приложении или сайте и предназначен для независимого распространения или повторного использования, например.в синдикации. Это может быть сообщение на форуме, статья в журнале или газете, запись в блоге, пользовательский комментарий, интерактивный виджет или гаджет или любой другой независимый элемент контента.
В дополнение к своему содержимому элемент
обычно имеет заголовок (часто в элементе заголовка), а иногда и нижний колонтитул. Самый простой способ концептуализировать <статья>
— подумать об его использовании в веб-журнале, как упоминалось в примерах спецификации «запись в блоге» и «оставленные пользователем комментарии». Здесь, в HTML 5 Доктор, мы оборачиваем каждую запись блога в элемент
. Мы также используем
на страницах со «статическим» контентом, таких как страницы «О нас» и «Контакты», поскольку
можно использовать для «любого другого независимого элемента контента». Сложность заключается в том, что такое независимый элемент контента ?
Тест на запах для обретения независимости
Независимая часть контента, подходящая для помещения в элемент
, представляет собой контент, который имеет смысл сам по себе . Этот критерий зависит от вашей интерпретации, но простой тест на запах - 9.0443 будет ли это иметь смысл в RSS-канале? Конечно, статьи в блогах и статические страницы имеют смысл в программе для чтения каналов, а на некоторых сайтах есть каналы комментариев в блогах. С другой стороны, фид с каждым абзацем этой статьи в виде отдельного поста был бы не очень полезен. Ключевым моментом здесь является то, что контент должен иметь смысл независимо от его контекста , то есть когда весь окружающий контент удален.
Примеры использования
<артикул>
Кости
<артикул>
У нас есть только заголовок и некоторый контент, но этого достаточно, чтобы иметь смысл (предположим, что есть намного больше контента о яблоках 😉
<статья>Яблоко
яблоко – это семечковый плод яблони...
... статья>
Стиль блога
Опубликованная дата заставляет нас добавить
, а также есть контент, который подходил бы к элементам .
<статья> <заголовок>Яблоко
Опубликовано:
заголовок>яблоко – это семечковый плод яблони...
... <нижний колонтитул>Лицензия Creative Commons Attribution-ShareAlike
нижний колонтитул> статья>
An
с вложенными комментариями
s В этом примере показана запись в блоге с комментариями. Каждый комментарий может быть помечен как
внутри содержащего
.
<статья> <заголовок>Яблоко
Опубликовано:
заголовок>яблоко – это семечковый плод яблони...
... <раздел>Комментарии
<статья> <заголовок>Автор: Apple Lover
<время публикации datetime="2009-10-10T19:10-08:00">~1 час назад
заголовок>Я люблю яблоки, мой любимый сорт - Гренни Смит
статья> <статья> <заголовок>Автор: Апельсины — король
заголовок>Угу, яблоки!? вместо этого вы должны писать об АПЕЛЬСИНАХ!!1!
статья> раздел> статья>
Ан
<артикул>
с <раздел>
с Вы можете использовать элемент
, чтобы разделить статью на логические группы контента с заголовками:
<статья>Сорта яблок
Яблоко — это семечковый плод яблони.
<раздел>..
Красное вкусное
Эти ярко-красные яблоки чаще всего можно найти во многих супермаркетах...
раздел> <раздел>Гренни Смит
Эти сочные зеленые яблоки станут отличной начинкой для яблочных пирогов...
раздел> статья>
A
<раздел>
, содержащий <артикул>
s При необходимости элемент
может содержать элемента
. Мы уже видели это в приведенном выше примере с разделом комментариев, а другими распространенными примерами являются домашняя страница или страницы категорий блога:
<раздел>Статьи о фруктах
<статья>Яблоко
Яблоко — это семечковый плод яблони...
статья> <статья>Оранжевый
Апельсин представляет собой гибрид древнего культивируемого происхождения, возможно, между помело и мандарином...
статья> <статья>Банан
Созревшие бананы бывают разных размеров и цветов, включая желтый, фиолетовый и красный.
статья> раздел>..
Использование
для виджета В спецификации также упоминается, что интерактивный виджет также может быть
. В приведенном ниже примере показано, как разметка может выглядеть для встроенного виджета, например, из Widgetbox.
<статья>Моя прялка для фруктов
<объект> объект> статья>
Атрибут публикации
Возможно, вы заметили атрибут pubdate
в этих примерах. pubdate
— необязательный логический атрибут , который может быть добавлен к одному элементу time
в пределах
. Если он присутствует, он указывает, что элемент
является датой публикации
. Его можно записать несколькими способами, наиболее популярными из которых являются: 9. 0006
опубликовать публикация = "публикация"
Вы можете думать об этом как о стилях HTML и XHTML — конечный результат один и тот же, поэтому используйте стиль, который вам нравится. Обратите внимание, что pubdate
применяется только к родительскому элементу
или ко всему документу в целом.
Разница между
<артикул>
и <раздел>
Было много путаницы по поводу разницы (или предполагаемого отсутствия разницы) между
и
элементы в HTML 5. Элемент
является специализированным видом
; он имеет более конкретное семантическое значение, чем
, поскольку он является независимым, автономным блоком связанного контента. Мы могли бы использовать
, но использование
придает содержимому большее семантическое значение.