Как правильно верстать в 2022 году. Часть 1

в 12:19, , рубрики: html, html-верстка, html5, доступность, доступность сайта, Разработка веб-сайтов, семантическая разметка, теги, теги всё равно никто не читает

Вступление

Меня зовут Николай и я Frontend-разработчик. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.

Дело в том, что лишь малая часть современных фронтендеров обращает внимание на работу с HTML и CSS, предпочитая готовые решения, вроде UI-библиотек и систем сеток. Но эти решения неидеальные и приходится дописывать обёртки вокруг них, видоизменять код, переписывать стили и совершать прочие действия для соответствия требованиям проекта. Тут-то и начинаются проблемы: вёрстка местами становится избыточной, стили переназначются через important и с каждым релизом проект всё сложней поддерживать. Я уже не говорю об удобстве использования и доступности. Об этом думают вообще в последнюю очередь.

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

Содержание

Используйте правильные теги.

Как правильно вкладывать теги друг в друга.

Работа с медиаконтентом.

Пишем таблицы на HTML правильно.

a или button? Работа с интерактивными элементами и как выбрать правильный тег.

Различный теги для медиа-контента.

Прекратите писать велосипеды! Как мы можем стилизовать дефолтные HTML-элементы.

Пишем доступные формы.

Избыточная вёрстка. Как облегчить разметку.

Современные фишки HTML и CSS способные облегчить нам жизнь.

Экспериментальные технологии, входящие в стандарт.

Используйте правильные теги

Исторически так сложилось, что HTML служит для описания документов. То есть язык гипертекстовой разметки был придуман для обмена документами (в основном научного характера) и не предназначался для построения сложных веб-приложений и сайтов. Благодаря развитию стандарта стало полегче, но большинство современных разработчиков всё ещё предпочитают <div> в качестве главного тега и засовывают в него любой контент, вплоть до изображений (через background-image). И я прекрасно их понимаю, <div> — очень удобный тег: у него нет встроенных стилей, его можно вкалывать в другие дивы. Чем не кандидат на лучший тег. Но при таком использовании тегов мы теряем главные преимущества HTML:

  • семантику — чёткую структуру контента, где каждый тег говорит о том, зачем он здесь и что ожидается внутри;

  • доступность — HTML может рендериться не только браузером, но и другими инструментами, вроде скрин-ридеров, роботов-поисковиков и т.д. И в наших силах упростить для них парсинг страниц.

Про какие теги нам следует стоит помнить?

Структурные теги документа

Почти любой сайт или приложение можно разбить на 3 большие части: <header>, <main> и <footer>. Сейчас это стало неким стандартом в дизайне. Некоторые части приложения повторяются от страницы к странице, и мы можем выделить их в отдельные части (шапку и подвал).

Шапка — это контент вверху страницы. Там обычно размещается логотип, навигационное меню и другие элементы, которые должны быть доступны пользователю с любой страницы. Тег <header> не обязательно один на странице, он может озаглавливать любую независимую часть (например, быть частью модального окна).

Подвал — нижняя часть сайта, где обычно дублируется навигация и располагаются контакты компании. Также, как и шапка, <footer> может быть не один и использоваться для других независимых частей, помимо страницы.

Тег <main> обычно обозначает место для основного контента, который не повторяется от страницы к странице.

Плохо

<body>
	<div class="header">
		...
	</div>
	<div class="main">
		...
	</div>
	<div class="footer">
		...
	</div>
</body>

Хорошо

<body>
	<header>
		...
	</header>
	<main>
		...
	</main>
	<footer>
		...
	</footer>
</body>

Помимо трёх базовых семантических тегов существует ряд других. Разберём их ниже.

<article>

Это независимый блок на странице, который без внешнего контекста может существовать в рамках других сайтов и сервисов. Это может быть статья в блоге, твит, виджет VK, коментарий к публикации и т.д. Желательно, чтобы у этого блока был заголовок.

<section>

Неотделяемая от основного контента секция на странице. Например, это может быть блок на лендинге. Чаще всего имеет заголовок.

<aside>

Побочный, косвенный контент на странице, находящийся в стороне. Может иметь заголовок и быть не в одном экземпляре. Главная ошибка — использовать его только для боковой панели. Этот тег многогранен и может использоваться для любых блоков, не имеющих основное значение.

<nav>

Блок навигации с ссылками на другие страницы или разделы текущей страницы. Может использоваться только для основной навигации, а не для каждой группы ссылок. Например навигацию в <footer> не имеет смысла упаковывать в <nav>, так как подвал сам по себе предполагает присутствие навигационных элементов. И этот тег не обязательно должен включать в себя список ссылок. Туда может входить навигация любого типа, главное, чтобы она считалась основной.

<address>

В этот тег нужно вкладывать контактные данные. У него по-особенному работает «область видимости» — контактные данные в <address> относятся к ближайшему родительскому блоку <article>, либо к <body>, если он находится вне <article>.

Заголовки

Как и в любом документе на HTML-странице могут содержаться заголовки. По стандарту мы обязаны всегда указывать заголовок первого уровня <h1>. Остальные уровни опциональны, но они должны быть в иерархической последовательности! Это значит, что мы не можем <h3> поставить после <h1>. Чтобы лучше это понять, посмотрим код ниже:

<body>
	<header>
		...
	</header>
	<main>
		<h1> Наша кондитерская самая кондитерская из всех кондитерских </h1>
		...
		<section>
			<h2> Почему наши булочки лучшие? </h2>
			...
				<h3> Мука высочайшего сорта </h3>
				...
				<h3> Много корицы </h3>
				...
					<h4> Корица со Шри-Ланки</h4>
					...
				<h3> Минимум сахара </h3>
				...
			<h4>
		</section>
	</main>
	<footer>
		...
	</footer>
</body>

Как вы видите, заголовки выстраиваются в иерархию и идут один за одним, формируя логичную структуру.

По поводу использования нескольких заголовков <h1>: вы МОЖЕТЕ использовать несколько заголовков первого уровня, если это требуется на странице. Когда-то давно некоторые злые SEO-специалисты настоятельно не рекомендовали так делать, хотя спецификация ничего не говорит на этот счёт. Сейчас мы, конечно, не узнаем действительно ли поисковики снижали сайт в выдаче за использование двух и более заголовков первого уровня, но уже даже многие SEOшники признали, что этот фактор малозначителен при ранжировании сайтов.

Блочные теги

<p>

Простой тег для абзацев, именно для разделения текстовых частей. Не используйте <p> для коротких фраз внутри интерфейса. С точки зрения доступности, этот тег очень крут, дает пользователям с ограниченными возможностями «прыгать» между ними с помощью шорткатов.

<figure> и <figcaption>

Это иллюстрация с необязательной подписью. Во многих книгах изображения подписываются как «Рис. 1 — такой-то объект». Вот это и есть <figure>. Но в рамках HTML назначение этого тега гораздо шире. Мы можем разместить внутри цитату (см. ниже), фрагмент кода, какую-нибудь диаграмму. В общем <figure> — это любой объект с подписью. Подпись размещается внутри тега <figcaption>, который, в свою очередь, вкладывается в <figure>.

<figure>
	<img src="https://example.com/cat.jpg" alt="Сердитый кот">
	<figcaption>Кот, который зол на своего хозяина</figcaption>
</figure>

<blockquote>

Тег для вставки длинных цитат. Может иметь аттрибут cite, в котором указывается URL на источник цитаты, а также хорошо совместим с тегом <figure>, где в <figcaption> можно указать автора и название источника.

<figure>
	<blockquoute cite="https://www.youtube.com/watch?v=ZXsQAXx_ao0">
		Just Do It!
	</blockquote>
	<figcaption>
		Shia LaBeouf, <cite>Motivational Speech</cite>
	</figcaption>
</figure>

<hr>

Одиночный тег для разделения контента. Про него забывают и заменяют на border-bottom, но помимо визуального отображения этот тег несёт семантический смысл — тематическое разделение абзацев.

<pre>

