HTML Правила кодирования

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

Вот несколько рекомендаций и советов по созданию хорошего HTML‑кода.

Всегда объявляйте тип документа

Всегда объявляйте тип документа в качестве первой строки в вашем документе.

Правильный тип документа для HTML:

<!DOCTYPE html>

Используйте строчные буквы в именах элементов

HTML допускает смешивание прописных и строчных букв в именах элементов.

Однако мы рекомендуем использовать имена элементов в строчном регистре, потому что:

смешивание прописных и строчных имён выглядит плохо;
разработчики обычно используют строчные имена;
строчные буквы выглядят аккуратнее;
строчные буквы проще набирать.

Хорошо:

<body>
<p>Это абзац.</p>
</body>

Плохо:

<BODY>
<P>Это абзац.</P>
</BODY>

Закрывайте все HTML‑элементы

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

Однако мы настоятельно рекомендуем закрывать все HTML‑элементы, вот так:

Хорошо:

<section>
  <p>Это абзац.</p>
  <p>Это абзац.</p>
</section>

Плохо:

<section>
  <p>Это абзац.
  <p>Это абзац.
</section>

Используйте строчные буквы в именах атрибутов

HTML допускает смешивание прописных и строчных букв в именах атрибутов.

Однако мы рекомендуем использовать строчные имена атрибутов, потому что:

смешивание прописных и строчных имён выглядит плохо;
разработчики обычно используют строчные имена;
строчные буквы выглядят аккуратнее;
строчные буквы проще набирать.

Хорошо:

<a href="https://htmlclub.ru/docs/html/">Посетите наш учебник по HTML</a>

Плохо:

<a HREF="https://htmlclub.ru/docs/html/">Посетите наш учебник по HTML</a>

Всегда заключайте значения атрибутов в кавычки

HTML позволяет использовать значения атрибутов без кавычек.

Однако мы рекомендуем заключать значения атрибутов в кавычки, потому что:

разработчики обычно заключают значения атрибутов в кавычки;
значения в кавычках легче читать;
вы ОБЯЗАНЫ использовать кавычки, если значение содержит пробелы.

Хорошо:

<table class="striped">

Плохо:

<table class=striped>

Очень плохо:

Это не сработает, потому что значение содержит пробелы:

<table class=table striped>

Всегда указывайте alt, width и height для изображений

Всегда указывайте атрибут alt для изображений. Этот атрибут важен, если по какой‑либо причине изображение не может быть отображено.

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

Хорошо:

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Плохо:

<img src="html5.gif">

Пробелы и знаки равенства

HTML допускает пробелы вокруг знаков равенства. Но вариант без пробелов легче читать и лучше группирует сущности.

Хорошо:

<link rel="stylesheet" href="styles.css">

Плохо:

<link rel = "stylesheet" href = "styles.css">

Избегайте длинных строк кода

При использовании HTML‑редактора неудобно прокручивать вправо и влево для чтения HTML‑кода.

Старайтесь избегать слишком длинных строк кода.

Пустые строки и отступы

Не добавляйте пустые строки, пробелы или отступы без причины.

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

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

Хорошо:

<body>

<h1>Знаменитые города</h1>

<h2>Токио</h2>
<p>Токио — столица Японии, центр Большого Токийского района и самый густонаселённый мегаполис в мире.</p>

<h2>Лондон</h2>
<p>Лондон — столица Англии. Это самый густонаселённый город Соединённого Королевства.</p>

<h2>Париж</h2>
<p>Париж — столица Франции. Район Парижа — один из крупнейших населённых центров в Европе.</p>

</body>

Плохо:

<body>
<h1>Знаменитые города</h1>
<h2>Токио</h2><p>Токио — столица Японии, центр Большого Токийского района и самый густонаселённый мегаполис в мире.</p>
<h2>Лондон</h2><p>Лондон — столица Англии. Это самый густонаселённый город Соединённого Королевства.</p>
<h2>Париж</h2><p>Париж — столица Франции. Район Парижа — один из крупнейших населённых центров в Европе.</p>
</body>

Хороший пример таблицы:

<table>
  <tr>
    <th>Имя</th>
    <th>Описание</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Описание A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Описание B</td>
  </tr>
</table>

Хороший пример списка:

<ul>
  <li>Лондон</li>
  <li>Париж</li>
  <li>Токио</li>
</ul>

Никогда не пропускайте элемент <title>

Элемент <title> обязателен в HTML.

Содержимое заголовка страницы очень важно для поисковой оптимизации (SEO)! Алгоритм поисковых систем использует заголовок страницы для определения порядка отображения страниц в результатах поиска.

Элемент <title>:

определяет заголовок в панели инструментов браузера;
предоставляет заголовок для страницы, когда она добавляется в избранное;
отображает заголовок для страницы в результатах поисковых систем.

Поэтому старайтесь сделать заголовок максимально точным и осмысленным:

<title>Руководство по стилю HTML и соглашения о кодировании</title>

Пропускать ли теги <html> и <body>?

HTML‑страница пройдёт валидацию и без тегов <html> и <body>:

Пример:

<!DOCTYPE html>
<head>
  <title>Заголовок страницы</title>
</head>

