Руководство по стилю HTML

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

Всегда объявляйте тип документа первой строкой документа. Для HTML правильный вариант — <!DOCTYPE html>.

Doctype, который нужно разместить на первой строке.

HTML допускает смешивание заглавных и строчных букв в именах элементов, но рекомендуются строчные: смешанный регистр выглядит плохо, разработчики обычно используют строчные буквы, а строчные буквы чище и легче печатать. Поэтому пишите <p>Это абзац.</p>, а не <P>.

В HTML не обязательно закрывать каждый элемент (например, <p>), но настоятельно рекомендуется это делать. Закрытие каждого тега сохраняет структуру ясной и избавляет от неожиданностей.

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

HTML допускает значения атрибутов без кавычек, но их следует заключать в кавычки: разработчики обычно так делают, значения в кавычках легче читать, а если значение содержит пробелы, кавычки обязательны. Значение с пробелами, написанное без кавычек, работать не будет.

Всегда задавайте атрибут alt для изображений, так как он важен, если изображение не может быть показано. Также задавайте width и height — это уменьшает мерцание, потому что браузер может зарезервировать место под изображение до его загрузки.

HTML допускает пробелы вокруг знаков равенства, но их отсутствие легче читать и лучше группирует данные. Поэтому пишите rel="stylesheet", а не rel = "stylesheet".

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

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

Элемент <title> обязателен в HTML. Он очень важен для поисковой оптимизации (SEO), так как поисковые системы используют его для ранжирования страниц в результатах. Он задаёт заголовок на панели инструментов браузера, имя, используемое при добавлении страницы в закладки, и заголовок в результатах поиска, поэтому делайте его точным и осмысленным.

HTML-страница пройдёт валидацию даже без тегов <html> и <body>, но их всегда стоит добавлять. Пропуск <body> может вызвать ошибки в старых браузерах, а пропуск обоих тегов может привести к сбою программ DOM и XML.

Страница, в которой опущены теги <html> и <body> (не рекомендуется).

Тег <head> тоже можно опустить; браузер добавляет все элементы перед <body> в head по умолчанию. Тем не менее использование тега <head> рекомендуется.

Страница, в которой опущен тег <head> (не рекомендуется).

В HTML закрытие пустых элементов необязательно, поэтому допустимы и <meta charset="utf-8">, и <meta charset="utf-8" />. Если вы ожидаете, что вашу страницу будет читать программное обеспечение XML или XHTML, сохраните закрывающий слэш, так как там он обязателен.

Всегда включайте атрибут lang в тег <html>, чтобы объявить язык страницы. Это помогает поисковым системам и браузерам.

Документ, объявляющий свой язык с помощью lang="en-us".

Для правильной интерпретации и индексации поисковыми системами определяйте как язык, так и кодировку символов (<meta charset="...">) как можно раньше в документе.

Раннее объявление языка и набора символов в head.

Viewport — это видимая пользователю область страницы, меньше на телефоне, чем на компьютере. Включайте мета-тег viewport на каждой странице. Часть width=device-width заставляет ширину страницы следовать экрану устройства, а initial-scale=1.0 задаёт начальный уровень масштабирования.

Мета-тег viewport, который нужно включать на каждой странице.

Пишите короткие комментарии в одну строку, например <!-- Это комментарий -->. Для комментариев, занимающих несколько строк, размещайте <!-- и --> на отдельных строках; длинные комментарии легче читать с отступом в два пробела.

Используйте простой синтаксис для подключения таблицы стилей (атрибут type не нужен). Короткие правила CSS можно писать в одну строку, а длинные правила стоит разбивать на несколько строк: ставьте открывающую фигурную скобку на той же строке, что и селектор, с одним пробелом перед ней, делайте отступ в два пробела, заканчивайте каждое свойство точкой с запятой, заключайте значения в кавычки только если они содержат пробелы, а закрывающую скобку ставьте на отдельной строке.

Используйте простой синтаксис для загрузки внешних скриптов; атрибут type не нужен, например <script src="myscript.js">.

Неаккуратный HTML может вызывать ошибки JavaScript. Поскольку id чувствительны к регистру, getElementById("Demo") и getElementById("demo") обращаются к разным элементам и дают разные результаты.

Два оператора, обращающихся к разным элементам из-за разного регистра в id.

Некоторые веб-серверы (Apache, Unix) считают имена файлов чувствительными к регистру, поэтому london.jpg — это не то же самое, что London.jpg; другие (Microsoft IIS) — нет. Чтобы избежать проблем при переносе между серверами, всегда используйте строчные имена файлов.

HTML-файлы должны использовать расширение .html (.htm тоже допустимо), CSS-файлы — расширение .css, а файлы JavaScript — расширение .js.

Разницы между расширениями .htm и .html нет. Оба обрабатываются как HTML любым браузером и сервером.

Когда URL не указывает имя файла в конце (например, https://prompt-cookbook.com), сервер добавляет имя файла по умолчанию, такое как index.html, index.htm, default.html или default.htm. Если единственное имя по умолчанию сервера — index.html, ваш файл должен называться именно так. Серверы также можно настроить с несколькими именами файлов по умолчанию.