3.1 Тег <main>
HTML5 ввел множество новых семантических элементов, которые помогают разработчикам создавать более структурированные и понятные веб-страницы. Среди них особое место занимают теги <main> и <aside>, которые используются для создания контейнеров для основного и дополнительного контента соответственно.
Тег <main> обозначает основное содержимое документа. Он используется для размещения уникального и ключевого для данной страницы контента. Контент, находящийся внутри тега <main>, должен быть уникальным для каждой страницы и не содержать элементы, которые повторяются на всех страницах, такие как логотипы, боковые панели, навигационные ссылки или футеры.
Синтаксис:
<main>
<!-- Основное содержимое страницы -->
</main>
Пример использования:
<body>
<header>
<h1>Website Header</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
</main>
<footer>
<p>© 2024 Example Website</p>
</footer>
</body>
Основные особенности:
- Содержимое: тег
<main>должен содержать основной контент страницы, который уникален для данной страницы - Расположение: на странице должен быть только один тег
<main> - Доступность: тег
<main>улучшает доступность страницы, помогая вспомогательным технологиям (таким как программы экранного чтения) быстрее находить основное содержимое
Применение:
- Основной контент страницы
- Уникальное содержимое, связанное с текущей страницей
Преимущества:
- Семантическая разметка: помогает поисковым системам и вспомогательным технологиям понять, что является основным содержимым страницы
- Улучшение структуры страницы: четко отделяет основной контент от других частей страницы, таких как заголовки, боковые панели и футеры
Особенности:
- Должен содержать уникальный для страницы контент
- Не должен включать элементы, которые повторяются на других страницах (например, навигационные панели, боковые панели, футеры)
3.2 Тег <aside>
Тег <aside> используется для обозначения дополнительного содержимого, которое связано с основным контентом, но не является частью основного потока документа. Он обычно используется для боковых панелей, содержащих рекламу, ссылки на связанные статьи, биографии авторов и другие вспомогательные элементы.
Синтаксис:
<aside>
<!-- Дополнительное содержимое -->
</aside>
Пример использования:
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#related1">Related Article 1</a></li>
<li><a href="#related2">Related Article 2</a></li>
</ul>
<h3>About the Author</h3>
<p>Short bio of the author.</p>
</aside>
</main>
Основные особенности:
- Содержимое: тег
<aside>содержит дополнительную информацию, связанную с основным контентом, но не является частью основного потока документа. - Расположение: может быть размещен внутри или вне тега
<main>, в зависимости от контекста. - Применение: используется для боковых панелей, рекламных блоков, ссылок на связанные статьи и другой вспомогательной информации.
Применение:
- Боковые панели с дополнительной информацией
- Рекламные блоки
- Ссылки на связанные ресурсы
- Дополнительные материалы, связанные с основным содержимым
Преимущества:
- Семантическая разметка: помогает поисковым системам и вспомогательным технологиям понять, что это вспомогательный контент по отношению к основному содержимому
- Улучшение структуры страницы: четко отделяет дополнительный контент от основного, делая страницу более организованной и легкой для восприятия
Особенности:
- Содержит контент, который связан с основным, но не является его частью
- Может использоваться для боковых панелей, рекламных блоков, подписок и других дополнительных материалов
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