<h1>Это заголовок</h1>
<p>Это абзац.</p>

Однако мы настоятельно рекомендуем всегда добавлять теги <html> и <body>!

Пропуск <body> может привести к ошибкам в старых браузерах.

Пропуск <html> и <body> также может вызвать сбой в работе ПО для работы с DOM и XML.

Пропускать ли тег <head>?

Тег HTML <head> также можно пропустить.

Браузеры добавят все элементы перед <body> в элемент <head> по умолчанию.

Пример:

<!DOCTYPE html>
<html>
<title>Заголовок страницы</title>
<body>

<h1>Это заголовок</h1>
<p>Это абзац.</p>

</body>
</html>

Однако мы рекомендуем использовать тег <head>.

Закрывать ли пустые HTML‑элементы?

В HTML закрывать пустые элементы необязательно.

Допускается:

<meta charset="utf-8">

Также допускается:

<meta charset="utf-8" />

Если вы ожидаете, что XML/XHTML‑программы будут обращаться к вашей странице, оставляйте закрывающий слэш (/), потому что он обязателен в XML и XHTML.

Добавляйте атрибут lang

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

Пример:

<!DOCTYPE html>
<html lang="ru-RU">
<head>
  <title>Заголовок страницы</title>
</head>
<body>

<h1>Это заголовок</h1>
<p>Это абзац.</p>

</body>
</html>

Метаданные

Чтобы обеспечить правильную интерпретацию и корректную индексацию поисковыми системами, язык и кодировку символов <meta charset="charset"> следует определить как можно раньше в HTML‑документе:

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Заголовок страницы</title>
</head>

Настройка области просмотра

Область просмотра (viewport) — это видимая пользователю область веб‑страницы. Она зависит от устройства: на мобильном телефоне она будет меньше, чем на экране компьютера.

Вам следует включить следующий элемент <meta> на всех ваших веб‑страницах:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Это даёт браузеру инструкции о том, как управлять размерами страницы и масштабированием.

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая будет различаться в зависимости от устройства).

Часть initial-scale=1.0 задаёт начальный уровень масштабирования при первой загрузке страницы браузером.

Вот пример веб‑страницы без мета‑тега viewport и той же веб‑страницы с мета‑тегом viewport:

Без тега meta для области просмотра

С тегом meta для области просмотра

Комментарии в HTML

Короткие комментарии следует записывать в одну строку, вот так:

<!-- This is a comment -->

Комментарии, занимающие более одной строки, следует записывать так:

<!--
  This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example.
-->

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

Использование таблиц стилей

Используйте простой синтаксис для подключения таблиц стилей (атрибут type не обязателен):

<link rel="stylesheet" href="styles.css">

Короткие правила CSS можно записывать сжато, вот так:

p.intro {font-family:Verdana;font-size:16em;}

Длинные правила CSS следует записывать в несколько строк:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

Размещайте открывающую фигурную скобку в той же строке, что и селектор.
Используйте один пробел перед открывающей скобкой.
Используйте отступ в два пробела.
Ставьте точку с запятой после каждой пары «свойство‑значение», включая последнюю.
Используйте кавычки вокруг значений только в том случае, если значение содержит пробелы.
Размещайте закрывающую скобку на новой строке, без начальных пробелов.

Загрузка JavaScript в HTML

Используйте простой синтаксис для загрузки внешних скриптов (атрибут type не обязателен):

<script src="myscript.js">

Доступ к HTML‑элементам с помощью JavaScript

Использование «неопрятного» HTML‑кода может привести к ошибкам в JavaScript.

Эти два оператора JavaScript дадут разные результаты:

Пример:

getElementById("Demo").innerHTML = "Hello";

getElementById("demo").innerHTML = "Hello";

Используйте строчные буквы в именах файлов

Некоторые веб‑серверы (Apache, Unix) чувствительны к регистру в именах файлов: «london.jpg» нельзя открыть как «London.jpg».

Другие веб‑серверы (Microsoft, IIS) не чувствительны к регистру: «london.jpg» можно открыть как «London.jpg».

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

Если вы переходите с сервера, не чувствительного к регистру, на сервер, чувствительный к регистру, даже небольшие ошибки приведут к сбою вашего сайта!

Чтобы избежать этих проблем, всегда используйте строчные буквы в именах файлов!

Расширения файлов

Файлы HTML должны иметь расширение .html (допускается .htm).

Файлы CSS должны иметь расширение .css.

Файлы JavaScript должны иметь расширение .js.

Есть ли разница между .htm и .html?

Между расширениями файлов .htm и .html нет разницы!

Оба будут обрабатываться как HTML любым веб‑браузером и веб‑сервером.

Имена файлов по умолчанию

Когда URL не указывает имя файла в конце (например, «https://htmlclub.ru/»), сервер просто добавляет имя файла по умолчанию, такое как «index.html», «index.htm», «default.html» или «default.htm».

Если ваш сервер настроен только с «index.html» в качестве имени файла по умолчанию, ваш файл должен называться «index.html», а не «default.html».

Однако серверы можно настроить с несколькими именами файлов по умолчанию; обычно вы можете установить столько имён файлов по умолчанию, сколько захотите.