HTML5 Гід по стилю
HTML. Як правильно писати код? Угода з кодування
Послідовний, чистий і акуратний HTML-код полегшує іншим читання та розуміння вашого коду.
Ось кілька вказівок та порад щодо створення хорошого HTML-коду.
Завжди оголошувати тип документа
Завжди оголошуйте тип документа як перший рядок у своєму документі.
Правильний тип документа для HTML:
<!DOCTYPE html>
Якщо вам необхідна узгодженість з тегами нижнього регістра, ви можете використовувати:
<!doctype html>
Використовуйте назви в нижньому регістрі
HTML5 дозволяє змішувати великі та маленькі букви в назвах елементів.
Ми рекомендуємо використовувати назви елементів буквами лише в нижньому регістрі, оскільки:
- Змішування назв літерами у верхньому і нижньому регістрі погано для сприйняття
- Розробники зазвичай використовують назви за допомогою букв в нижньому регістрі (як в XHTML)
- Нижній регістр виглядає чистіше
- Букви в нижньому регістрі легше і швидше писати
Погано:
<SECTION>
<p>Це параграф.</p>
</SECTION>
Дуже погано:
<Section>
<p>Це параграф.</p>
</SECTION>
Добре:
<section>
<p>Це параграф.</p>
</section>
Закривайте всі HTML елементи
У HTML5 немає необхідності закривати всі елементи (наприклад, елемент <p>).
W3C рекомендує закривати всі 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 дозволяє змішувати великі і маленькі букви в назвах атрибутів.
W3C рекомендує використовувати назви атрибутів в нижньому регістрі, оскільки:
- Змішування букв верхнього та нижнього регістрів в назвах погано сприймається
- Розробники зазвичай використовують назви в нижньому регістрі (як в XHTML)
- Нижній регістр виглядає чистіше
- Букви в нижньому регістрі легше і швидше писати
Погано:
<div CLASS="menu">
Добре:
<div
class="menu">
Значення атрибутів в лапках
HTML5 дозволяє писати значення атрибутів без лапок.
W3C рекомендує писати значення атрибутів в лапках, оскільки:
- Розробники зазвичай пишуть значення атрибутів в лапках (як в XHTML)
- Значення в лапках легше читати
- Якщо значення містить пробіли, ви ПОВИННІ використовувати лапки
Дуже погано:
Це не буде працювати, оскільки значення містить прогалини:
<table class=table striped>
Погано:
<table class=striped>
Добре:
<table class="striped">
Атрибути зображення
Завжди додавайте атрибут 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 символів.
Порожні рядки і відступ
Не додавайте порожні рядки без крайньої необхідності.
Для зручності читання додавайте порожні рядки для поділу великих або логічних блоків коду.
Для зручності читання додайте два пробіли відступу. Не використовуйте клавішу табуляції.
Не використовуйте непотрібні порожні рядки і відступи. Немає необхідності робити відступи для кожного елемента:
Не бажано:
<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>
Чи опускати <html> та <body>?
В HTML5 тег <html> і тег <body> можуть бути опущені (не вказані).
Наступний код без вказування body буде вважатися валідним згідно специфікації HTML5:
Приклад
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>Це параграф.</p>
Спробуйте самі »
Однак ми не рекомендуємо опускати теги <html> та <body>.
Елемент <html> вказує завантаження HTML-документу. Також це рекомендоване місце для визначення мови сторінки:
<!DOCTYPE html>
<html lang="en-US">
Оголошення мови сторінки має важливе значення для програм з доступністю (програми для читання з екрану) і пошукових систем.
Опускання <html> або <body> може обрушити DOM і програмне забезпечення XML.
Опускання <body> може викликати помилки в старих браузерах (наприклад, IE9).
Чи опускати <head>?
В HTML5 тег <head> також може бути опущений.
За замовчуванням браузери будуть додавати всі елементи, які знаходяться перед <body> до <head> елемента.
Ви можете спростити HTML, опустивши тег <head>:
Приклад
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>Це параграф.</p>
</body>
</html>
Спробуйте самі »
Однак ми не рекомендуємо опускати тег <head>.
Опускання тегів невідомо для веброзробників. Потрібен час, щоб це стало основним стандартом.
Метадані
Елемент <title> обов’язковий в HTML5. Необхідно вказувати назву сторінки якомога точніше і змістовніше (у відповідності з вмістом сторінки). Це допомагає пошуковим роботам знаходити потрібну інформацію на сайті:
<title>HTML5 Syntax and Coding Style</title>
Для забезпечення належної інтерпретації і правильного індексування пошуковими системами, як мова сторінки, так і кодування символів повинні бути визначені якомога раніше в веб-документі:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>
Налаштування вікна перегляду - Viewport
В HTML5 з’явився метод, який дозволив веб-дизайнерам взяти під свій контроль вікно перегляду за допомогою тега <meta>.
Вікно перегляду (viewport) - видима область користувача веб-сторінки. Вона змінюється в залежності від пристрою і буде менше на мобільному телефоні, ніж на екрані комп’ютера.
Вам слід включити наступний елемент <meta> на ваших вебсторінках:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Елемент <meta> viewport надає інструкції браузеру, як контролювати розміри і масштабування сторінки.
Частина width=device-width встановлює ширину сторінки, щоб вона відповідала ширині екрану пристрою (яка залежить від пристрою).
Частина initial-scale=1.0 встановлює початковий рівень масштабування, коли сторінка спочатку завантажується браузером. Одиниця означає масштаб в 100%.
Ось приклад веб-сторінки без viewport метатега, і тієї ж веб-сторінки із 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 дадуть різні результати:
Відвідайте розділ JavaScript Гід по стилю на нашому сайті W3Schools українською.
Використовуйте імена файлів в нижньому регістрі
Деякі веб-сервери (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://www.w3schools.com/css/), сервер повертає ім’я файлу за замовчуванням. Загальні назви файлів за замовчуванням - index.html, index.htm, default.html та default.htm.
Якщо ваш сервер налаштований лише для роботи з "index.html" як типовим (стандартним - за замовчуванням) ім’ям файлу, ваш файл повинен бути названий "index.html", а не "index.htm" (або "default.html").
Однак, сервери можуть бути налаштовані на більш ніж одне ім’я файлу за замовчуванням, і зазвичай ви можете встановити стільки назв файлів за замовчуванням, скільки необхідно.
Так або інакше, повне розширення для HTML-файлів .html, і немає ніяких причин його не використовувати.
Для отримання повного списку всіх доступних HTML тегів відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.