Тег для вывода предварительно отформатированного текста. Имеет ограниченную область использования — ASCII-арт, вывод программного кода. Не рекомендую использовать для других задач, так как тег довольно ненадёжен и непредсказуем. Например, мы потеряем всё форматирование, если сборщик проекта минифицирует HTML.

Списки

Списки в вебе просто везде! Но очень редко их верстают как списки. Например, преимущества компании на лендинге это что? Правильно, список. Они бывают двух видов: упорядоченные и неупорядоченные. Я в этот раздел также добавил список описаний Description list.

<ul>

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

  • cписок ингредиентов для рецепта;

  • преимущества компании;

  • партнёры компании.

<ul>
	<li>Удобная оплата</li>
	<li>Быстрая доставка</li>
	<li>Гарантия в 1 год</li>
</ul>

<ol>

Упорядоченный список применяется тогда, когда нам важен порядок элементов. Например:

  • пошаговая инструкция;

  • этапы работы.

<ol>
	<li>Оформляете заявку</li>
	<li>С вами связывается менеджер для уточнения деталей</li>
	<li>Совершаете оплату</li>
	<li>Ожидаете доставку</li>
</ol>

<dl>, <dd>, <dt>

Списки описаний применяются для формирования списков терминов.

<dl>
	<dt>HTML</dt>
	<dd>Язык разметки гипертекста, с помощью которого формируют контент веб-страницы</dd>

	<dt>CSS</dt>
	<dd>Язык для описания стилей веб-страницы</dd>

	<dt>JS</dt>
	<dd>Язык программирования, часто применяемый для написания веб-приложений</dd>
</dl>

Строчные теги

<b>, <i>, <u>, <s>

Чудесные теги, которые чаще всего используют не по назначению. Они несут исключительно визуальное выделение текста. Если вы сбросите их стили, то они ничем не будут отличаться от обычного текста. В данный момент их можно использовать как теги для дополнительного выделения текста, которое вы оформите с помощью CSS. И да, тег <i> НЕ предназначен для иконок.

<em>

Как и <i> выделяет текст курсивом. Но зачем нам два тега для одного и того же? В том то и дело, что они разные. <i>, как говорилось выше, не несёт никакого семантического смысла, это просто визуальное выделение, а <em> делает акцент на обёрнутом им тексте, который меняет смысл всего предложения. Например:

Я <em>просто обожаю </em>, когда верстальщики используют только дивы.

<strong>

Браузер выделяет текст обёрнутый тегом <strong> полужирным. Но помимо визуального выделения, текст обретает семантический смысл — большую важность по сравнению с остальным текстом вокруг.

<cite> и <q>

Оба тега связаны с цитирований, но применяются в разных случаях. <cite> — тег, в который мы оборачиваем текст, который отсылается к другому документу/произведению/etc.

Больше информации вы сможете найти в стандарте <cite>[ISO-0000]</cite>

<q> похож на <blockquote>, разница лишь в том, что <q> применяется для строчных цитат.

<q cite="https://russian.rt.com/business/news/966657-rubl-dollar-evro">
	Рубль растёт к доллару и евро
</q> — сообщает RT со ссылкой на ФАН.

<code>

Применяется для оформления программного кода внутри текста. Если требуется вывести многострочный блок кода, то лучше использовать <code> в связке с тегом <pre>.

<time>

Тег для обозначения даты и времени. У него может быть атрибут datetime, куда необходимо передать дату и время в формате ISO.

<time datetime="1995-11-24">24 ноября 1995 года</time>

<sub> и <sup>

Используются для добавления в текст индексов и степеней. Удобны для описания формул.

x<sub>1</sub> + x<sub>2</sub> = y<sup>2</sup>
<!-- Икс первый плюс икс второй равно игрек в квадрате -->

<del> и <ins>

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

Вася пришёл домой в
<del><time>19:00</time></del>
<ins><time>23:00</time></ins>

<br>

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

Интерактивные элементы

<details>

Нативный дропдаун прямо в HTML! На самом деле не совсем так. <details> применяется, чтобы скрыть часть информации, которую можно получить, кликнув по кнопке, описанной во внутреннем теге <summary>.

