Соглашения по коду HTML(5)

Соглашения по написанию кода HTML

Многие веб-разработчики очень мало знают о соглашениях по написанию кода HTML.

С 2000 по 2010 год многие веб-разработчики перешли с HTML на XHTML.

Разработчики, использующие XHTML, постепенно разработали соглашения по написанию кода HTML.

Для HTML5 нам следует сформировать хорошие соглашения по написанию кода. Ниже приведены несколько рекомендуемых соглашений.

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

Объявление типа документа находится в первой строке HTML-документа:

<!DOCTYPE html>

Если вы хотите использовать нижний регистр, как и в других тегах, можно использовать следующий код:

<!doctype html>

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

Имена элементов HTML5 могут содержать заглавные и строчные буквы.

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

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

Не рекомендуется:

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

Очень плохо:

<Раздел>
  <p>Это абзац.</p>
</SECTION>

Рекомендуется:

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

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

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

Не рекомендуется:

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

Рекомендуется:

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

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

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

Мы можем записать это так:

<meta charset="utf-8">

Или так:

<meta charset="utf-8" />

Косая черта (/) обязательна в XHTML и XML.

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

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

Имена атрибутов HTML5 допускают прописные и строчные буквы.

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

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

Не рекомендуется:

<div CLASS="menu">

Рекомендуется:

<div class="menu">

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

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

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

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

В следующем примере значение атрибута содержит пробелы и не заключено в кавычки, поэтому это не сработает:

<table class=table striped>

В следующем примере используются двойные кавычки, и это правильно:

<table class="table striped">

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

Изображения обычно используют атрибутalt. Когда изображение не может быть отображено, вместо изображения может быть показан этот текст.

<img src="html5.gif" alt="HTML5">

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

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

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

Пробелы можно использовать перед знаком равенства и после него.

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

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

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

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

В HTML-редакторах прокрутка кода влево и вправо неудобна.

Старайтесь, чтобы каждая строка кода была короче 80 символов.

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

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

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

Для отступов используйте два пробела; использование TAB не рекомендуется.

Не используйте ненужные пустые строки и отступы между относительно коротким кодом.

Ненужные пустые строки и отступы:

<body>

  <h1>Пример</h1>

  <h2>HTML</h2>

  <p>
Пример: то, что вы изучаете, — не только технологии, но и мечты.
Пример: то, что вы изучаете, — не только технологии, но и мечты.
Пример: то, что вы изучаете, — не только технологии, но и мечты,
Пример: то, что вы изучаете, — не только технологии, но и мечты.
  </p>

</body>

Рекомендуется:

<body>

<h1>Пример</h1>

<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>

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

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

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

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

Следующий документ HTML5 корректен:

Пример:

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

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

Попробуйте сами »

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

Элемент <html> является корневым элементом документа и используется для описания языка страницы:

<!DOCTYPE html>
<html lang="zh">

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

Опускание <html> или <body> приведёт к сбою в программном обеспечении DOM и XML.

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

Пропустить <head>?

В стандартном HTML5 тег <head> можно опустить.

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

Пример

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

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

</html>

Попробуйте сами »
Note Пропускать тег head в настоящее время всё ещё не рекомендуется.

Метаданные

В HTML5 элемент <title> обязателен; имя title описывает тему страницы:

<title>Пример руководства</title>

Заголовок и язык позволяют поисковым системам быстро понять тему вашей страницы:

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Пример руководства</title>
</head>

HTML-комментарии

Комментарии можно писать в<!--и-->:

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

Более длинные комментарии можно писать в<!--и-->с переносами строк:

<!--
Это более длинный комментарий. Это более длинный комментарий. Это более длинный комментарий.
Это более длинный комментарий. Это более длинный комментарий. Это более длинный комментарий.
-->

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

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

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

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

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

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

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

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Поставьте левую фигурную скобку на ту же строку, что и селектор.
  • Добавьте пробел между открывающей фигурной скобкой и селектором.
  • Используйте два пробела для отступа.
  • Добавьте пробел между двоеточием и значением свойства.
  • Используйте пробел после запятых и символов.
  • Используйте точку с запятой в конце каждого свойства и значения.
  • Используйте кавычки только тогда, когда значения атрибутов содержат пробелы.
  • Поместите закрывающую фигурную скобку на новую строку.
  • Каждая строка должна содержать не более 80 символов.
Note Добавление пробела после запятых и двоеточий — распространённое правило.

Загрузка JavaScript в HTML

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

<script src="myscript.js">

Использование JavaScript для доступа к элементам HTML

Плохое форматирование HTML может вызывать ошибки выполнения JavaScript.

Следующие две инструкции JavaScript выводят разные результаты:

Пример

var obj = getElementById("Demo")

var obj = getElementById("demo")

Попробуйте сами »

Старайтесь использовать единообразные соглашения об именовании для JavaScript в HTML.

См. JavaScript Code Conventions。

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

Большинство веб-серверов (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, где расширения файлов были ограничены тремя символами.

В Unix-системах нет особого ограничения на расширения, поэтому обычно используется .html.

Техническое различие

Если URL не указывает имя файла (например, http://www.example.com/css/), сервер возвращает имя файла по умолчанию. Обычные имена файлов по умолчанию: index.html, index.htm, default.html и default.htm.

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

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

В любом случае полное расширение для HTML — ".html".

Другие расширения