ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI W3.CSS TypeScript Как сделать? СПРАВОЧНИКИ БОЛЬШЕ 🔍 ◑ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих. W3Schools на русском

Ua En Es De Fr

HTML5 Гид по стилю

❮ Prev Next ❯

HTML. Как правильно писать код? Соглашение по кодированию

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

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

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

Всегда указывайте тип документа первой строкой в вашем файле.

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

<!DOCTYPE html>

Если вам нужна согласованность с тегами в нижнем регистре, можно использовать:

<!doctype html>

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

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

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

  • Смешивание верхнего и нижнего регистра ухудшает читаемость
  • Разработчики обычно используют строчные названия (как в XHTML)
  • Строчный регистр выглядит аккуратнее
  • Строчные буквы проще и быстрее набирать

Плохо:

<SECTION>
  <p>Это параграф.</p>
</SECTION>

Очень плохо:

<Section>
  <p>Это параграф.</p>
</SECTION>

Хорошо:

<section>
  <p>Это параграф.</p>
</section>

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

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

Но W3C рекомендует закрывать все HTML элементы.

Плохо:

<section>
  <p>Это параграф.
  <p>Это параграф.
</section>

Хорошо:

<section>
  <p>Это параграф.</p>
  <p>Это параграф.</p>
</section>

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

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

Разрешается:

<meta charset="utf-8">

Также разрешается:

<meta charset="utf-8" />

При этом закрывающая косая черта (/) НЕОБХОДИМА в XHTML и XML.

Если вы ожидаете, что XML‑приложения будут обращаться к вашей странице, стоит сохранять закрывающую косую черту!

Используйте названия атрибутов в нижнем регистре

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

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

  • Смешивание верхнего и нижнего регистра ухудшает восприятие
  • Разработчики обычно используют строчные названия (как в XHTML)
  • Строчный регистр выглядит аккуратнее
  • Строчные буквы проще и быстрее набирать

Плохо:

<div CLASS="menu">

Хорошо:

<div class="menu">

Значения атрибутов в кавычках

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

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

  • Разработчики обычно пишут значения атрибутов в кавычках (как в XHTML)
  • Значения в кавычках легче читать
  • Если значение содержит пробелы, вы ОБЯЗАНЫ использовать кавычки

Очень плохо:

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

<table class=table striped>

Плохо:

<table class=striped>

Хорошо:

<table class="striped">

Атрибуты изображения

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

Плохо:

<img src="html5.gif">

Хорошо:

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

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

HTML5 допускает размещение пробелов вокруг знаков равенства. Однако код легче читать, когда элементы и их значения записаны компактно и сгруппированы вместе.

Плохо:

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

Хорошо:

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

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

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

Старайтесь избегать строк длиной более 80 символов.

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

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

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

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

Не используйте лишние пустые строки и отступы. Нет необходимости делать отступы для каждого элемента:

Не желательно:

<body>

  <h1>Famous Cities</h1>

  <h2>Tokyo</h2>

  <p>
    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
  </p>

</body>

Лучше:

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>

</body>

Пример таблицы:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

Пример списка:

<ul>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ul>

Опускать ли <html> и <body>?

В HTML5 тег <html> и тег <body> могут быть опущены (не указаны).

Следующий код без явного указания тега body будет считаться валидным согласно спецификации HTML5:

Пример

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>Это параграф.</p>
Попробуйте сами »

Однако мы не рекомендуем опускать теги <html> и <body>.

Элемент <html> указывает начало загрузки HTML‑документа. Это также рекомендуемое место для указания языка страницы:

<!DOCTYPE html>
<html lang="en-US">

Объявление языка страницы имеет большое значение для программ доступности (скринридеров) и поисковых систем.

Опускание тега <html> или <body> может нарушить структуру DOM и работу XML‑приложений.

Опускание тега <body> также может вызвать ошибки в старых браузерах (например, IE9).

Опускать ли <head>?

В HTML5 тег <head> также может быть опущен.

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

Вы можете упростить HTML, опуская тег <head>:

Пример

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
  <h1>This is a heading</h1>
  <p>Это параграф.</p>
</body>

</html>
Попробуйте сами »

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

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

Метаданные

Элемент <title> обязателен в HTML5. Необходимо указывать название страницы как можно точнее и содержательнее (в соответствии с её контентом). Это помогает поисковым системам находить нужную информацию на сайте:

<title>HTML5 Syntax and Coding Style</title>

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

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

Настройка окна просмотра — Viewport

В HTML5 появился механизм, который позволяет веб‑дизайнерам управлять окном просмотра с помощью тега <meta>.

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

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

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

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

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

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

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

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


Пример без метатега viewport

Без метатега viewport

Пример из метатегом viewport

С метатегом viewport

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

Краткие комментарии должны быть написаны на одной строке:

<!-- Это комментарий -->

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

<!--
  Это пример длинных комментариев. Это пример длинных комментариев.
 Это пример длинных комментариев. Это пример длинных комментариев.
Это пример длинных комментариев. Это пример длинных комментариев.
-->

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

Таблица стилей

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

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

Краткие правила стиля могут быть написаны кратко:

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

Длинные правила стиля лучше писать на нескольких строчках:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Размещайте открывающую фигурную скобку на той же строке, что и селектор
  • Используйте один пробел перед открывающей скобкой
  • Делайте отступ в два пробела
  • Ставьте точку с запятой после каждой пары «свойство: значение», включая последнюю
  • Всегда используйте кавычки вокруг значений, если они содержат пробелы
  • Закрывающую скобку размещайте на новой строке, без лишних пробелов
  • Избегайте строк длиной более 80 символов

Подключение JavaScript в HTML

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

<script src="myscript.js">

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

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

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

Пример

var obj = getElementById("Demo")

var obj = getElementById("demo")
Попробуйте сами »

Посетите раздел JavaScript Гид по стилю на нашем сайте W3Schools на русском.

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

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

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

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

Если вы перейдёте с сервера, не чувствительного к регистру, на сервер, который чувствителен к регистру, даже небольшие ошибки могут «сломать» ваш сайт.

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

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

HTML‑файлы всегда должны иметь расширение .html или .htm.

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

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

Разница между .htm и .html

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

Отличия носят культурно‑исторический характер:

.htm «родом» из ранних систем DOS, где расширение файла ограничивалось тремя символами.

.html связано с операционными системами Unix, в которых такого ограничения не существовало.

Технические отличия

Если URL‑адрес не указывает имя файла (например, https://www.w3schools.com/css/), сервер возвращает файл по умолчанию. Наиболее распространённые имена файлов по умолчанию — index.html, index.htm, default.html и default.htm.

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

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

В любом случае полное расширение для HTML‑файлов — .html, и нет никаких причин не использовать именно его.

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

❮ Prev Next ❯