HTML5 Руководство по стилю и соглашения о кодировании
Соглашения о кодировке HTML
Веб-разработчики часто не уверены в стиле кодирования и синтаксисе для использования в HTML.
Между 2000 и 2010, многие веб-разработчики преобразованы из HTML в XHTML.
С помощью XHTML разработчики были вынуждены писать корректный и "хорошо сформированный" код.
HTML5 немного более небрежен, когда дело доходит до проверки кода.
Будьте умны и будущие доказательства
Последовательное использование стиля, облегчает для других, чтобы понять ваш HTML.
В будущем такие программы, как читатели XML, могут захотеть читать ваш HTML.
Использование хорошо сформированного синтаксиса "close to XHTML" может быть умным.
Всегда держите код аккуратным, чистым и хорошо сформированным.
Использовать правильный тип документа
Всегда объявлять тип документа в качестве первой строки в документе:
<!DOCTYPE html>
Если требуется согласованность с тегами нижнего регистра, можно использовать:
<!doctype html>
Использовать имена элементов нижнего регистра
HTML5 позволяет смешивать прописные и строчные буквы в именах элементов.
Рекомендуется использовать имена элементов нижнего регистра, так как:
- Смешивание прописных и строчных имен плохо
- Разработчики обычно используют строчные имена (как в XHTML)
- Нижний регистр выглядят чище
- Строчные легче писать
Плохо:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>
Очень плохо:
<Section>
<p>This is a paragraph.</p>
</SECTION>
Хорошо:
<section>
<p>This is a paragraph.</p>
</section>
Закрытие всех элементов HTML
В HTML5 не нужно закрывать все элементы (например, элемент <p> ).
Рекомендуется закрыть все элементы HTML.
Плохо:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
Хорошо:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</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=striped>
Хорошо:
<table
class="striped">
Атрибуты изображения
Всегда добавляйте атрибут alt к изображениям. Этот атрибут важен, когда изображение по какой-либо причине не может быть отображено. Кроме того, всегда определяйте ширину и высоту изображения. Это уменьшает мерцание, потому что браузер может зарезервировать место для изображения перед загрузкой.
Плохо:
<img
src="html5.gif">
Good:
<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 неудобно прокручивать вправо и влево, чтобы прочитать HTML-код.
Старайтесь избегать строк кода длиной более 80 символов.
Пустые строки и отступы
Не добавляйте пустые строки без причины.
Для удобочитаемости добавьте пустые строки для разделения больших или логических блоков кода.
Для удобочитаемости добавьте два пробела отступа. Не используйте клавишу TAB.
Не используйте ненужные пустые строки и отступы. Нет необходимости отступить каждый элемент:
Ненужные:
<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>
Пример списка:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
Пропуск <html> и <body>?
В стандарте HTML5 тег <html> и тег <body> могут быть опущены.
Следующий код будет проверяться как HTML5:
Пример
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Не рекомендуется опускать <html> и тег <body>.
Элемент <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>This is a paragraph.</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>
Настройка видового экрана
HTML5 ввел метод, позволяющий веб-дизайнерам управлять окном просмотра через тег <meta>.
Видовой экран — это видимая область пользователя веб-страницы. Она варьируется в зависимости от устройства, и будет меньше на мобильном телефоне, чем на экране компьютера.
На всех веб-страницах следует включить следующий элемент <meta> видового экрана:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Элемент видового экрана <meta> предоставляет обозревателю инструкции по управлению размерами страницы и масштабированию.
Ширина = устройство-ширина часть задает ширину страницы, чтобы следовать ширине экрана устройства (который будет варьироваться в зависимости от устройства).
Элемент начального масштаба = 1.0 задает начальный уровень масштабирования при первой загрузке страницы обозревателем.
Ниже приведен пример веб-страницы без мета-тега видового экрана и той же веб-страницы с мета-тегом видового экрана:
Совет: Если вы просматриваете эту страницу с телефоном или планшетом, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.
Комментарии в формате 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">
Короткие правила могут быть записаны сжатыми, на одной строке, вот так:
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.
Использовать имена файлов нижнего регистра
Некоторые веб-серверы (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, где система ограничила расширения до 3 символов.
.HTML "пахнет" операционных систем UNIX, которые не имеют этого ограничения.
Технические отличия
Если URL-адрес не указывает имя файла (например, HTTPS://html5css.ru/CSS/), сервер возвращает имя файла по умолчанию. Общими именами файлов по умолчанию являются index.HTML, index.htm, Default.HTML и Default.htm.
Если сервер настроен только с "index.HTML" в качестве имени файла по умолчанию, файл должен иметь имя "index.HTML", а не "index.htm".
Тем не менее, серверы могут быть настроены с более чем одного имени файла по умолчанию, и обычно можно настроить столько имен файлов по умолчанию, как необходимо.
Во всяком случае, полное расширение для HTML-файлов является. HTML, и нет никаких причин, он не должен использоваться.