Руководство по стилю HTML
Последовательный, чистый и аккуратный HTML-код облегчает чтение и понимание вашего кода другими пользователями.
Вот несколько рекомендаций и советов по созданию хорошего HTML-кода.
Всегда объявлять тип документа
Всегда объявляйте тип документа первой строкой документа.
Правильный тип документа для HTML:
<!DOCTYPE html>
Используйте имена элементов в нижнем регистре
HTML позволяет смешивать прописные и строчные буквы в именах элементов.
Однако мы рекомендуем использовать имена элементов в нижнем регистре, потому что:
- Смешивание имен в верхнем и нижнем регистре выглядит плохо
- Разработчики обычно используют имена в нижнем регистре
- Нижний регистр выглядит чище
- Нижний регистр легче писать
Хорошо:
<body>
<p>This is a paragraph.</p>
</body>Плохой:
<BODY>
<P>This is a paragraph.</P>
</BODY>Закрыть все элементы HTML
В HTML вам не нужно закрывать все элементы (например, <p>элемент).
Однако мы настоятельно рекомендуем закрыть все элементы HTML, например:
Хорошо:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>Плохой:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>Используйте имена атрибутов в нижнем регистре
HTML позволяет смешивать прописные и строчные буквы в именах атрибутов.
Однако мы рекомендуем использовать имена атрибутов в нижнем регистре, потому что:
- Смешивание имен в верхнем и нижнем регистре выглядит плохо
- Разработчики обычно используют имена в нижнем регистре
- Строчные выглядят чище
- Нижний регистр легче писать
Хорошо:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Плохой:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Всегда указывать значения атрибутов
HTML допускает значения атрибутов без кавычек.
Однако мы рекомендуем указывать значения атрибутов в кавычках, потому что:
- Разработчики обычно указывают значения атрибутов
- Значения в кавычках легче читать
- Вы ДОЛЖНЫ использовать кавычки, если значение содержит пробелы
Хорошо:
<table
class="striped">Плохой:
<table class=striped>Очень плохой:
Это не сработает, потому что значение содержит пробелы:
<table class=table striped>Всегда указывайте Alt, ширину и высоту для изображений
Всегда указывайте 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-кода.
Старайтесь избегать слишком длинных строк кода.
Пустые строки и отступы
Не добавляйте пустые строки, пробелы или отступы без причины.
Для удобства чтения добавьте пустые строки для разделения больших или логических блоков кода.
Для удобочитаемости добавьте два пробела отступа. Не используйте клавишу табуляции.
Хорошо:
<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>
Пример хорошего списка:
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
Никогда не пропускайте элемент <title>
Элемент <title>является обязательным в HTML.
Содержание заголовка страницы очень важно для поисковой оптимизации (SEO)! Заголовок страницы используется алгоритмами поисковых систем для определения порядка отображения страниц в результатах поиска.
Элемент <title>:
- определяет заголовок на панели инструментов браузера
- предоставляет заголовок для страницы, когда она добавляется в избранное
- отображает заголовок страницы в результатах поиска
Итак, постарайтесь сделать заголовок максимально точным и осмысленным:
<title>HTML
Style Guide and Coding Conventions</title>
Опустить <html> и <body>?
HTML-страница будет проверяться без тегов <html>и
:<body>
Пример
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Тем не менее, мы настоятельно рекомендуем всегда добавлять теги <html>и
!<body>
Пропуск <body>может привести к ошибкам в старых браузерах.
Опускание , <html>а <body>
также может привести к сбою программного обеспечения DOM и XML.
Пропустить <head>?
HTML-тег <head> также можно опустить.
Браузеры добавят все элементы до , к
элементу <body>по умолчанию .<head>
Пример
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</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="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Метаданные
Чтобы обеспечить правильную интерпретацию и правильное индексирование поисковыми системами, как язык, так и кодировка символов должны быть определены как можно раньше в HTML-документе:<meta charset="charset">
<!DOCTYPE html>
<html
lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
Настройка области просмотра
Область просмотра — это видимая пользователем область веб-страницы. Оно зависит от устройства — на мобильном телефоне оно будет меньше, чем на экране компьютера.
Вы должны включить следующий <meta>элемент на все свои веб-страницы:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Это дает браузеру инструкции о том, как управлять размерами и масштабированием страницы.
Эта width=device-widthчасть устанавливает ширину страницы в соответствии с шириной экрана устройства (которая будет варьироваться в зависимости от устройства).
Эта initial-scale=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.
-->
Длинные комментарии легче просматривать, если они разделены двумя пробелами.
Использование таблиц стилей
Use simple syntax for linking to style sheets (the
type attribute is not necessary):
<link rel="stylesheet" href="styles.css">
Short CSS rules can be written compressed, like this:
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
- Place the opening bracket on the same line as the selector
- Use one space before the opening bracket
- Use two spaces of indentation
- Use semicolon after each property-value pair, including the last
- Only use quotes around values if the value contains spaces
- Place the closing bracket on a new line, without leading spaces
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the
type attribute is not necessary):
<script src="myscript.js">
Accessing HTML Elements with JavaScript
Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
Example
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML
= "Hello";
Visit the JavaScript Style Guide.
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".
If you use a mix of uppercase and lowercase, you have to be aware of this.
If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!
To avoid these problems, always use lowercase file names!
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences Between .htm and .html?
There is no difference between the .htm and .html file extensions!
Both will be treated as HTML by any web browser and web server.
Default Filenames
When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".
If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".
However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.