Семантические элементы = элементы со значением, т.е. элементы которые четко определяют содержание (контент).
Что такое семантические элементы?
Семантический элемент четко описывает свое значение как для браузера, так и для разработчика.
Примеры несемантических элементов: <div> и <span> — эти элементы ничего не говорят о содержании.
Примеры семантических элементов: <form>, <table> и <article> — четко определяют содержание (контент).
Семантические элементы в HTML
Многие веб-сайты содержат код HTML, содержащий такие элементы, как: <div id="nav">, <div class="header">, <div id="footer"> для обозначения навигации, верхнего и нижнего колонтитула.
HTML имеет несколько семантических элементов, которые можно использовать для определения различных частей веб-страницы:
Согласно HTML-документации W3C: "Раздел представляет собой тематическую группу контента, обычно с заголовком".
Примеры использования элемента <section>:
Главы;
Введение;
Новостные материалы;
Контактная информация.
Веб-страница обычно может быть разделена на разделы для введения, содержания и контактной информации.
В этом примере в документе есть два раздела (<section>):
<section>
<h1>W3C</h1>
<p>Консорциум World Wide Web является основной международной организацией по стандартизации World Wide Web. Основанный в 1994 году и возглавляемый Тимом Бернерсом-Ли, консорциум состоит из организаций-членов, штат сотрудников которых работает вместе над разработкой стандартов для Всемирной паутины</p>
</section>
<section>
<h1>W3C Логотип HTML5</h1>
<p>Он сияет так же ярко и смело, как дальновидные, преданные делу веб-разработчики, которыми вы являетесь. Это стандарт стандарта, вымпел прогресса.</p>
</section>
HTML - элемент <article>
Элемент <article> представляет собой автономную композицию в документе, странице, приложении или сайте, которая, в принципе, может независимо распространяться от основной части веб-сайта или использоваться повторно.
Примеры использования элемента:
Сообщения на форуме;
Сообщения в блоге;
Комментарии пользователей;
Карточки товаров;
Газетные статьи.
Пример
Три статьи с независимым самостоятельным содержанием:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome – это веб-браузер, разработанный компанией Google и выпущенный в 2008 году. На сегоднящний день Chrome — самый популярный веб-браузер в мире!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox – это веб-браузер с открытым исходным кодом, разработанный Mozilla. Firefox стал вторым по популярности веб-браузером с января 2018 года.</p>
</article>
<article>
<h2>Яндекс Браузер</h2>
<p>Яндекс Браузер — это бесплатный веб-браузер, разработанный российской технологической корпорацией Яндекс, который использует движок веб-браузера Blink и основан на проекте с открытым исходным кодом Chromium</p>
</article>
Пример 2
Использование CSS для оформления элемента <article>:
Самые популярные браузеры
Google Chrome
Google Chrome – это веб-браузер, разработанный компанией Google и выпущенный в 2008 году. На сегоднящний день Chrome — самый популярный веб-браузер в мире!
Mozilla Firefox
Mozilla Firefox – это веб-браузер с открытым исходным кодом, разработанный Mozilla. Firefox стал вторым по популярности веб-браузером с января 2018 года.
Яндекс Браузер
Яндекс Браузер — это бесплатный веб-браузер, разработанный российской технологической корпорацией Яндекс, который использует движок веб-браузера Blink и основан на проекте с открытым исходным кодом Chromium
<!DOCTYPE html>
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 7px;
background-color: #00b7ff;
color: #000
}
.all-browsers > h1, .browser {
margin: 11px;
padding: 7px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 5px;
font-size: 95%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Самые популярные браузеры</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome – это веб-браузер, разработанный компанией Google и выпущенный в 2008 году. На сегоднящний день Chrome — самый популярный веб-браузер в мире!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox – это веб-браузер с открытым исходным кодом, разработанный Mozilla. Firefox стал вторым по популярности веб-браузером с января 2018 года.</p>
</article>
<article class="browser">
<h2>Яндекс Браузер</h2>
<p>Яндекс Браузер — это бесплатный веб-браузер, разработанный российской технологической корпорацией Яндекс, который использует движок веб-браузера Blink и основан на проекте с открытым исходным кодом Chromium</p>
</article>
</article>
</body>
</html>
Вложение элемента <article> в элемент <section> или наоборот?
Элемент <article> определяет независимое, автономное содержимое.
Элемент <section> определяет раздел в документе.
Можем ли мы использовать определения, чтобы решить, как вложить эти элементы? Нет мы не можем!
Итак, вы найдете HTML-страницы с элементами <section>, содержащими элементы <article>, и элементами <article>, содержащими элементы <section>.
HTML - элемент <header>
Элемент <header> представляет собой контейнер для вводного контента или набора навигационных ссылок.
Элемент <header> обычно содержит:
Один или несколько элементов заголовка (<h1> - <h6>);
Логотип или иконку;
Информация об авторстве.
Заголовок для <article>:
<section>
<h1>W3C</h1>
<p>Консорциум World Wide Web является основной международной организацией по стандартизации World Wide Web. Основанный в 1994 году и возглавляемый Тимом Бернерсом-Ли, консорциум состоит из организаций-членов, штат сотрудников которых работает вместе над разработкой стандартов для Всемирной паутины</p>
</section>
<section>
<h1>W3C Логотип HTML5</h1>
<p>Он сияет так же ярко и смело, как дальновидные, преданные делу веб-разработчики, которыми вы являетесь. Это стандарт стандарта, вымпел прогресса.</p>
</section>
★ Примечание: в одном HTML-документе может быть несколько элементов <header>. Однако его нельзя размещать внутри <footer>, <address> или другого элемента <header>.
HTML - элемент <footer>
Элемент <footer> определяет нижний колонтитул для документа или раздела.
Элемент <footer> обычно содержит:
Информация об авторстве;
Информация об авторских правах;
Контактная информация;
Карта сайта;
Элемент возврата к верхним ссылкам;
Связанные документы.
В одном документе может быть несколько элементов <footer>.
Секция footer в документе:
<footer>
<p>Автор: Имя Автора</p>
<p><a href="mailto:example@ya.ru">example@ya.ru</a></p>
</footer>
HTML - элемент <nav>
Элемент <nav> определяет набор навигационных ссылок.
★ Примечание: обратите внимание, что НЕ все ссылки документа должны находиться внутри элемента <nav>. Элемент <nav> предназначен только для основных блоков навигационных ссылок. Программы чтения с экрана, могут использовать этот элемент, чтобы определить, следует ли пропустить первоначальную визуализацию этого содержимого.
HTML - элемент <aside>
Элемент <aside> определяет некоторое содержимое помимо содержимого, в котором оно размещено (например, боковая панель).
Содержимое <aside> должно быть косвенно связано с окружающим контентом.
Пример
Отображает дополнительный контент помимо контента, в котором он размещен:
<p>Наша компания занимается разработкой веб-сайтов на WordPress, а также на других CMS.</p>
<aside>
<h4>CMS</h4>
<p>Система управления контентом (англ. Content management system , CMS ) — это компьютерное программное обеспечение, используемое для управления созданием и изменением цифрового контента. CMS обычно используется для управления корпоративным контентом и веб-контентом.</p>
</aside>
Пример 2
Использование CSS для оформления элемента <aside>:
Наша компания много лет занимается разработкой веб-сайтов на WordPress, а также на других CMS.
Накопленный опыт наших специалистов в этой сфере поможет вам вывести свой бизнес на новый уровень с помощью цифровых технологий.
Мы предлагаем разработку от самых простых веб-страниц компаний и до самых сложных, таких как интернет-магазины и маркетплейсы.
Для интернет-магазинов и маркетплейсов мы бесплатно подключаем и настраиваем платежные системы!.
Мы всегда рады сотрудничеству и открыты для любых интересных проектов!
<!DOCTYPE html>
<html>
<head>
<style>
.cms {
background-color: #fff;
color: #000;
border: 2px solid #00b7ff;
margin: 5px;
}
.cms aside {
width: 40%;
padding-left: 10px;
margin-left: 10px;
float: right;
font-style: italic;
background-color: #00b7ff;
color: #fff;
}
</style>
<div class="cms">
<p>Наша компания много лет занимается разработкой веб-сайтов на WordPress, а также на других CMS.</p>
<aside>
<h4>CMS</h4>
<p>Система управления контентом (англ. Content management system , CMS ) — это компьютерное программное обеспечение, используемое для управления созданием и изменением цифрового контента.</p>
</aside>
<p>Накопленный опыт наших специалистов в этой сфере поможет вам вывести свой бизнес на новый уровень с помощью цифровых технологий.</p>
<p>Мы предлагаем разработку от самых простых веб-страниц компаний и до самых сложных, таких как интернет-магазины и маркетплейсы.</p>
<p>Для интернет-магазинов и маркетплейсов мы бесплатно подключаем и настраиваем платежные системы!.</p>
<p>Мы всегда рады сотрудничеству и открыты для любых интересных проектов!</p>
</div>
</body>
</html>
HTML - элементы <figure> и <figcaption>
Тег <figure> указывает автономный контент, такой как иллюстрации, диаграммы, фотографии, списки кодов и т. д.
Тег <figcaption> определяет заголовок для элемента <figure>. Элемент <figcaption> может быть размещен как первый или как последний дочерний элемент элемента <figure>.
Элемент <img> определяет фактическое изображение/иллюстрацию.
Пример
Места которые стоит посетить
Нью-Йорк, который часто называют Нью-Йорк Сити или Большое Яблоко, является самым густонаселенным городом в Соединенных Штатах.
