Руководство по стилям и соглашениям кода HTML(5)

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

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

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

Через XHTML разработчикам пришлось писать эффективный «правильный» код.

HTML5 делает проверку кода более лояльной.

Через HTML5 вам нужно создать свои:Лучшие практики, руководства по стилю и соглашения по коду.

Интеллектуально и с гарантией будущего

Логичное использование стилей делает HTML других людей легче понять и использовать.

В будущем программы, такие как XML читатели, могут потребовать чтения вашего HTML.

Использование хорошо форматированной «приблизительно XHTML» грамматики делает код более умным.

Комментарий:Всегда поддерживайте ваш стиль умным, чистым, простым и хорошо форматированным.

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

Всегда указывайте тип документа в первой строке документа:

<!DOCTYPE html>

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

<!doctype html>

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

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

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

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

Не очень хорошо:

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

Плохо:

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

Неплохо:

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

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

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

Мы рекомендуем закрыть все элементы HTML:

Это выглядит плохо:

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

Это выглядит неплохо:

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

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

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

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

<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" style="width:128px;height:128px">

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

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

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

Пробелы с обеих сторон от знака равенства являются допустимыми:

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

Но минимизация пробелов удобнее для чтения Но без избыточных пробелов удобнее читать, и лучше группирует сущности:

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

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

При использовании HTML-редактора неудобно читать код HTML с помощью прокрутки влево и вправо.

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

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

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

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

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

Не используйте избыточные пустые строки и отступы.

Необходимо:

<body>
  <h1>Известные города</h1>
  <h2>Токио</h2>
  <p>
    Токио - это столица Японии, центр Большого Токио,</br>
    и наиболее населенный мегаполис в мире.
    Это место правительства Японии и императорского дворца,</br>
    и родина императорской семьи Японии.
  </p>
</body>

Лучше:

<body>
<h1>Известные города</h1>
<h2>Токио</h2>
<p>
Токио - это столица Японии, центр Большого Токио,</br>
и наиболее населенный мегаполис в мире.
Это место правительства Японии и императорского дворца,</br>
и родина императорской семьи Японии.
</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>ЛондонA</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="en-US">

Для приложений с возможностью доступа (экранные читатели) и поисковых систем, важно объявление языка.

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

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

Пропуск <head>?

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

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

Пропуск <head> тега позволяет уменьшить сложность HTML:

Пример

<!DOCTYPE html>
<html>
<title>Название страницы</title>
<body>
  <h1>Это заголовок</h1>
  <p>Это абзац.</p>
</body>
</html>

Попробуйте это лично

Комментарий:Для веб-разработчиков метод опускания тегов незнаком. Создание правил требует времени.

Метаданные

Элемент <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>

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

Короткие комментарии должны писаться на одной строке, с пробелом после <!-- и перед -->:

<!-- This is a comment -->

Длинные комментарии, распространяющиеся на несколько строк, должны писаться на отдельных строках через <!-- и -->:

<!-- 
  Это пример долгого комментария. Это пример долгого комментария. Это пример долгого комментария.
  Это пример долгого комментария. Это пример долгого комментария. Это пример долгого комментария.
-->

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

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

Используйте простую грамматику для ссылки на таблицу стилей (параметр 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 символов в строке.

Комментарий:Добавление пробела после запятой или точки с запятой - это общее правило для всех типов письма.

Загрузка JavaScript в HTML

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

<script src="myscript.js">

Доступ к HTML элементам через JavaScript

Следствием использования "нечистого" стиля HTML является возможность возникновения ошибок в JavaScript.

Эти два JavaScript statements приводят к различным результатам:

var obj = getElementById("Demo")
var obj = getElementById("demo")

Попробуйте это лично

Если возможно, используйте такие же соглашения по именованию, как и в HTML (с JavaScript).

Пожалуйста, посетите руководство по стилям JavaScript.

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

Большинство веб-серверов (Apache, Unix) чувствительны к регистру имён файлов:

Не можете получить доступ к London.jpg через london.jpg.

Другие веб-серверы (Microsoft, IIS) не чувствительны к регистру:

Можете получить доступ к London.jpg через london.jpg или London.jpg.

Если вы используете смешанные регистры, вам нужно поддерживать высокий уровень的一致ности.

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

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

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

Имена файлов HTML должны использовать расширение .html(вместо .htm)

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

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