Что представляет собой семантическая верстка? Понятие семантического кода

Эта статья для тех, кто используется div тегами для всего, что только существует на сайте. Давайте сфокусируемся на том, как создать чистый семантический HTML код при условии использования валидной разметки. Вы сможете узнать, как можно уменьшить количество div тегов в коде HTML, научитесь семантической верстке. Написав правильные семантические шаблоны, вы сможете облегчить жизнь себе и своей команде. Конечно, браузерам также легче интерпретировать такие кода, чем код меньше, тем быстрее загружается страниц сайта. Проще говоря, семантическая верстка является необходимым условием создания качественного сайта.

Что же такое семантическая верстка? Семантика в HTML верстке представляет собой соответствие тегов к информации, которая расположена внутри них самих. Семантику кода можно достичь также путем уменьшении количества тегов. В такой простой способ можно создать абсолютно чистый и хорошо читаемый HTML код.

Как достигнуть семантики кода? Все это просто. Самым главным условием является делать все как можно проще и стараться большинство информации выносить в стили CSS, а JS код вообще лучше поместить в отдельный файл. Как правило, на одну HTML страницу можно подключить только один файл CSS и один файл JS. Что касается самого HTML, то тут для каждого сайта своя ситуация.

Семантическая верстка на практике.

Давайте по отдельности разберем некоторые ситуации:

1. Удалим ненужные div теги. Мне встречалось, что люди создают некоторые div теги возле form или ul. Тут же появляется вопрос: зачем создавать ненужные вам div, если вы просто можете дописать несколько указаний в файле CSS.
2. Используем семантическую разметку кода. Помните, что всегда необходимо использовать для HTML кода семантическую разметку. Но без CSS файла стилей вы не сможете этого добиться.
3. Сводим до минимума использование div тегов. Возможно вам попадались такие шаблоны, где div теги есть абсолютно везде. Согласитесь, это раздражает! Встречался ли вам лишний закрывающий тег div или вовсе не закрытый div? Мне кажется, каждый верстальщик так или иначе сталкивался с проблемой, когда рядом стоит по 4 div тега. Попробуйте минимизировать использование div, так намного проще отслеживать ошибки и вы не будете путаться.

В заключение хотелось бы сказать, что такие техники являются основными и используются сегодня многими верстальщиками, пробуйте и упрощайте работу себе и своему сайту.