1 подписчик

🤓 "Создание Веб-сайта:"

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

Семантическая вёрстка или семантический HTML-код — это подход к созданию веб-страниц на языке HTML, основанный на использовании HTML-тегов в соответствии с их семантикой (предназначением), а также предполагающий логичную и последовательную иерархию страницы.

Рассмотрим семантику в основном коде страницы - HTML-документе. Существуют семантические теги, которые помогают браузеру понять, что подразумевает собой код и как его преподнести пользователю:

• <p>...</p> _обозначение абзаца.

• <time>...</time> _обозначение времени.

• <adress>...</adress> _обозначение адреса.

• <abbr title="...">...</abbr> _обозначение аббревиатуры. Когда пользователь наводит мышь на такую аббревиатуру, появляется расшифровка.

• <strong>...</strong> _обозначение важного текста. Текст становится жирным и выделяется интонацией при чтении браузером для, например, незрячих людей.

• <b>...</b> _текст становится жирным, но не выделяется интонацией.

• <em>...</em> _обозначение акцента. Текст становится курсывным и выделяется интонацией.

• <i>...</i> _текст становится курсивным, но не выделяется интонацией.

• <q>...</q> _обозначение цитаты.

• <cite>...</cite> _обозначение автора цитаты.

• <pre>...</pre> _текст между данными тегами будет сохранять свою стилизацию, то есть если вы поставите три пробела, то и в браузере отобразится три пробела.

• <sub>...</sub> _текст отображается в нижней части строки. Удобно для написания химических формул.

• <sup>...</sup> _текст отображается в верхней части строки. Удобно для написания, например, метров кубических.

• <u>...</u> _подчеркнутый тест.

• <code>...</code> _обозначение какого-либо кода.

• <s>...</s> _зачеркнутый тест.

• <wbr> _пустой тег, который обозначение наилучшее место для переноса контента, если тот не помещается на странице (например, браузер открыт на половину экрана).

Существуют также семантические группы. Мы знаем, что можно группировать элементы страницы с помощью div, но браузеру данная группировка ни о чем не говорит. Поэтому лучше использовать 👇:

• <header>...</header> _обозначение "головной" части страницы.

• <footer>...</footer> _обозначение нижней части страницы. В основном в такой группе находятся сведения о, например, компании (контакты, адреса).

• <main>...</main> _обозначение основного контента страницы.

• <section>...</section> _обозначения отдельных частей страницы.

• <nav>...</nav> _обозначение группы навигационных ссылок.

Вот такая семантика у HTML кода. Однако это далеко не всё. Мы с Вами еще будем разбираться в доступности страницы 😜🔥

2 минуты

6 февраля 2024