Корисні правила HTML-верстки
Сучасні браузери можуть коригувати і правильно відображати вміст із допущеними помилками при верстці HTML сторінок.
Сучасні браузери можуть коригувати і правильно відображати вміст із допущеними помилками при верстці HTML сторінок. Звісно, це не стосується всіх помилок, але більшу частину проблем з валідністю HTML коду браузери відображають коректно. Але все ж правила верстки HTML слід дотримуватися, це допоможе в оптимізації сайту, пошукові роботи не будуть ставити мінуси за некоректний код, а користувачі, які зайшли на сайт зі старих версій браузерів, не будуть шоковані вмістом. Далі ми розглянемо основні, корисні правила HTML-верстки.
- Визначення типу документа
Перший рядок будь-якого HTML документа починається з визначення типу вмісту в тезі <!DOCTYPE> - версію розмітки. Рекомендується використовувати універсальний тип - <!DOCTYPE HTML>.
- Вміст тега <Head>
У тезі <head> вказуються метатеги сторінки, але в ньому також слід вказувати посилання на стилі і скрипти, що використовуються на сторінці, деякі це забувають і розміщують посилання нижче, в тілі сторінки.
- CSS стилі
Для стилів CSS найкраще створити окремий файл і не прописувати їх у тілі документа. Створюйте окремі класи і якомога рідше використовуйте атрибут «style».
Замість:
<h2 style=”color: blue”>
Використовуйте:
<h2 class=”blue”>
- Блочні та рядкові елементи верстки
Не слід використовувати блочні елементи верстки всередині рядкових, наприклад, так робити не варто:
<a href=”…”><h2> hello </h2> </a>
Зеленим виділено рядковий елемент, червоним – блочний.
А так правильно:
<h2><a href=”…”>hello”</a></h>
- Не робити перехресну вкладеність тегів
При верстці сайту в HTML не можна використовувати перехресну вкладеність тегів, так робити не варто: <p><b>Hello</p></b>, потрібно робити так: <p><b>Hello</b></p>
- Використання тегів заголовків h1-h6
Використання заголовків структурує текст і робить його зручнішим для читання відвідувачам ресурсу, а також допомагає при SEO-оптимізації ресурсу, в них використовуються ключові слова, релевантні вмісту тексту. Але не варто забувати про правила використання заголовків у тілі сторінки, h1 – може зустрічатися на сторінці не більше одного разу, h2 – може бути використаний до трьох разів, а підзаголовок h3 можна використовувати більше трьох разів.
- Виділення ключових слів
І хоча багато компаній, що займаються розробкою сайтів, перестали це робити, але для зручності користувача, ключові слова можна виділяти в тексті тегами <b>, <strong>, <i>, <em>.
- Зображення на сторінці
Якщо на сторінці використовуються зображення, пропишіть атрибут alt у тезі img, і пропишіть короткий опис картинки, за можливості використовуйте ключові слова:
<img scr=”/pics/picture.jpg” alt=”Опис з ключовими словами”>
- Теги списків замість переходу на новий рядок
Якщо ви створюєте список, то і слід його позначати тегами списків і елементів списку, так робити не варто:
<p>
Елемент1 <br />
Елемент2 <br />
Елемент3 <br />
</p>
А так слід робити:
<ul>
<li> Елемент1 </li>
<li> Елемент2 </li>
<li> Елемент3 </li>
</ul>
Ці рекомендації не є критично необхідними, але при їх дотриманні ваш сайт не отримає мінусів і знижень у результатах пошукової видачі, і буде краще виглядати в очах користувачів.