1. Синтаксис
1.1 Два пробіли як відступ
Відступи дозволяють візуально оцінити структуру документа та швидко перемикатися між його фрагментами. Розмір відступу налаштовується у редакторі. Також у багатьох редакторах можна ввімкнути відображення пробілових символів та перетворити відступи.
Добре
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>>Ваша сторінка</title>
</head>
<body>
<h1>Заголовок сторінки</h1>
<p>Текст</p>
</body>
</html>Погано
<!DOCTYPE html>
<html lang='uk'>
<head>
<meta charset='UTF-8'>
<title>Ваша сторінка</title>
</head>
<body>
<h1>Заголовок сторінки</h1>
<p>Текст</p>
</body>
</html>1.2 Теги та атрибути записуються в нижньому регістрі
Символи нижнього регістру не привертають до себе великої уваги, і вам буде легше знайти потрібний.
Добре
<div class="user"> <img src="./i/userpic.png" title="Шевченко Тарас"> <a href="/profile/">Перейти в профіль</a> </div>
Погано
<DIV Class="user"> <Img Src="./i/userpic.png" titLE="Шевченко Тарас"> <A href="/profile/">Перейти в профіль</a> </DIV>
1.3 Окремі логічні блоки відбиваються порожнім рядком
Це полегшує роботу з кодом та візуально створює структуру документа.
Добре
<h1>Заголовок першого рівня</h1> <p>Перший параграф</p> <h2>Заголовок другого рівня</h2> <ul> <li>Перший пункт</li> <li>Другий пункт</li> <li>Третій пункт</li> </ul> <h3>Заголовок третього рівня</h3> <figure> <figcaption>Блок з зображенням</figcaption> <img src="../img/image.jpg"> </figure>
Погано
<h1>Заголовок першого рівня</h1> <p>Перший параграф</p> <h2>Заголовок другого рівня</h2> <ul> <li>Перший пункт</li> <li>Другий пункт</li> <li>Третій пункт</li> </ul> <h3>Заголовок третього рівня</h3> <figure> <figcaption>Блок з зображенням</figcaption> <img src="../img/image.jpg"> </figure>
1.4 Використовуйте лише подвійні лапки
При написанні значень атрибутів використовуйте лише подвійні лапки.
Добре
<div class="first"> <img src="first-img.jpg" alt="Первая картинка"> </div>
Погано
<div class='first'> <img src='first-img.jpg' alt='Перше зображення'> </div>
1.5 Не ставимо пробілів перед і після символу =
Оскільки права частина безпосередньо відноситься до лівої, то атрибут та його значення мають бути написані без пробілів.
Добре
<p id="first" class="post">Це добрий приклад</p>
Погано
<p id ="first" class= "post">Це поганий приклад</p>
1.6 Між атрибутами тільки пробіли
Не використовуємо перенесення рядків між атрибутами, використовуємо тільки один пробіл. Перенесення рядків прийнято в css-документах, але не в html-розмітці. Пишіть усі атрибути елемента в рядок.
Добре
<figure class="postItem"> <img src="logo.jpg" alt="Логотип"> <figcaption>Логотип компании</figcaption> </figure>
Погано
<figure class="postItem"> <img src="logo.jpg" alt="Логотип"> <figcaption>Логотип компании</figcaption> </figure>
1.7 Поодинокі теги без закриваючого слеша
Не використовуйте закриваючий слеш одиночних тегів ( <img>, <br> та інші). Цей елемент є пережитком минулого, коли HTML був суворішим, а браузери не вміли розпізнавати та виправляти помилки.
Добре
<img src="logo.jpg" alt="Логотип"> <br>
Погано
<img src="logo.jpg" alt="Логотип" /> <br />
2. Валідність
HTML-документ повинен проходити перевірку на валідність. Для перевірки використовуйте валідатор .
3. !DOCTYPE
Першим рядком у HTML-документі має бути актуальний doctype. Це необхідно, щоб браузер вірно відображав сторінку. Це забезпечить однакове відображення у всіх сучасних браузерах.
<!DOCTYPE html> <html lang="uk"> <head>…</head> <body>…</body> </html>
4. Кодування
Кодування символів у html-документі завжди має бути вказане явно. Це забезпечить правильне відображення тексту. Кодування utf-8 підходить завжди, за рідкісним винятком.
<head> <meta charset="utf-8"> <title>Заголовок</title> </head>
5. Підключення стилів
Файли зі стилями підключаються всередині тега <head>за допомогою <link>. Атрибут type для тега <link> не потрібно вказувати, оскільки значення text/css встановлюється за замовчуванням.
Добре: стильовий файл підключений до розділу head
<!DOCTYPE html>
<html lang="uk">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>…</body>
</html>Погано: стильовий файл підключений до секції body
<!DOCTYPE html>
<html lang="uk">
<head>…</head>
<body>
<link rel="stylesheet" href="style.css">
</body>
</html>6. Підключення скриптів
Скрипти під час завантаження блокують відображення вмісту сторінки. Тому слід підключати їх у самому кінці html-документа.
При підключенні скриптів у тезі <script> атрибут typeне потрібно вказувати, оскільки значення text/javascript встановлюється за замовчуванням.
Добре: скрипт підключається перед </body>
<!DOCTYPE html>
<html lang="uk">
<head>…</head>
<body>
<!-- Содержимое страницы -->
<script src="app.js"></script>
</body>
</html>Погано: скрипт підключається до секцій <head>
<!DOCTYPE html>
<html lang="uk">
<head>
<script src="app.js"></script>
</head>
<body>…</body>
</html>7. Атрибути та їх порядок
HTML-елементи атрибут class пишеться першим. Єдине написання допомагає легше зчитувати код і за класами швидше розбиратися в призначенні блоків.
Інші атрибути можуть бути розставлені в будь-якому порядку, але теж однаково для подібних елементів.
<a class="element element-big" id="element" href="/" data-name="element">Посилання</a> <input class="form-control" type="text" name="test"> <img class="picture" src="img.jpg" alt="Зображення">
8. Атрибути логіки
Для логічних атрибутів (наприклад, checked, disabled, required) значення не вказується, а самі атрибути вказуються останніми та у однаковій послідовності у всьому документі.
<!-- checked="checked" необов'язково --> <input type="checkbox" required checked> <input type="text" disabled> <select> <option value="1" selected>1</option> </select>
9. Підписи input
Для покращення досвіду користувача, при натисканні на підпис поля, саме поле має активуватись. Для цього поле форми зв’язується з описом за допомогою ідентифікатора та атрибуту forтега <label>.
Добре: елемент форми radio пов’язаний з підписом через id та for
<input type="radio" id="choose"> <label for="choose">Радіо кнопка</label>
Добре: елемент форми radio та підпис загорнуті в label
<label> <input type="radio"> Радіо кнопка </label>
Погано: підпис не пов’язаний з елементом форми
<input type="radio" id="choose"> Радіо кнопка
10. Атрибут мови
Для елемента <html>в атрибуті lang має бути вказана правильна мова документа. Це допомагає системам перекладу визначити, які мови використовувати.
<!DOCTYPE html> <html lang="uk"> <head>…</head> <body>…</body> </html>