Что такое aside в html
Что такое семантическая вёрстка и зачем она нужна
Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном div и span) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.
Семантическая вёрстка — подход к разметке, который опирается не на содержание сайта, а на смысловое предназначение каждого блока и логическую структуру документа. Даже в этой статье есть заголовки разных уровней — это помогает читателю выстроить в голове структуру документа. Так и на странице сайта — только читатели будут немного другими.
Почему семантика важна
Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.
Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей взаимодействовать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте.
Чтобы сайт был выше в поисковиках. Компании, которые создают поисковики, не разглашают правила ранжирования, но известно, что наличие семантической разметки страниц помогает поисковым ботам лучше понимать, что находится на странице, и в зависимости от этого ранжировать сайты в поисковой выдаче.
Классический пример — расписание поезда «Сапсан» в выдаче Google.
Разработчики tutu.ru сверстали таблицу тегом table вместо div и их сниппет оказался в выдаче Google по важному коммерческому запросу.
Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа
Ну и представьте, насколько проще читать вместо
Основные семантические теги HTML
Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег
, который обозначает параграф. При этом теги или не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид.
Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.
Как разметить страницу с точки зрения семантики
Процесс разметки можно разделить на несколько шагов с разной степенью детализации.
Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и профессиональных курсах HTML Academy.
Создание семантической разметки по макету
Навык, без которого фронтенд-разработчикам ну просто никуда.
Сомневаюсь, какие теги использовать
Есть простые правила для выбора нужных тегов.
Как точно не нужно делать
Не используйте семантические теги для украшательств. Для этого есть CSS.
Может показаться, что некоторые теги подходят для того, чтобы сделать страницу покрасивее, подвигать текст или добавить ему интервалов. Но то, что браузер по умолчанию отображает теги как-то, как вам нужно, не значит, что это нужно использовать. Посмотрим на пример.
Здесь сразу несколько ошибок:
использован, чтобы визуально раздвинуть текст. На самом деле этот тег используется для выделения параграфов.
А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.
Поэтому используйте семантические теги по назначению.
Как использовать семантические теги HTML5?
Правильно сверстанный сайт будет лучше ранжироваться поисковыми роботами и с большей вероятностью попадет на первые страницы поисковых систем.
И если для вас это важно, то предлагаю почитать статью, в которой я объясню, как использовать семантические теги.
Что такое семантические теги
Это теги, которые предназначены для того, чтобы компьютерные программы (поисковые системы, сборщики информации, речевые браузеры и т.д.) понимали, какой тип информации заложен в данных тегах.
Проще говоря, это как таблички в супермаркетах, которые указывают, где и какой находится отдел. Таким образом клиент быстрее найдет то, что ему нужно.
И если на вашем сайте будут такие же правильно расставленные таблички в виде тегов, поисковым роботам не составит труда найти информацию, которую запросил пользователь, и вывести в результат именно ваш сайт.
Семантика HTML относится к синтаксису, который делает HTML более понятным за счет лучшего определения различных разделов и макета веб-страниц. Она делает веб-страницы более информативными, позволяя браузерам и поисковым системам лучше ориентироваться на сайте.
Список новых тегов в HTML5
Если вдруг вы еще не знакомы с новыми тегами HTML5, предлагаю быстренько пробежаться и познакомиться
Как использовать семантические теги
На самом деле ничего сложного в использовании нет, главное – применять теги там, где они будут лучше всего отражать суть контента.
Давайте разберем простой пример:
Если внимательнее изучить структуру, вроде как понятно, что
Чтобы исправить ситуацию, давайте сверстаем страницу, используя семантические теги.
Ну или например блок статьи.
Тут даже без особых знаний верстки можно сразу определить, что это за блок и какая у него роль. И теперь вам не нужно добавлять атрибут id или class, чтобы хоть как-нибудь обозначить элемент на странице.
И напоследок давайте пройдемся по некоторым тегам, к которыми могут возникнуть вопросы.
Возможно, у вас сразу возник вопрос: “В чем разница между этими тегами?”
Оба служат для разделения контента путем группировки логически связанных элементов и могут использоваться как взаимозаменяемые. Вопрос только в том, в какой ситуации.
Если в пример взять статью, то обычно используют теги в таком порядке
Думаю суть уловили.
И если попробуем поменять теги местами,
Его можно не только использовать как подвал страницы, как может показаться на первый взгляд, но и добавить, например, в нижнюю часть статьи, где будет информация об авторе, дате публикации или какие-то ссылки.
То же самое можно сказать и про этот тег. Его можно располагать в начале страницы, над основным контентом, или в секции – размещать в нем, например, заголовок или навигацию.
Предназначен для контента, который не является частью основного потока на сайте, однако все равно имеет к нему какое-то отношение. Обычно выступает в качестве боковой панели к вашему основному содержимому.
Обычно располагается около тега
Заключение
Я думаю, вы поняли, что использовать семантические теги не так уж и сложно. Главное – понять, где их применять и зачем 🙂
Если подвести итог, можно определить два основных плюса:
На этом всё. Надеюсь, у вас появилось представление о том, зачем нужны семантические теги и как их использовать.
Узнать больше о новых элементах HTML5 можно тут:
w3schools – предоставляет простое и ясное описание многих html-элементов и того, как/где их следует использовать.
MDN – также предоставляет отличное описание всех элементов HTML + углубляется в каждый из них.
Очередной гайд по HTML-элементам, которые можно использовать в каждом проекте
Основной контент страницы и элемент main
На любой странице мы можем найти основной контент. Он будет отличаться от страницы к странице, но точно не будет повторяться. Например, как на сайте Smashing Magazine.
На странице «Our Enchanting Smashing Articles» отображается список статей, а на странице «Growing UX Maturity: Finding A UX Champion And Demonstrating ROI (Part 1)» мы уже видим текст статьи.
Но выделенная область на изображениях одна, которая называется основное содержимое или основной контент. Разметить данную область следует с помощью элемента main.
Дополнительный контент к основному и элемент aside
Кроме основного контента на странице могут существовать области, которые тематически связаны с ним. Они дополняют основной контент, но если их удалить со страницы, то понятность контента не пострадает.
Например, на сайте Lenta.ru на странице с новостью “Непобежденный Джошуа
научится хранить молодость у Роналду” есть блок “Материалы по теме”.
Блок содержит статью о Криштиану Роналду, который упоминался в тексте основного контента, т.е создается тематическая связь, поэтому элемент можно разметить элементом aside.
Также на этой странице элементом aside можно разметить блок «Ссылки по теме», потому что все ссылки тематически связаны с контентом.
Тематически сгруппированный контент и элемент section
Элемент section помогает нам выделить разделы страницы. Раздел в этом контексте — это тематически сгруппированный контент, смысл которого определяется заголовком. Исходя из определения важно дать объяснение термину заголовок. Заголовок — это текст, дающий «имя» информации.
Чтобы лучше объяснить, я приведу несколько примеров. Рассмотрим блок “News” на сайте BBC.
В первую очередь важно найти заголовок. Блок содержит текст “News”, который «дает имя» — «News» для 3 новостей, находящихся рядом. Поэтому эта структура является отличным примером раздела.
Далее рассмотрим блоки, отображающие информацию о тарифах на сайте Patreon.
Теперь надо найти заголовок. В этом примере элементы “Lite”, “Pro” и “Premium” являются заголовками. Почему? Представим, что я с кем-то обсуждаю тарифы и скажу: “тариф Pro”, то мой собеседник сразу поймет, о каком блоке я говорю и какую информацию он содержит. Получается, что “тариф Pro” это «имя».
Теперь у нас есть заголовок и есть информация, как и в предыдущем примере, их можно сгруппировать элементом section.
Последним пример мы рассмотрим на сайте PiterCSS, где находится блок с информацией о докладе.
Снова находим заголовок. Здесь это название доклада, которое объединяет остальную информацию о докладе и докладчике. Далее сгруппирую ее и заголовок элементом section.
Я надеюсь мне удалось передать моё правило для использования элемента section. Ищем заголовок и контент, относящийся к нему и группируем элементом section. И важно заметить, что раздел не может существовать без заголовка, поэтому элемент section обязательно должен содержать один из элементов h1-h6.
Независимые области страницы и элемент article
Элементом article следует выделять на странице независимые области, которые можно вынести из своего логического окружения. Этот элемент часто путают с элементом section, поэтому я на примерах хочу показать разницу.
На сайте BBC Sport существует блок с турнирной таблицей второй лиги чемпионата Англии.
Теперь удалю всю окружающую информацию.
Я удалил все на странице, но по-прежнему понимаю, что делает блок, а именно показывает турнирную таблицу. Получается, удаление элемента из своего логического окружения никак не повлияло на него.
Теперь возьму блок с информацией о тарифе «Pro» на сайте Patreon и удалю все оставшиеся элементы.
Я понимаю, что это блок с информацией о тарифе «Pro». Отлично. Но это тариф какого продукта? Что мне с ним делать? Непонятно.
Получается, удаление блока из своего логического окружения повлияло на него. Я, как пользователь, перестал понимать, что мне делать с этим блоком. Если я встрою его на другой сайт, то он будет выглядеть «чужеродным».
Именно в этом кроется существенная разница между элементами section и article. Это очень тонкая грань, но смысл заключается в том, что если элемент не «теряется» при удалении окружающего контекста, то его следует разметить элементом article. А если теряется, то перед нами элемент section.
Навигация и элемент nav вместе с элементами ol и ul
Для выделения навигации на странице, нам следует использовать элемент nav. Но этого недостаточно. Часто нам требуется сгруппировать пункты с помощью списка. Для этой задачи подходят элементы ol и ul. Но как сделать выбор между ними?
Исходя из этого вопроса, я рассмотрю два типа навигации, а именно: навигацию со строгим порядком пунктов и нестрогим.
Строгий порядок пунктов и элемент nav вместе с ol
Популярным примером навигации, где порядок элементов строгий являются хлебные крошки на сайте Мвидео.
Почему я называю эту навигацию со строгим порядком пунктов? Если поменять пункты местами, то навигация перестает соответствовать структуре сайта. Например, поменяю местами пункты
“Главная” и “Смартфоны и связь”.
Кроме хлебных крошек, к данному типу навигации можно отнести пагинацию.
Нестрогий порядок пунктов и элемент nav вместе с ul
Примером такой навигации является меню на сайте Мвидео.
Снова поменяю пункты местами. Например, пункты «Все акции» и «Скидки до 80%» добавлю в конец списка:
Введение к контенту и элемент header
В интернете существует мнение, что элемент header следует использовать для разметки “шапки” сайта. Мне это определение совсем не нравится, потому что оно не отражает полностью картину.
Да, мы можем использовать элемент header для разметки «верхней» части сайта, но также мы можем использовать его внутри элементов section, article, main, aside.
Элемент header внутри элементов main, aside, section и article
Когда мы вкладываем элемент header в элементы main, aside, section и article, то он начинает описывать вступительную информацию этого элемента.
Например, на сайте Smashing Magazine элемент header описывает введение для основного содержимого страницы, которое размечено элементом main.
Элемент группирует заголовок «Our Enchanting Smashing Articles» и вводный текст. Таким образом мы получаем введение к статьям, которые идут дальше.
В разделе с последними публикациями на главной странице Smashing Magazine элементом header можно объединить дату публикации, заголовок и имя автора публикации. В этом случае элемент header находится внутри элемента article.
На сайте конференции PiterCSS элементом header можно объединить заголовок и текст с призывом стать спонсором, которые находятся внутри элемента section.
Элемент header внутри элемента body
Кроме вступления к отдельным элементам, мы можем разметить его и для всего сайта в целом. Для этого нам требуется вложить элемент header в элемент body.
Например, как на сайте Smashing Magazine, где элементы header объединены логотип, навигация и поиск.
В общем случае, мы спокойно можем использовать элемент header, когда нам требуется разметить «введение» к контенту либо элемента body, либо элементов main, aside, section и article.
Второстепенная информация и элемент footer
Мне кажется, что элемент footer собрат по несчастью элемента header. Если второй советуют использовать для «шапки», то первый для «подвала».
Элемент footer подходит для разметки второстепенной информации, которая относится к связанному с ним контенту. Обычно элемент следует после контента элемента, но это не обязательное условие, и его можно добавить перед контентом.
Как и в случае с элементом header, элемент footer можно использовать в нескольких вариантах.
Элемент footer внутри элементов article, aside и section
На сайте tutsPlus элементом footer группируют информацию об авторе, дату и категорию публикации. В этом случае элемент footer находится внутри элемента article.
Элемент footer внутри элемента body
Как я сказал выше, второстепенная информация существует также и для сайта в целом. В этом случае данная область должна повторяться на всех страницах.
Например, на сайте Smashing Magazine в элементе footer отображаются хештеги, второстепенная навигация.
Контактная информация и элемент address
По моим наблюдениям данный элемент является одним из наиболее неиспользуемых, хотя контактная информация есть на каждом сайте. С помощью элемента address можно разметить адрес, телефон, ссылки на соц. сети, итп.
Например, на сайте Мвидео элементом address следует разметить блок с телефоном и соц.сетями.
Заключение
Я надеюсь, что мне удалось хотя немного показать разнообразие случаев, когда мы можем использовать различные HTML-элементы. Надеюсь, вы попробуйте использовать этот набор элементов в своих проектах.
Если вам понравилось, то, пожалуйста, используйте элемент address. Мне кажется, он незаслуженно забыт. Также для тех, кто хочет спросить «Зачем это надо?», у меня один ответ — просто прикольно.
Обновление от 18.03.2021: А если хочется серьезного ответа, то Вадим Макеев рассказал его в докладе «Семантика для циников»
Что такое aside в html
Время чтения: меньше 5 мин
Обновлено 20 сентября 2021
Кратко
Пример
Для примера возьмём дополнительный блок на сайте с личным блогом. Основным контентом будет считаться список статей или отдельная статья. Блок с последними комментариями прямого отношения к основному контенту не имеет — комментарии могут быть оставлены не под текущей статьёй.
Как пишется
Как это понять
В этот тег оборачивается контент, не обязательный для понимания основной информации на сайте: виджеты с оценкой, поиск по сайту, список тем и рубрик.
Атрибуты
Подсказки
Holy Grail Layout
Отличный пример классической вёрстки базовой разметки документа — когда в верхней и нижней части располагаются блоки «шапки» и «подвала» соответственно, а между ними — три колонки: с основным контентом посередине и дополнительным — по краям слева и справа. На заре развития веб-технологий такая вёрстка была достаточно нетривиальной: было сложно добиться равной (нефиксированной) высоты этих колонок независимо от количества контента, т. е., чтобы их высота подстраивалась под высоту колонки с максимальным содержимым. Верстальщики даже дали этой раскладке название «Святой Грааль».
На практике
Realetive
🛠 Самый простой вариант — наш сайт, имеющий две колонки (на десктопных и планшетных экранах): правую — с основным контентом, и боковую левую — с навигацией. Вот как раз эта область не имеет прямого отношения к самому содержимому статьи, но отлично дополняет пользовательский опыт: поможет выбрать новый документ или что-то найти (т. к. в этом блоке располагается навигация и поиск).
HTML тег a
Тег используется для создания гипертекстовой ссылки. Гиперссылка может быть на другую веб-страницу, на какое-либо место внутри веб-страницы, на любой документ, на электронный адрес или вообще на любое место или объект в сети.
По умолчанию все браузеры отображают ссылки следующим образом:
В качестве ссылки может выступать не только текст, но и любой другой HTML элемент, который может быть расположен в теле документа, если его разместить внутри элемента .
Наиболее важным атрибутом является атрибут href, который определяет адрес ссылка.
Атрибуты download, hreflang, media, rel, target и type использовать нельзя, если не определен атрибут href.
Страница, на которую указывает ссылка, открывается в том же окне браузера, что и страница с этой ссылкой, если не указать особо.
Чтобы определить элемент внутри страницы, к которому будет осуществлён переход по ссылке, нужно использовать глобальный атрибут id, указав его у соответствующего элемента:
После этого, чтобы перейти к нему, в значении атрибута href тега необходимо указать значение атрибута id (идентификатор) с символом решетки (#) перед ним. Если элемент к которому будет сделан переход находится на той же самой странице, то адрес страницы в атрибуте href можно опустить, написав только идентификатор.
Разница между HTML 4.01 и HTML5
В HTML 4.01 тег может быть либо анкором, либо гиперссылкой. В HTML5 тег — всегда гиперссылка, однако, если у него не определен атрибут href, то он считается всего лишь «заполнителем» для гиперссылки.
В HTML5 были добавлены новые атрибуты и некоторые атрибуты, допустимые в HTML 4.01, удалены.