HTML5 Синтаксис
Последовательный, чистый и аккуратный HTML код облегчает другим чтение и понимание вашего кода.
Быть умным и перспективным
Вот некоторые рекомендации и советы по созданию хорошего исходного кода HTML.
Используйте правильный тип документа
Всегда объявляйте тип документа в качестве первой строки в вашем документе.
Правильный тип документа для HTML это:
<!DOCTYPE html>
Используйте имена элементов в нижнем регистре
HTML позволяет смешивать прописные и строчные буквы в именах элементов.
Однако мы рекомендуем использовать имена элементов в нижнем регистре, поскольку:
- Смешивание прописных и строчных имен выглядит плохо
- Разработчики обычно используют имена в нижнем регистре
- Нижний регистр выглядит чище
- Строчные буквы писать проще
Хорошо:
<body>
<p>Это параграф</p>
</body>Плохо:
<BODY>
<P>Это параграф</P>
</BODY>Закрывайте все HTML элементы
В HTML вам не нужно закрывать все элементы (например, элемент <p>).
Однако мы рекомендуем закрыть все HTML элементы, например так:
Хорошо:
<section>
<p>Это параграф.</p>
<p>Это параграф.</p>
</section>Плохо:
<section>
<p>Это параграф.
<p>Это параграф.
</section>Используйте имена атрибутов в нижнем регистре
HTML позволяет смешивать прописные и строчные буквы в именах атрибутов.
Однако мы рекомендуем использовать имена атрибутов в нижнем регистре, поскольку:
- Смешивание прописных и строчных имен выглядит плохо
- Разработчики обычно используют имена в нижнем регистре
- Строчные буквы выглядят чище
- Строчные буквы писать проще
Хорошо:
<a href="https://schoolsw3.com/html/">Посетите HTML Учебник</a>Плохо:
<a HREF="https://schoolsw3.com/html/">Посетите HTML Учебник</a>Всегда указывайте значения атрибутов
HTML допускает значения атрибутов без кавычек.
Тем не менее, мы рекомендуем заключение в кавычки значений атрибутов, потому что:
- Разработчики обычно цитируют значения атрибутов
- Приведенные в кавычках значения легче читать
- Вы должны использовать кавычки, если значение содержит пробелы
Хорошо:
<table
class="striped">Плохо:
<table class=striped>Очень плохо:
Это не сработает, так как значение содержит пробелы:
<table class=table striped>
Всегда указывайте alt, width и height для изображений
Всегда указывайте атрибут alt для изображений.
Этот атрибут важен, если изображение по какой-то причине не может быть отображено.
Кроме того, всегда определяйте width и height для изображений.
Это уменьшает мерцание, поскольку браузер может зарезервировать место для изображения перед загрузкой.
Хорошо:
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Плохо:
<img src="html5.gif">
Пробелы и знаки равенства
HTML допускает пробелы вокруг знаков равенства. Но без пробелов легче читать и лучше группировать объекты вместе.
Хорошо:
<link rel="stylesheet" href="styles.css">Плохо:
<link rel = "stylesheet" href = "styles.css">
Избегайте длинных строк кода
При использовании HTML редактора не удобно прокручивать вправо и влево, чтобы прочитать HTML код.
Старайтесь избегать слишком длинных строк кода.
Пустые строки и отступы
Не добавляйте пустые строки, пробелы или отступы без причины.
Для удобства чтения добавьте пустые строки для разделения больших или логических блоков кода.
Для удобства чтения добавьте два интервала отступа. Не используйте клавишу tab.
Хорошо:
<body>
<h1>Знаменитый город</h1>
<h2>Токио</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>
Хорошо пример списка:
<ul>
<li>Лондон</li>
<li>Париж</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>
Попробуйте сами »
Однако мы рекомендуем всегда добавлять теги <html> и
<body>!
Элемент <html> - это корень документа,
и рекомендуемое место для указания языка страницы.
Объявление языка страницы важно для специальных приложений (программ чтения с экрана) и поисковых систем.
Пропуск <body> может привести к ошибкам в старых браузерах.
Пропуск <html> и <body>
может также привести к сбою программного обеспечения DOM и XML.
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<title>Заголовок страницы</title>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это параграф.</p>
</body>
</html>
Попробуйте сами »
Пропуск <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.
Метаданные
Чтобы обеспечить правильную интерпретацию и правильную индексацию поисковых систем, как язык, так и кодировка символов должны быть определены как можно раньше в HTML документе:
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title>Заголовок страницы</title>
</head>
Настройка видового экрана
Видовой экран - это видимая область веб страницы пользователя. Она меняется в зависимости от устройства - на мобильном телефоне она будет меньше, чем на экране компьютера.
Вы должны включить следующей элемент <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:16em;}
Длинные правила CSS должны быть написаны в нескольких строках:
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
- Поместите открывающую скобку на ту же линию, что и селектор
- Используйте один пробел перед открывающей скобкой
- Используйте два интервала отступа
- Используйте точку с запятой после каждой пары свойство-значение, включая последнюю
- Используйте кавычки только вокруг значений, если они содержат пробелы
- Поместите закрывающую скобку на новую строку, без ведущих пробелов
Загрузка JavaScript в HTML
Используйте простой синтаксис для загрузки внешних скриптов (атрибут type не является обязательным):
<script src="myscript.js">
Доступ к HTML элементам с помощью JavaScript
Использование "неопрятного" HTML кода может привести к ошибкам JavaScript.
Эти два оператора JavaScript будет производить различные результаты:
getElementById("Demo").innerHTML = "Привет";
getElementById("demo").innerHTML = "Привет";
Попробуйте сами »
Посетите руководство по стилю JavaScript.
Используйте имена файлов в нижнем регистре
Некоторые веб серверы (Apache, Unix) чувствительны к регистру имен файлов: "london.jpg" не может быть доступен как "London.jpg".
Другие веб серверы (Microsoft, IIS) не чувствительны к регистру символов: "london.jpg" можно получить доступ как "London.jpg".
Если вы используете сочетание верхнего и нижнего регистра, вы должны знать об этом.
Если вы перейдете с сервера, не чувствительного к регистру, на сервер, чувствительный к регистру, даже небольшие ошибки разрушат вашу сеть!
Чтобы избежать этих проблем, всегда используйте имена файлов в нижнем регистре!
Расширение файла
HTML файлы должны иметь расширение .html или .htm.
CSS файлы должны иметь расширение .css.
JavaScript файлы должны иметь расширение .js.
Различия между .htm и .html?
Между ними нет никакой разницы расширения файлов .htm и html!
И то, и другое будет рассматриваться как HTML любым веб браузером и веб сервером.
Имена файлов по умолчанию
Если URL адрес не указывает имя файла в конце (например: "https://schoolsw3.com/"), сервер просто добавляет имя файла по умолчанию, например "index.html", "index.htm", "default.html", или "default.htm".
Если ваш сервер настроен только на "index.html" в качестве имени файла по умолчанию ваш файл должен быть назван "index.html", а не "default.html."
Однако серверы могут быть сконфигурированы с несколькими именами файлов по умолчанию, и обычно вы можете настроить столько имен файлов по умолчанию, сколько потребуется.