Заголовки

Тег <H1> должен быть один на странице. Этим тегом оформлены корневые разделы. Например Статьи, Новости, Дайджест. Поэтому в материалах он не используется.

Тегом <H2> оформляется заголовок (название) материала. Например, этот материал имеет заголовок «Оформление статей».

Разделы материала оформляются тегами <H3>-<H6>.

Семантическая вёрстка и выделение блоков

Семантическая вёрстка — подход к разметке, который опирается не на содержание сайта, а на смысловое предназначение каждого блока и логическую структуру документа. На сайте используется система выделения смысловых блоков специальными тегами. В шаблоне заложена разметка крупных смысловых блоков тегами <header>, <footer>, <main> и <nav>. В коде страниц используются теги <section>, <article> и <aside>. Эти теги имеют следкющие значения:

• <header> — вводная часть смыслового раздела или всего сайта, обычно содержит подсказки и навигацию. Чаще всего повторяется на всех страницах сайта.
• <footer> — заключительная часть смыслового раздела или всего сайта, обычно содержит информацию об авторах, список литературы, копирайт и так далее. Чаще всего повторяется на всех страницах сайта.
• <main> — основное, не повторяющееся на других страницах, содержание страницы.
• <nav> — навигационный раздел со ссылками на другие страницы или другие части страниц.
• <section> — смысловой раздел, который нельзя отделить от конкретной страницы или документа.
• <article> — самостоятельный блок с целостным контентом, связанный с тематикой сайта, но который может существовать на любой странице или других сайтах. Контент в этом блоке всегда полноценный — статья, пост, обзор и так далее.
• <aside> — блок с дополнительным контентом, необязательно связанным с тематикой сайта. Содержит анонсы, рекламу, ссылки на похожие материалы, прогноз погоды, курс валют и другое. Если убрать этот блок, на сайте ничего не изменится.

Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и профессиональных курсах HTML Academy.

Оглавление

Если материал большой и содержит несколько подразделов, целесобразно упростить пользователю навигацию и в начале каждого материала создать оглавление с якорными ссылками.

Оглавление может быть двух видов: обычный список и сворачиваемый. Обычный список используется преимущественно в Базе знаний. Сворачиваемый - в материалах блога.

Пример обычного оглавления:

Пример сворачиваемого оглавления:

Ссылки

Если нужно сделать ссылку на чужой ресурс, но при этом попросить поисковиков не переходить по ней, использется:

<a target="_blank" href="https://godly.website/" rel="nofollow noreferrer noopener">Godly</a>

NoFollow

Атрибут nofollow указывает поисковой системе или браузеру не переходить по данной ссылке. Относительно поисковых систем, они обычно находят новую информацию, следуя за ссылками, чтобы индексировать ее. Если веб-страница содержит ссылку с атрибутом nofollow, поисковая система проигнорирует эту ссылку и продолжит обработку оставшегося контента страницы. Это может быть полезно, например, когда мы размещаем ссылку на чужой сайт.

NoReferrer

Атрибут noreferrer используется для предотвращения передачи дополнительной информации о переходе по ссылке. Обычно, когда вы переходите по ссылке, браузер и веб-сервер могут видеть некоторую дополнительную информацию, такую как время перехода и IP-адрес. Если ссылка имеет атрибут noreferrer, эта информация не будет передаваться веб-серверу.

NoOpener

Атрибут noopener добавляет дополнительный уровень безопасности при открытии ссылки в новой вкладке. Обычно браузеры передают информацию о предыдущей вкладке в новую, что может создать риски в отношении защиты данных, особенно при проведении онлайн-транзакций или работы с конфиденциальной информацией. При использовании атрибута noopener информация о предыдущей вкладке не будет передаваться в новую, что повышает безопасность.

Для чего применяется

Современные веб-страницы часто используют ссылки, которые открываются в новом окне или вкладке браузера. Для этого применяется атрибут target="_blank". Однако использование этого атрибута может повлечь за собой определенные риски безопасности.

Проблема заключается в том, что страница, на которую ведет ссылка, получает доступ к объекту window родительской страницы через свойство window.opener. Это может быть использовано для фишинговых атак или других манипуляций.

Пример кода:

<a href="http://malicious-website.com" target="_blank">Неожиданно опасная ссылка</a>

В этом случае, если malicious-website.com является злонамеренным сайтом, он может использовать window.opener для перенаправления родительской страницы на другую веб-страницу.

Для предотвращения этой проблемы рекомендуют использовать атрибут rel="noopener noreferrer". Атрибут noopener говорит браузеру «не давай новой вкладке доступ к window.opener», а noreferrer добавляет к этому «не отправляй информацию о реферере».

Пример безопасной ссылки:

<a href="http://example.com" target="_blank" rel="noopener noreferrer">Безопасная ссылка</a>

Возникает вопрос: что если злоумышленник будет использовать инструменты разработчика в браузере и удалять атрибут rel? Теоретически, это возможно, но важно понимать, что при таком сценарии злоумышленник должен иметь уже физический доступ к устройству пользователя. В таком случае, угроза безопасности гораздо выше, и удаление атрибута rel будет наименьшей из проблем.

Таким образом, использование атрибутов target="_blank" и rel="noopener noreferrer" вместе является эффективным способом защиты от определенного типа угроз безопасности в вебе.

Атрибут noreferrer используется для скрытия информации о реферере и включает поведение noopener. Это защищает конфиденциальность и обеспечивает дополнительную безопасность.

Что касается SEO, то в аналитическом программном обеспечении (скажем, Google Analytics) трафик, приходящий по ссылкам с атрибутом rel=”noreferrer”, будет выглядеть как прямой трафик, а не как реферал (без указания источника).