Семантична верстка поняття і приклади семантичного коду
Поняття семантичної верстки
Семантика вHTML верстці - це відповідність тегів до інформації знаходиться всередині них. Семантика коду також досягається шляхом зменшення кількості тегів. Таким чином, ми створюємо чистий, Новомосковскбельний, валідний HTML код. Така сторінка буде швидше завантажуватися і ранжуватися пошуковими системами.
Як досягти семантики коду?
Це просто, головне робити все простіше і намагатися якомога більше все виносити в CSS стилі, а JS код в окремий файл. За класикою, на одній HTML сторінці повинен підключатися тільки один CSS файл і один JS файл. З приводу HTML, на кожному сайті своя ситуація. Адже кожен з них унікальний. Зараз розглянемо основні моменти, на яких спотикаються верстальники:
Для більшої ясності суті питання, дивіться схему семантичної розмітки тексту:
Семантична верстка на практиці - приклади HTML + CSS коду
Тепер закріпимо всі ці принципи семантичної верстки на практиці. Будемо розбирати конкретні ситуації.
Видаляємо непотрібні div теги
Я бачив, що багато людей створюють div тег близько form або ul. Навіщо створювати додатковий div, який вам не потрібен? Ви можете досягти такого ж результату, дописавши кілька вказівок в CSS файлі.
Приклад нижче показує, як ви можете прибрати div тег і дописати той же стиль до form селектору.
Іноді ми обгортають контент в div блок, щоб створити відступи, як показано на прикладі зліва. Але якщо кожен з блоків має заголовок h4, ми можемо просто застосувати margin відступ до h4 селектору і прибрати зайвий div тег.
Використовуємо семантичну розмітку коду
Як згадувалося раніше, ви завжди повинні використовувати семантичну розмітку для HTML коду. Але цього не можна досягти без CSS файлу стилів.
Картинка нижче показує різницю між div розміткою і семантичної розміткою без css стилів.
Мінімізуємо використання div тегів
Може бути, ви бачили шаблони, де div теги всюди ... вони мене дратують. Чи мали ви зайвий закриває тег / div, або не закриті div? Я впевнений, кожен верстальник стикався з подібною проблемою, коли поруч стоїть 3-4 div тега. Щоб не плутатися, потрібно мінімізувати використання div, так буде простіше відслідковувати помилки.
Замість використання div для створення навігаційного шляху, можна використовувати p тег.
Приклад нижче показує, як можна використовувати CSS, щоб позбутися від двох зайвих div тегів. Результат буде таким же.