Руководство для начинающих по написанию чистой и семантической разметки
Если вы читаете это, вы, вероятно, были на этапе, когда у вас есть PSD-файл, ожидающий «кодирования», и вы не знаете, с чего начать или какие элементы использовать в HTML-коде. Написание понятного и описательного кода является обязательным условием для любого языка программирования. Независимо от того, программируете ли вы на C, Java, HTML, CSS, Python, код должен быть достаточно ясным, чтобы, если бы другой разработчик подошел и прочитал код, он мог точно понять, о чем вы думаете. Теперь следует отметить, что чистый код отличается от семантически правильного кода. Фрагмент кода может иметь очень четкие отступы и интервалы, однако это не означает его семантику.
Вот пример кода с правильным отступом и неаккуратного кода. Как видите, код с правильным отступом читать намного проще:
Очень важно сохранять в коде одинаковые интервалы и табуляции, чтобы такие вещи, как отношения «родитель-потомок», можно было легко увидеть в макете кода.
Теперь я снова и снова упоминал слово «семантика», и некоторые из вас, возможно, думают, что, черт возьми, вообще означает «семантика»? Слово семантическое в терминах веб-разработки относится к элементу, который четко описывает его значение для браузера и разработчика. Если бы кто-то действительно захотел, они потенциально могли бы разработать весь свой веб-сайт, используя элементы «div». Хотя это может нормально отображаться в браузере, это, однако, не является семантическим. Если бы человек вернулся и отредактировал код через год, было бы почти невозможно вспомнить, о чем он думал во время кодирования.
Как и у многих других разработчиков, у меня тоже были проблемы с тем, какой элемент мне следует использовать. Вот несколько общих правил, которые я научился применять на всех своих сайтах:
- Поместите основное содержание заголовка страницы в тег «header».
- Поместите элементы навигации по сайту в теги «nav».
- Всякий раз, когда есть список «вещей», помещайте их в теги «ul» или «ol».
- Поместите всю контактную информацию и информацию об авторских правах в тег нижнего колонтитула.
- Если есть изображение и подпись, описывающая изображение, попробуйте использовать элемент «figcaption».
- Попробуйте использовать теги «main» и «aside», чтобы различать более и менее важные материалы.
- Поместите поля, в которые пользователь будет вводить данные, в теги «input».
- Используйте теги заголовков (h1-h6), чтобы различать текст абзаца и основные заголовки.
- Наконец, используйте div как последнее средство, если вы думаете, что нет лучшего способа описать контент.
Вот ссылка на информационную статью, в которой более подробно рассказывается, какой элемент следует использовать и где:
Вот фрагмент кода вместе со снимком экрана PSD-файла, который использует правильные семантические элементы для описания своего содержимого:
Если есть один совет, который я могу дать, это распечатать физическую копию файла PSD и начать маркировать различные части сайта элементами, которые, по вашему мнению, лучше всего описывают этот раздел, а затем начать кодирование. Наконец, если позже в проекте вы найдете более подходящий элемент для контента, вы всегда можете вернуться и изменить HTML.
