Главная » Руководство по HTML – HTML5 введение » Гид по стилю HTML и правила кодирования

Гид по стилю HTML и правила кодирования

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

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

Всегда декларируйте тип документа

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

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

<pre class="wp-block-syntaxhighlighter-code"><code><!DOCTYPE html></code></pre>

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

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

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

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

Корректно!

   <body>
       <h1>Это заголовок</h1>
       <p>Это параграф.</p>
   </body>

Некорректно

   <BODY>
       <H1>Это заголовок</H1>
       <P>Это параграф.</P>
   </BODY>

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

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

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

Корректно!

<section>
   <p>Это параграф.</p>
   <p>Это еще один параграф.</p>
</section>

Некорректно

<section>
   <p>Это параграф.
   <p>Это еще один параграф.
</section>

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

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

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

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

Корректно!

<a href="https://www.appnet.club/html">Посетите наш раздел - руководство по HTML /a>

Некорректно

<a HREF="https://www.appnet.club/html">Посетите наш раздел - руководство по HTML /a>

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

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

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

Разработчики обычно пишут значения атрибутов в кавычках.
Значения в кавычках легче читать.
Вы ДОЛЖНЫ использовать кавычки, если значение содержит пробелы.

Корректно!

<table class="table">

Некорректно

<table class=table>

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

<table class= table>

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

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

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

Корректно!

<img src="/htm/html5_black.gif" alt="Гифка HTML5" style="width:100px;height:100px;">

Некорректно

<img src="/htm/html5_black.gif">

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

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

Корректно!

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

Некорректно

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

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

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

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

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

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

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

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

Хорошо!

<body>

<h1>Самые популярные браузеры</h1>

<h2>Google Chrome</h2>
<p>Google Chrome – это веб-браузер, разработанный компанией Google и выпущенный в 2008 году. На сегоднящний день Chrome — самый популярный веб-браузер в мире!</p>

<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox – это веб-браузер с открытым исходным кодом, разработанный Mozilla. Firefox стал вторым по популярности веб-браузером с января 2018 года.</p>

<h2>Яндекс Браузер</h2>
<p>Яндекс Браузер — это бесплатный веб-браузер, разработанный российской технологической корпорацией Яндекс, который использует движок веб-браузера Blink и основан на проекте с открытым исходным кодом Chromium.</p>

</body>

Плохо

<body>
<h1>Самые популярные браузеры</h1>
<h2>Google Chrome</h2>
<p>Google Chrome – это веб-браузер, разработанный компанией Google и выпущенный в 2008 году. На сегоднящний день Chrome — самый популярный веб-браузер в мире!</p>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox – это веб-браузер с открытым исходным кодом, разработанный Mozilla. Firefox стал вторым по популярности веб-браузером с января 2018 года.</p>
<h2>Яндекс Браузер</h2>
<p>Яндекс Браузер — это бесплатный веб-браузер, разработанный российской технологической корпорацией Яндекс, который использует движок веб-браузера Blink и основан на проекте с открытым исходным кодом Chromium.</p>
</body>

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

<table>
  <tr>
    <th>Название</th>
    <th>Описание</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Описание цифры 1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Описание цифры 2</td>
  </tr>
</table>

Пример хорошего списка!

<ul>
  <li>Google Chrome</li>
  <li>Mozilla Firefox</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>

Однако W3C рекомендует всегда добавлять теги <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="ru-ru">
<head>
  <meta charset="UTF-8">
  <title>Название страницы</title>
</head>
<body>

Настройка Viewport

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поместите открывающую скобку на ту же строку, что и селектор;
Используйте один пробел перед открывающей скобкой;
Используйте два пробела отступа;
Используйте точку с запятой после каждой пары свойство-значение, включая последнюю;
Используйте кавычки вокруг значений, только если значение содержит пробелы;
Поместите закрывающую скобку на новую строку без начальных пробелов.

Загрузка JavaScript в HTML

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

<pre class="wp-block-syntaxhighlighter-code"><span class="tagcolor"><</span>script<span class="attributecolor"> src<span class="attributevaluecolor">="myscript.js"</span></span><span class="tagcolor">></span></pre>

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

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

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

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

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

Некоторые веб-серверы (Apache, Unix) чувствительны к регистру в именах файлов: "image.jpg" не может быть доступен как "Image.jpg".

Другие веб-серверы (Microsoft, IIS) не чувствительны к регистру: "image.jpg" можно найти как "Image.jpg".

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

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

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

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

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

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

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

Различия между .htm и .html?

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

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

☛ Сущности HTML

Семантические элементы HTML ☚

Поделиться ссылкой