САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвета HTML c CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML JavaScript HTML Путь к Файлу HTML Глава HTML Макет HTML Адаптивный HTML Компьютерный код HTML Объекты HTML Символы HTML Кодировка HTML URL Кодирование HTML XHTML

HTML Формы

HTML Формы HTML Элементы формы HTML Тип ввода HTML Атрибуты ввода

HTML5

HTML5 Введение HTML5 Поддержка HTML5 Новые Элементы HTML5 Семантика HTML5 Миграция HTML5 Синтасис

HTML Графика

HTML Canvas HTML SVG HTML Google Карта

HTML Медиа

HTML Медиа HTML Видео HTML Аудио HTML Объекты HTML YouTube

HTML API

HTML Геолокация HTML Перетаскивание HTML Веб Хранилище HTML Веб Работник HTML СОС

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Сертификат HTML Заключение HTML Возможности

HTML Справочники

HTML Список Тегов HTML Атрибуты HTML Глобальные HTML События HTML Цвета HTML Холст HTML Аудио/Видео HTML Декларации HTML Набор Кодировок HTML URL Код HTML Коды языка HTML Коды стран HTTP Сообщения HTTP Методы Ковертер PX в EM Клавишные комбинации

HTML5 Синтасис



Соглашения о кодировании HTML

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

Между 2000 и 2010, многие веб разработчики преобразуют из HTML в XHTML.

С XHTML, разработчики были вынуждены писать валидные "хорошо сформированный" код.

HTML5 немного более неаккуратный, когда дело доходит до проверки кода.


Является умным и перспективным

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

В будущем такие программы, как XML Reader, могут захотеть прочитать ваш 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>Это параграф.
  <p>Это параграф.
</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=striped>

Хорошо:

<table class="striped">

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

Всегда добавляйте атрибут alt к изображениям. Атрибут 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 неудобно прокручивать вправо и влево для чтения кода HTML.

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


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

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

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

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

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

Необязательно:

<body>

  <h1>Знаменитый город</h1>

  <h2>Tokyo</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="en-US">

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

Исключение <html> или <body> сможет разбить програмное обеспечение DOM и XML.

Исключение <body> может вызвать ошибки в старых браузерах (IE9).


Исключение <head>?

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

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

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

Пример

<!DOCTYPE html>
<html>
<title>Название страницы</title>

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

</html>
Редактор кода »

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

Исключение тегов, не знаком для веб разработчиков. Для этого необходимо время, которое будет определено в качестве ориентира.


Метаданные

Элемент <title> требуется в HTML5. Сделать заголовок как можно более значимым:

<title>Синтаксис HTML5 и стиль кодирования</title>

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

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Синтаксис HTML5 и стиль кодирования</title>
</head>

Настройка области просмотра

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

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

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

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

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

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

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

Вот пример веб страницы без метатега viewport и веб страница с with метатегом 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.


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

Некоторые веб серверы (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://schools3.com/css/), сервер возвращает имя файла по умолчанию. Общие имена файлов по умолчанию index.html, index.htm, default.html и default.htm.

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

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

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