Вредоносное ПО (malware) - это назойливые или опасные программы,...
Заголовок статьи
Текст статьи, который кем-то написан. Инко Гнито - ее автор.
Веб-дизайнеры и разработчики любят бросаться жаргонами и заумными фразами, которые нам иногда сложно понять. В этой статье речь пойдет о семантическом коде. Давайте разберемся, что же это такое!
Что такое семантический код?
Даже если вы не веб-дизайнер, вы наверное знаете, что ваш сайт был написан в HTML. HTML был первоначально предназначен как средство описывающие содержание документа, а не как средство, чтобы сделать вид визуально приятным. Семантический код возвращается к этой оригинальной концепции и призывает веб-дизайнеров писать код, который описывает содержание, а не то как оно должно выглядеть. Например, заголовок страницы может быть запрограммирован следующим образом:
Это заголовок страницы
Это сделало бы название крупным и жирным, придавая ему вид заголовка страницы, но в нем нет ничего, что описывает его как “заголовок” в коде. Это означает, что компьютер не может определить это как заголовок страницы.
При написание названия семантически для того, чтобы компьютер распознавал его как “заголовок”, мы должны использовать следующий код:
Внешний вид заголовка может быть определен в отдельном файле, который называется “каскадные таблицы стилей” (CSS), при этом не вмешиваясь в ваш описательный (семантический) код HTML.
Чем важен семантический код?
Возможность компьютера правильно распознавать контент важно по нескольким причинам:
Также у семантического кода есть и другие преимущества:
Как убедиться в том, что веб-сайт использует семантический код?
На данный момент не существует инструмента, который может проверить наличие семантического кода. Все сводится к проверке наличия в коде цветов, шрифтов или макетов, вместо описания контента. Если анализ кода звучит страшновато, то прекрасной отправной точкой будет вопрос к вашему веб-дизайнеру - кодирует ли он соблюдая семантику? Если он тупо на вас смотрит или начинает нелепую болтовню, то тогда вы можете быть уверены, что он не кодирует данным способом. В этот момент вы должны решить, предоставите ли ему новое направление в работе, или найдете себе нового дизайнера?!
Если вы тот, кто использует div теги для всего что есть на сайте, эта статья для вас. Мы сфокусируемся на том, как писать чистый семантический HTML код, используя валидную разметку. Вы увидите на практике, как можно минимизировать количество div тегов в вашем HTML коде. Вы научитесь семантической верстке не только в теории, но и на примерах. Написание правильных семантических шаблонов упрощает жизнь не только себе, но и команде в целом. Ну и проще для браузеров, которые интерпретируют код. Чем меньше кода, тем быстрее грузиться страница. Это также позволяет сохранить время и простоту понимания кода, при создании больших проектов. Другими словами, семантическая верстка - это необходимое условие создания качественного сайта.
Семантика в HTML верстке - это соответствие тегов к информации находящейся внутри них. Семантика кода также достигается путем уменьшения количества тегов. Таким образом, мы создаем чистый, читабельный, валидный HTML код. Такая страница будет быстрее грузиться и ранжироваться поисковыми системами.
Это просто, главное делать все проще и стараться как можно больше все выносить в CSS стили, а JS код в отдельный файл. По классике, на одной HTML странице должен подключаться только один CSS файл и один JS файл. По поводу HTML, на каждом сайте своя ситуация. Ведь каждый из них уникален. Сейчас рассмотрим основные моменты, на которых претыкаются верстальщики:
Для большей ясности сути вопроса, смотрите схему семантической разметки текста:
Теперь закрепим все эти принципы семантической верстки на практике. Будем разбирать конкретные ситуации.
Я видел, что многие люди создают div тег около form или ul. Зачем создавать дополнительный div, который вам не нужен? Вы можете достичь такого же результата, дописав несколько указаний в CSS файле.
Пример 1:
Пример ниже показывает, как вы можете убрать div тег и дописать тот же стиль к form селектору.
Пример 2:
Иногда мы обвертываем контент в div блок, чтобы создать отступы, как показано на примере слева. Но если каждый из блоков имеет заголовок h4, мы можем просто применить margin отступ к h4 селектору и убрать лишний div тег.
Как упоминалось ранее, вы всегда должны использовать семантическую разметку для HTML кода. Но этого нельзя достичь без CSS файла стилей.
Пример:
Картинка ниже показывает разницу между div разметкой и семантической разметкой без css стилей.
Может быть, вы видели шаблоны, где div теги везде… они меня бесят. Имели ли вы лишний закрывающий тег /div, или не закрытый div? Я уверен, каждый верстальщик сталкивался с подобной проблемой, когда рядом стоит 3-4 div тега. Чтобы не путаться, нужно минимизировать использование div, так будет проще отслеживать ошибки.
Пример 1:
Вместо использования div для создания навигационного пути, можно использовать p тег.
Семантика кода HTML всегда является горячим вопросом. Некоторые разработчики стараются всегда писать семантический код. Другие критикуют догматичных приверженцев. А некоторые даже понятия не имеют о том, что это такое и зачем оно нужно. Семантика определяется в HTML в тегах, классах, ID, и атрибутах, которые описывают назначение, но не задают точно содержание, которое в них заключено. То есть речь идет о разделении содержания и его формата.
Начнем с очевидного примера.
Текст статьи, который кем-то написан.
Инко Гнито - ее автор.Заголовок статьи
Вне зависимости от того, считаете ли вы, что HTML5 готов к использованию или нет, наверняка использование тега Но не все так четко представляется тегами HTML5. Давайте рассмотрим набор имен классов и разберемся с тем, отвечают ли они требованиям семантики. Не семантический код.
Это классический пример. Каждая рабочая среда CSS для модульной сетки использует такого типа имена классов для определения элементов сетки. Будет ли это "yui-b", "grid-4", или "spanHalf" - такие имена ближе к заданию разметки, чем к описанию содержания. Однако их использование в большинстве случаев неизбежно при работе с шаблонами модульных сеток. Семантический код.
Нижний колонтитул (footer
) приобрел устойчивое значение в веб дизайне. Это нижняя часть страницы, которая содержит такие элементы как повторяющаяся навигация, права использования, информацию об авторе и так далее. Данный класс определяет группу для всех этих элементов без их описания. Если вы перешли к использованию HTML5, то лучше применять элемент Не семантический код.
Он точно определяет содержание. Но почему текст должен быть большим? Чтобы выделяться среди другого более мелкого текста? "standOut
" (выделение) больше подходит в данном случае. Вы можете решить изменить стиль для выделяющего текста, но ничего не делать с его размером, и в таком случаем название класса может привести вас в замешательство. Семантический код.
В данном случае речь идет об определении уровня важности элемента в интерфейсе приложения (например, параграфа или кнопки). Элемент с более высоким уровнем может иметь яркие цвета и больший размер, а элементы с низким уровнем могут содержать больше содержания. Но точного определения стилей в данном случае нет, поэтому код является семантическим. Данная ситуация очень похожа на использование тегов Семантический код.
Если бы каждое имя класса можно было так четко определить! В данном случае мы имеем описание раздела, который имеет содержание, назначение которого легко описать, также как и "tweets", "pagination" или "admin-nav". Не семантический код.
В данном случае речь идет о задании стиля для первого параграфа на странице. Такой прием используется для привлечения внимания читателей к материалу. Лучше использовать имя "intro", в котором отсутствует упоминание элемента. Но еще лучше использовать селектор для таких параграфов, например article p:first-of-type или h1 + p . Не семантический код.
Это очень обобщенное имя класса, которое используется для организации форматирования элементов. Но в нем нет ничего, чтобы касалось описания содержания. Различные теоретики семантики рекомендуют в таких случаях использовать имя класса наподобие "group". Вполне вероятно, что они правы. Так как данный элемент, несомненно, служит для группирования нескольких других элементов, и рекомендуемое название будет лучше описывать его назначение без погружения в детали. Не семантический код.
Слишком детальное описание формата содержания. Лучше подобрать другое имя, которое будет описывать содержание, а не его формат. Семантический код.
Класс очень хорошо описывает статус содержания. Например, сообщение об успешном завершении операции может иметь совершенно другой стиль от сообщения об ошибке. Не семантический код.
В данном примере имеется попытка задать определение формата содержания, а не его назначения. "plain-jane" очень похоже на "normal" или "regular". Идеальный код CSS должен быть написан так, чтобы не возникало необходимости в именах класса наподобие "regular", которые описывают формат содержания. Не семантический код.
Такого типа классы обычно используются для определения элементов сайта, которые не должны включаться в цепочку ссылок. В данном случае лучше использовать что-то наподобие rel=nofollow для ссылок, но не класс для всего содержания. Не семантический код.
Здесь имеется попытка описать формат содержания, а не его назначение. Допустим, что у вас на сайте есть две статьи. И вы желаете задать им разные стили. "Обзоры фильмов" будут иметь голубой фон, а "Горячие новости" - красный фон и шрифт большего размера. Один из способов решить задачу такой: Другой способ такой: Наверняка, если опросить нескольких разработчиков о том, какой код более соответствует требованиям семантики, большинство укажет на первый вариант. Он отлично соответствует материалу данного урока: описание назначение без ссылок на форматирование. А второй вариант указывает на формат ("blueBg" - имя класса, которое сформировано из двух английских слов, означающих "голубой фон"). Если вдруг будет принято решение поменять дизайн обзоров фильмов - например, сделать зеленый фон, то имя класса "blueBg" превратится в кошмар разработчика. А имя "movie-review" позволит абсолютно спокойно изменять стили оформления с сохранением отличного уровня поддержки кода. Но никто не утверждает, что первый пример лучше во всех без исключения случаях. Допустим, что определённый оттенок синего используется во многих местах на сайте. Например, он является фоном для некоторой части нижнего колонтитула и областей в боковой панели. Вы можете воспользоваться следующим селектором: Movie-review,
footer > div:nth-of-type(2),
aside > div:nth-of-type(4) {
background: #c2fbff;
} Эффективное решение, так как цвет определяется только в одном месте. Но такой код становится сложным для поддержки, так как имеет длинный селектор, сложный для визуального восприятия. Также потребуются другие селекторы для определения уникальных стилей, что приведет к повторению кода. Или вы можете использовать другой подход и оставить их разделёнными: Movie-review {
background: #c2fbff;
/* Определение цвета */
}
footer > div:nth-of-type(2) {
background: #c2fbff;
/* И еще одно */
}
aside > div:nth-of-type(4) {
background: #c2fbff;
/* И еще одно */
} Такой стиль помогает сохранять CSS файл более организованным (разные области определяются в разных разделах). Но платой является повторение определений. Для больших сайтов определение одного и того же цвета может доходить до нескольких тысяч раз. Ужасно! Вариантом решения может быть использование класса по типу "blueBg" для определения цвета один раз и вставки его в HTML коде, когда требуется использовать данный дизайн. Конечно, его лучше назвать "mainBrandColor" или "secondaryFont", чтобы отвязаться от описания форматирования. Можно пожертвовать семантикой кода в пользу сохранения ресурсов. ,
,
, и так далее, но к другим элементам интерфейса.
Но...