Рубль растет на фоне заявлений Запада о введении санкций против России
<details>
    <summary>Подробнее</summary>
    Согласно данным валютных торгов на Московской бирже, по состоянию
    на 22.40 мск курс доллара находился на уровне 78,7 рубля (-1,6%),
    курс евро снижался до 89,3 рубля (-0,9%).
</details>

Внимание! Данный тег не поддерживается IE и старыми версиями основных браузеров.

Другие интересные теги

<abbr>

Тег для аббревиатур.

<abbr title="HyperText Markup Language">HTML</abbr> — основной язык разметки веб-приложений

<dfn>

Тег для выделения термина. Элемент<p>, пара <dt>/<dd> или <section>, который является ближайшим предком <dfn> считается определением термина.

<p>
	<dfn>JavaScript</dfn> — язык программирования,
	используемый в основных веб-браузерах.
</p>

<kbd>

Используется для выделения названия клавиш в клавиатурных сочетаниях.

Чтобы открыть диспечер задач, нажмите сочетание клавиш
<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Esc</kbd>.

<samp>

Тег для обозначения вывода компьютерной программы. По-умолчанию выводится моноширинным шрифтом.

<p>
Приложение упало с ошибкой:<br>
<samp>404 Неизвестный ресурс</samp>

<var>

Элемент для вывода математических переменных

Для рассчёта расстояния <var>S</var>, необходимо
перемножить скорость <var>V</var> на время <var>t</var>.

<bdi> и <bdo>

Теги, связанные с направлением текста ltr и rtl. Необходимы, когда мы встраиваем в текст, написанный языком в одном направлении, фразу или предложение написанное в другом.

<bdi> изолирует от окружающего текста фрагмент, который может поменять направление (но не обязательно поменяет).

<bdo> в свою очередь, переопределяет направление текста так, что текст внутри тега отображается в другом направление, нежели чем окружающий.

<p dir="ltr">
	Это <bdi>арабское слово</bdi> будет перевёрнуто.
</p>
<!--
	Это оволс еоксбара будет перевёрнуто.
-->

<mark>

Элемент, выделенный по причине его актуальности в определённом контексте. Чаще всего используется для выделения ключевых фраз, введенных пользователем, в результатах поиска. По умолчанию, на текст внутри этого тега применяется жёлтый фон.

<meter>

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

Имеет следующие аттрибуты:

  • min — минимальное значение шкалы;

  • max — максимальное значение шкалы;

  • low — предел, при достижении которого, значение считается низким;

  • optimum — предел, при достижении которого, значение считается оптимальным;

  • high — предел, при достижении которого, значение считается высоким;

  • value — собственно само значение.

<p>Температура воды</p>
<meter value="0" max="100" low="10" high="60">Низкая</meter>
<meter value="30" max="100" low="10" high="60">Нормальная</meter>
<meter value="80" max="100" low="10" high="60">Горячая</meter>
<meter value="100" max="100">Кипяток</meter>

Текст внутри является фолбэком для браузеров, которые не поддерживают этот тег.

<progress>

Тег для отображения индикатора, показывающего ход выполнения задачи. По простому — прогресс-бар.

<progress max="100" value="70">70%</progress>

<wbr>

Одиночный тег, указывающий, в каком месте можно переносить цельную строку. Является аналогом символа ­­&shy;, с той лишь разницей, что не добавляет символ переноса в конце строки.

<ruby>, <rt>, <rp>

Теги, в основном используемые для иероглифов. Не вижу смысла подробно их разбирать. Если интересно, можно почитать здесь.

<big>, <small>, <tt> и прочая эзотерика

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

Заключение части 1

В этой статье ничего не сказано про элементы форм, таблицы, всякий медиа-контент, а также теги <a> и <button>. Об этом в следующих публикациях.

Также, я ничего не сказал по <div> и <span>, которые являются базовыми элементами для вёрстки. Их стоит использовать только в том случае, когда ничто из вышеперечисленного не подошло.

Автор:
Clickrouc

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js