30 необходимых практик для написания современного и эффективного HTML5
Время идёт, но к сожалению, хорошая разметка остаётся редкостью. На маленьких проектах, в особенности, разработчики скорее пренебрегают ей, нежели просто забывают про неё. В этой статье вы узнаете про те 30 необходимых моментов в работе с HTML5, которые помогут вашей вёрстке быть на шаг впереди конкурентов, сохраняя стандарты и при этом быть семантически эффективной.
Перевод статьи 30 Best HTML5 Practices 2018
👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️
HTML5 уже существует много лет, стабилен и поддерживается практически всеми основными браузерами с 2014 года. Далее мы собираемся показать вам список лучших практик, связанных с непосредственно с его разметкой и использованием.
Этот список составлялся с расчётом на создание ясного, поддерживаемого и масштабируемого кода, который успешно использует элементы семантической разметки из HTML5 и который корректно отрендерится во всех поддерживаемых браузерах. Все SEO, CSS и обычные front-end практики JS выходят уже за пределы этой статьи.
A) Главное
01 — Указывайте doctype
Указание doctype должно идти первой строкой вашего HTML документа. Так рекомендуется, если вы используете HTML5 doctype:
<!DOCTYPE html>Который на самом деле активирует стандартный режим во всех браузерах. Как альтернативу, вы можете использовать doctype, который отвечает за используемую HTML/XHTML версию.
02 — Закрывающие теги
Пустые элементы, то есть теги, которые не могут содержать какой-либо контент.
Самозакрывающиеся теги допустимы, но необязательны. Это такие элементы как: <br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>
У обычных элементов никогда не будет самозакрывающихся тегов.
03 — Опциональные теги
Некоторые теги опциональны в HTML5, так как уже предполагается наличие этих элементов. Для примера, если даже вы не поставите <html> тег в разметке, то всё равно подразумевается то, что ваша разметка вложена в <html>. Другие такие же опциональные теги это <head>, <body>. Также для некоторых элементов опциональны только закрывающиеся теги (смотрите ниже).
Обратите внимание
Опциональные закрывающиеся теги
HTML5 допускает опциональные закрывающие теги для некоторых элементов. Вам необязательно их использовать, в Google Style Guide по HTML вообще рекомендуют избегать все опциональные теги.
Однако, эта практика не сильно прижилась и вообще будучи вырванной из контекста она может ввести в заблуждение: W3C подробно рассказали при каких условиях теги становятся и прекращают быть опциональными.
04 — Атрибут lang
Одной из причин регулярного использования опциональных тегов, таких как <html>, являются атрибуты. Это считается лучшей практикой в плане интернационализации, как указывается в W3C, вам всегда надо указывать стандартный язык текста страницы в теге <html>.
05 — Принцип простоты
В целом, HTML 5 был разработан для обратной совместимости с более старыми версиями HTML и XHTML. По этой причине рекомендуется избегать использования XML или его атрибутов. Совершенно нет причин для его применения:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html>Пока вам реально не надо будет написать XHTML документ, нет смысла в его применении и использовании. Также вам не нужны и xml атрибуты, как тут:
<p lang="en" xml:lang="en">...</p>B) Metadata
06 — Тег <base>
Это очень полезный тег, особенно для разработки на локальных серверах. Однако, при неправильном использовании он может выдать нечто странное. По-сути, если вы впишите тег <base href="http://www.example.com/" />, то каждая ссылка на странице будет формироваться относительно неё, если она не указана полностью. Это влечет за собой смену стандартного формирования и поведения некоторых ссылок. Для примера, внутренняя ссылка href="#internal" будет интерпретирована браузером как href="http://www.example.com/#internal"
Также, ссылка на внешнюю страницу сделанная таким способом: href="example.org”, будет интерпретирована браузером как href="http://www.example.com/example.org"
В общем, безопаснее использовать абсолютные пути для ваших ссылок.
07 — Тег <title>
Никогда его не пропускайте. Кроме очевидного факта того, что заголовок вашей страницы не отрендерится в браузере, это довольно сильно негативно повлияет на доступность.
08 — Указывайте кодировку
Не забудьте <meta charset='utf-8'> (ну или ту кодировку, которую вы используете в вашем документе) — так вы убедитесь в том, что ваша страница отображается корректно.
09 — Метатег description
Это не совсем является частью лучших практик HTML, но это стоит упомянуть. <meta name="description"> атрибут это то, что краулеры и поисковые системы подтягивают первым делом при индексации вашей страницы. Если вы указали description, то он появится как описание к вашему сайту.
C) Использование семантически подходящих элементов для разметки вашей страницы
В HTML5 есть несколько элементов, которые помогут вам грамотно расставить и организовать элементы на вашей странице.
Советую почитать на эту тему статью — Секреты использования семантической верстки в HTML5
10 — Элементы <header> и <footer>
На изображении выше простой шаблон, мы видим <header> сверху страницы и <footer> в самом низу. Это то, как выглядит типичная страница, которую вы привыкли видеть, с логотипом вверху страницы и подвалом с несколькими ссылками, а также копирайтами в самом низу. Пользователи WordPress возможно привыкли называть их “masthead” и “colophon”, соответственно.
Однако, HTML5 даёт семантическое значение элементам шапки и подвала. Тег <header> можно использовать в любой секции(<section>) или статье(<article>), для добавления заголовков, публикации даты или другого вводного контента статьи или секции. Также, футер может включать в себя информацию об авторе каждой статьи на странице, ссылки на связанный контент и т.п.
11 — Элемент <nav>
<nav> должен использоваться для навигации по всему сайту. Совершенно нет нужды в указании role, как тут:
<nav role="navigation"></nav>Роль элемента уже подразумевается в самом теге:
<nav></nav>12 — Элемент <main>
Этот элемент был включен в HTML5 и выше, для указания места где находится основной контент страницы, то есть контент, который напрямую относится к главной теме документа. В общем, больше не надо использовать <div>:
<div id="content"></div>Если у нас уже есть куда более точный тег для указания основного контента страницы:
<main id="content"></main>13 — <article>, <section> или <div>?
Мы используем <article> для указания отдельно взятого контента, которому не нужно указывать дополнительный контекст.
Тег <section> используется как для разделения страницы на разные тематические сферы, так и для выделения отдельной статьи. Можно сказать, что <section> это более обобщающий тег, нежели <article> — он определяет связанный контент, но необязательно прямо отдельный, как у выделяющего <article>.
И наконец, мы используем <div> как крайнее средство, в те моменты, когда уже совсем нет подходящих тегов для разметки.
14 — <section> это семантический тег, а не стилистический
Раскрывая тему того, о чем мы говорили в теме выше об элементе <section>, важно подчеркнуть то, что <section> это семантический тег. По сути, в нём должен быть тег заголовка и даже если он там не нужен, то его использование имело бы смысл.
Он не должен использоваться как тег, в который обертывают контент, как контейнер или любой другой исключительно стилистический блок.
Для примера, вот некорректное использование тега <section>:
<section id="wrapper">
<section class="container-fluid">
<div id="main">
</div>
</section>
</section>Вот уже получше, но тут видно сильное злоупотребление тегом <div>:
<div id="wrapper">
<div class="container-fluid">
<div id="main">
</div>
</div>
</div>И вот уже получше:
<body id="wrapper">
<div class="container-fluid">
<main id="main">
</main>
</div>
</body>15 — Элемент <figure>
Этот элемент в основном используется с изображениями, однако у него есть куда более обширный спектр применения. Всё, что связано с темой документа, но оно по каким-то причинам должно быть расположено где-то непонятно где в документе, может быть обернуто в <figure>.
Представьте иллюстрации, таблицы или диаграммы в книге.
Отличительная черта <figure> в том, что он не влияет на структуру документа. Так что его можно использовать для группировки элементов по общим темам, таким как группа изображений с общим <figcaption> или даже частью кода.
16 — Группировка элементов с помощью <figure> по общему <figcaption>
Тег <figcaption> должен располагаться либо сразу после открытия тега <figure>, либо сразу после закрытия тега </figure>.
<figure>
<img src="img1.jpg" alt="First image">
<img src="img2.jpg" alt="Second image">
<img src="img3.jpg" alt="Third image">
<img src="img4.jpg" alt="Fourth image">
<figcaption>Four images related to a topic </figcaption>
</figure>D) Использование подходящих тегов и/или атрибутов в соответствии с их предназначением
17 — Стилизующие теги устарели в HTML5 — используйте CSS
Не используйте <big>, <center>, <strike> — они просто устарели и даже не смейте использовать <blink>, хоть он сам по себе и не устаревший.
Не используйте <hgroup>, он уже давно вышел из употребления.
Не используйте <i> для курсива, <b> для жирного текста или <em> для подчеркивания: назначение для этих тегов было переосмыслено в HTML5.
И вообще, было бы оптимальным решением для каждого, избегать стилистических элементов в HTML разметке, для этого вообще-то есть CSS.
18 — <br> элемент не для разметки
Не используйте <br> для форматирования документа или для добавления пробелов между элементами. В письмах да, можно.
Суть тут в том, что если это может быть отформатировано с помощью margin или padding в CSS, то вам нет смысла использовать <br>. Однако, если вы хотите добавить перенос строки внутри одного и того же элемента, то <br> будет вполне подходящим решением:
<label>Please use the following text area:<br>
<textarea name="loremipsum"></textarea>
</label>19 — Указание типа не очень важно для таблиц стилей и JavaScript файлов
В HTML5 нет нужды в указании типа для <style> и <script>. Все современные браузеры ожидают того, что в таблицы стилей будут в CSS, а скрипты в JavaScript. Вообще всё ещё много кто так делает, так как много популярных CMS добавляют эти атрибуты автоматически, но по сути нет причины этого делать вручную. В общем сделайте так:
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>А не вот так:
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/scripts.js"></script>20 — Используйте атрибут alt для ваших изображений
Это вообще хорошая практика всегда использовать атрибут alt ваших изображений. Этот атрибут делает подпись для ваших изображений в тем моменты, когда их загрузка невозможна в браузере и в довольно значительной степени он используется скринридерами.
21 — Будьте аккуратны при использовании атрибута title
Атрибут title не замена атрибуту alt. alt используется вместо изображения, в то время, как title показывается вместе с изображением, обычно как всплывающая подсказка.
В спецификации HTML5.1 предостерегают от чрезмерного использования атрибута title, из-за недостаточной поддержки браузерами, такими как touch-only в телефонах и планшетах.
Вот подходящий пример использования атрибута title:
<input type="text" title="search">
<input type="submit" value="search">Следующего использования нужно бы избегать:
<a href="text.txt" title="Relevant document">txt</a>
<img src="img.jpg" title="My photo" />Вместо этого, попробуйте должным образом дать название ссылке и использовать атрибут alt для вашего изображения:
<a href="text.txt">Relevant document</a>
<img src="img.jpg" alt="My photo" />E) Читабельность кода и подходы к форматированию
Всё упомянутое в этой категории сугубо субъективно. Каждый front-end разработчик имеет свой подход и это хорошо, хорошо до тех пор пока подход последовательный и осмысленный. В основном, если ваш код ясный и читабельный для других разработчиков, то этого вполне достаточно.
Однако, мы включили несколько основных рекомендаций, которые судя по всему пользуются всеобщим признанием.
22 — Последовательность отступов
Код с полным отсутствием отступов или наличием непоследовательных отступов можно считать нечитабельным. На заметку — Google Style Guide для HTML рекомендует использование двух пробелов для отступов и не использовать табуляцию.
Если бы это был общепринятый формат, то каждый бы форматировал свой HTML код последовательно. Однако, каждый разработчик делает что-то по своему, так что по крайней мере мы должны попытаться что-то делать по общим стандартам: если вы решили использовать 4 пробела или два таба для отступа(пожалуйста, никогда не используйте два таба), сделайте это на каждой строчке вашего HTML кода, хотя бы для понимания другими.
23 — нижний регистр, Заглавный Регистр, ГорбатыйРегистр и КАПС
ГорбатыйРегистр используется в JavaScript и это визуально понятное форматирование в JS. По-этому, лучше всего не использовать его в отрезках кода, которые не в JS.
Заглавный Регистр — только для текста, строк, контента. Хоть это и не является технически неправильным — называть классы или ID заглавным регистром, это всё равно сильно влияет на читабельность.
КАПС — снова, технически всё верно, кроме того, что так принято описывать крик и вообще это визуально неприятно.
нижний регистр — наиболее используемый подход.
24 — Кавычки
Двойные или одинарные? На каждый вариант есть куча аргументов, однако это всё на ваше усмотрение. Делайте как хотите, главное, чтобы всё было последовательно и взаимосвязано.
Хотя одно замечание: HTML допускает одинарные кавычки и это очень удобно при генерации HTML из PHP. Однако, если HTML написан вручную, то это реально вопрос предпочтений. Главное, чтобы вы были последовательны(!)
25 — <pre> и <code>
Обычная практика — использовать элемент <code> с тегом <pre>. <code> сам по себе просто определяет компьютерный код и ничего не делает для сохранения его форматирования, в то время как <pre> (предварительно отформатированный текст), сохранит все переходы строк и отступы.
Помните одну вещь — элемент <pre> сохранит каждый переход на новую строку.
<pre><code>
.container {
margin: 0 auto;
}
</code></pre>Так что этот код отформатируется с пустой строки. Используйте элементы <pre>, как тут:
<pre><nav class="main_nav">
</pre>26 — Мнемоники
Используйте мнемоники с <pre> при отображении HTML кода.
Вам нужно использовать < и > вместо < и >, и " вместо “.
За пределами предварительно отформатированных текстовых блоков, UTF-8 кодировка допускает почти все символы (включая ©, ® и даже смайлики). Однако, обычным делом является избегать &, <, >, “ и ‘ даже за пределами предварительно отформатированных блоков.
27 — Тире или подчеркивание для класса и ID?
Никогда не используйте пробелы в именах классов или ID.
Больше ограничений нет, так что тире или нижнее подчеркивание — это уже на ваш выбор. Тут стоит подметить то, что это предпочтение может зависеть от выбранного редактора. В Notepad++ слово с тире воспринимается как одно слово. В Vim, тире разделяет слово, а нижнее подчеркивание нет. В общем, когда будете принимать решение о том, как именовать классы, ID и тп, учитывайте нюансы своего любимого текстового редактора.
28 — Комментарии
Комментарии могут напрямую влиять на читабельность кода, конечно же в позитивном ключе, когда они используются правильно. У меня есть привычка комментировать закрывающие теги (особенно закрывающий <div>), указывая класс открывающего тега — это значительно упрощает понимание того, какой блок закрылся среди сложенных тегов. Пример:
<div class="myclass">
<div class="nextclass">
...
</div><!-- .nextclass" -->
</div><!-- .myclass -->F) Валидация и минифицирование
29 — Валидация
W3C валидатор устанавливает стандарты индустрии, так что это должно быть первым местом куда вы пойдете проверять валидность вашего кода.
Вы также можете получить исходный код их Nu валидатора.
30 — Минифицирование и комбинирование CSS и JS файлов
У современного сайта обычно больше одного CSS файла. Главные стили, bootstrap или любые другие стили сеток, может быть ещё несколько стилей для плагинов, тем, ну и т.п. Каждый CSS файл делает отдельный HTTP запрос, тормозя загрузку вашего сайта.
Это рекомендуемая практика, в финальном продукте минифицировать и комбинировать все ваши CSS’ки для улучшения времени загрузки. Также вполне обычной является практика хранения неминифицированных файлов, к примеру в папке “css/src”, потому что редактирование и дебагинг минифицированных файлов — ну очень сложное занятие.
Таким же образом рекомендуется минифицировать и комбинировать ваши JavaScript файлы. Также рекомендуется выставлять их в конце документа, сразу над закрывающим тегом </body>, чтобы браузер начал загружать их после обработки всего документа.
Заключение
Я надеюсь на то что вам понравились наши советы по написанию HTML5 и лучшим практикам по front-end разработке.
Источники:
