Зачем заниматься разметкой правильно и семантически?

_{Обратите внимание, что я (стараюсь) пометить как можно более семантически, потому что мне нравится, как они выглядят и чувствуют, но не потому, что я знаю о каких-либо других потрясающих преимуществах. Суть моего вопроса в том, чтобы научить других}

Ну, я видел много статей и учебных пособий, в которых часто говорится: «Давайте отметим это самым семантическим способом».

Но странная мысль пришла ко мне, почему?

Зачем нужно (или хотеть) беспокоиться о конкретных элементах, которые передают правильный смысловой смысл? В частности, я имею в виду новые элементы HTML5, например <time>, <output>или <address>. Особенно, если страница «работает» (она хорошо отображается во всех браузерах).

Почему я хотел бы использовать такие элементы, как <time>или <address>, где вообще ничего (или в худшем случае универсального <span>) не работает так же хорошо?

Я спрашиваю об этом, потому что я вижу множество (очень популярных) веб-сайтов (включая этот), которые не следуют этим так называемым лучшим практикам.

Свободная функциональность

Правильное использование <label>s означает, что вы можете нажать на метку, чтобы ввести текстовое поле. Многие браузеры добавляют логическую функциональность по умолчанию ко многим тегам в соответствии с официальной спецификацией, что означает, что вы можете использовать меньше плагинов JavaScript и писать меньше кода, чем сайт, полностью сделанный из <div>s и <span>s.

доступность

Относительно бесплатной функциональности семантика очень много значит для программы чтения с экрана. Текст перед полем ввода не будет читаться так же, как <label>завещание. Программы чтения с экрана будут игнорировать большую часть вашего CSS, так что это в основном зависит от структуры вашего HTML.

Логический CSS

Зачем использовать, div #headerкогда вы можете использовать <header>и стиль, который напрямую? Семантические теги облегчают разметку и делают ваш стиль более портативным; если у вас есть определенный стиль для зачеркивания и вы всегда используете <del>элементы, этот стиль гораздо более переносим. <del>означает то же самое для всех, но каждый будет называть свой .deletedTextкласс по-разному.

Это также помогает держать всех на одной странице в больших проектах; никто не любит изучать эзотерические правила именования других людей.

SEO

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

Почему это не так часто

Требуется работа, и люди привыкли судить о сайте по тому, как он выглядит и работает . Часто семантичность не учитывается, потому что люди, которые пишут экономическое обоснование для приложений, не понимают этого или почему это важно.

Нетехническим людям очень трудно понять или оценить семантику HTML.

Если веб-сайт выглядит хорошо и кажется, что работает, зачем беспокоиться? Многие люди могут даже не знать, что в этом есть что-то еще. Подобно доступности, это имеет тенденцию игнорироваться, пока кто-то в вашей команде действительно не поймет это.

Если вы хотите, чтобы семантический HTML был приоритетом в вашем проекте, вам нужно представить пример для этого. Показ вашей команды / босса, как ваш сайт работает в программе чтения с экрана, также является полезным инструментом.

Ответ на это просто передать информацию и структурировать ваш документ .

Когда вы используете span и div, ваш документ не имеет структуры. Здесь нет списков, абзацев, таблиц, гиперссылок. Ничего. На самом деле нет смысла выбирать HTML в качестве языка разметки, а затем игнорировать словарь, который он предлагает для выражения и структурирования вашего контента. Структура - важное слово здесь, между прочим. HTML для структурирования не отображается. Для этого и нужен CSS.

Если вы разметите свой код семантически, вы дадите читателям, а также машинам возможность понять данные внутри ваших элементов. Если вы используете элементы span и div полностью, у вас не будет этой дополнительной информации, и вывод их из одних значений может оказаться невозможным.

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

И последнее, но не менее важное: если вы используете только div и span, вам будет сложно стилизовать их с помощью CSS. Селекторы CSS работают над структурой вашего документа, и, если это в основном неоднозначная структура, правила CSS неуместны в применении. Как вы решаете, div div divдействительно ли это относится к table tr tdили body ul li? Тогда вам нужно будет добавить классы и идентификаторы, но затем вы заново изобретаете колесо.

Также см. Рекомендации W3C

Использование соответствующих семантических элементов обеспечит доступность структуры для пользовательского агента. Это включает в себя четкое указание роли, которую различные единицы играют в понимании значения контента. Таким образом можно указать природу части содержимого, такой как абзац, заголовок, выделенный текст, таблица и т. Д. В некоторых случаях следует также указывать отношения между единицами контента, например, между заголовками и подзаголовками или между ячейками таблицы. Затем пользовательский агент может сделать структуру воспринимаемой для пользователя, например, используя различное визуальное представление для различных типов структур или используя другой голос или высоту в слуховом представлении.

Чтобы добавить здесь и без того хорошие ответы, я не упомянул одну вещь - прямую совместимость . По мере развития спецификации, возможно, будут определены дополнительные функциональные возможности для определенных семантических элементов. Если ваш код семантически правильный, он сможет воспользоваться этой функциональностью без какого-либо минимального обслуживания.

Одна из причин, по которой вы не видите много сайтов, которые следуют семантике, заключается в том, что большую часть времени для этого нет бизнес-обоснования. Если это стимулирует продажи (или связанную с ними категорию, такую ​​как экспозиция), то стоит потратить свои деньги на написание семантического HTML.

Лучший вариант, который я могу использовать для семантического использования тегов, - это когда вы используете или используете HTML с инструментом. Например, использование семантических тегов позволяет напрямую стилизовать элементы, не опасаясь добавления или удаления стилей из чего-либо еще. Кроме того, если вам когда-либо придется анализировать HTML с помощью скребка или чего-либо подобного, вы наверняка оцените правильно сформированный и семантический HTML, поскольку становится проще писать запросы XPath и DOM, чтобы найти то, что вам нужно.

Следует отметить, что классы не являются прямой заменой семантических тегов. У меня есть многократно используемые классы, [error, information, warning]которые передают разные значения и, следовательно, стили на основе тега, к которому они прикреплены.

Потому что это может быть полезно или необходимо для сканеров и веб-сервисов (компьютеры AKA, взаимодействующие с компьютерами). Если вы напишите:

<span class="time">Sep 16 at 2:17</span>

... веб-сканер не обязательно будет понимать его как дату, время. Или будет гораздо сложнее найти его как информацию о дате.

Если вы используете:

 <time datetime="2012-02-11 16:24:02">feb 11 2012 at 16:24:02</time>

... любому сканеру будет намного легче находить и анализировать материал.

Когда я говорю «сканеры», я не имею в виду поисковые системы обязательно :)

Я управляю небольшой компанией веб-консалтинга, и наш текущий подход заключается в том, чтобы не использовать новые теги HTML5, потому что мы пытаемся сбалансировать многие факторы. В этом случае баланс между юзабилити, юзабилити и SEO:

• SEO: что сказали здесь другие ответы - это может немного помочь SEO, хотя, исходя из моего опыта, чем более очевидна стратегия SEO, тем меньше вероятность, что она поможет.

• Удобство использования № 1: Разумно предположить, что теги HTML5 предоставляют какое-то преимущество в удобстве использования. Для слепых пользователей несомненно, что любой запасной вариант, который им предоставляет доступный браузер, будет лучше, чем все, что я смогу предоставить. Для вашего типичного пользователя это намного более спорно. Возможно, использовать несжатый медиаплеер, который предоставляет ваш браузер, проще в использовании, чем менее знакомый виджет, который я бы поместил там. Или, возможно, по умолчанию ваш браузер - дерьмо (например, MP3-плеер по умолчанию в Chrome Windows просто перестает работать периодически).

• Удобство использования № 2: Старый IE. Старый IE требует связки HTML5, которые раздувают страницу, чтобы любой из этих тегов работал. Вы должны добавить некоторый скрипт в теги head, который вызывает CreateElement () в цикле для всех тегов HTML5, которые вы используете. Если вы не собираетесь расчесывать каждую страницу для используемых вами тегов, это означает каждый тег HTML5. Это должно выполняться на каждой отдельной странице, что означает отсутствие кэширования. И плохие новости: старый IE медленнее всего исполняет Javascript, поэтому при загрузке он создает небольшую ошибку. Затем вы должны использовать множество старых JavaScript-только для IE и CSS, а часто и Flash, чтобы все новые неподдерживаемые элементы отображались правильно. Вы можете использовать функцию обнаружения до того, как решите загрузить старый код IE, но тогда вы заставляет старых пользователей IE ждать, пока загрузится достаточное количество скриптов, чтобы обнаружить эту функцию, прежде чем даже начинать запрашивать все, что заставляет работать эти теги. Вы можете обнаруживать в браузере и отправлять только старые материалы IE пользователям этих браузеров, но это может сделать кэширование жестким или невозможным в зависимости от вашей платформы. Предоставление разного кода разным пользователям также означает, что тестирование является более сложным - когда-нибудь была ошибка асинхронности? Как насчет того, что происходит только в определенном браузере? И только в производстве? Запишите меня. Таким образом, вы, вероятно, просто собираетесь разослать это наворот всем. Предоставление разного кода разным пользователям также означает, что тестирование является более сложным - когда-нибудь была ошибка асинхронности? Как насчет того, что происходит только в определенном браузере? И только в производстве? Запишите меня. Таким образом, вы, вероятно, просто собираетесь разослать это наворот всем. Предоставление разного кода разным пользователям также означает, что тестирование является более сложным - когда-нибудь была ошибка асинхронности? Как насчет того, что происходит только в определенном браузере? И только в производстве? Запишите меня. Таким образом, вы, вероятно, просто собираетесь разослать это наворот всем.

Пока IE8 не умрет, значение в этих новых тегах HTML5 просто недостаточно для проблем с производительностью, которые они приносят. Нам еще предстоит поработать с аудиторией, где она даже близка к смерти *, но когда-нибудь.

* Наши последние показатели показывают, что IE8 для сайта с наименьшим количеством посетителей IE8 составляет 6%, а для большинства посетителей IE8 - 24%. Далеко, далеко от мертвых.

Краткий ответ: «На практике нет веских оснований». Почти все аргументы в пользу «семантической» разметки - это просто мысли о том, что может или должно произойти, а не что-то материальное. Например, на поисковые системы часто ссылаются, но нет публичных доказательств того, что они меньше всего заботятся об timeили outputили address.

Косвенно мы можем сделать вывод, что им будет все равно в обозримом будущем. Сайт schema.org , созданный некоторыми ведущими поисковыми системами, явно предпочитает особый подход к «семантической разметке», основанный на чем-то совершенно ином, а именно на микроданных ( itemscopeи связанных атрибутах). И они на самом деле делают это в основном для крупных коммерческих или общественных сайтов.

Использование spanили divработает лучше, чем новинки HTML5, так как последние не распознаются старыми версиями IE даже в целях стилизации. Так что вам нужны хитрости, чтобы они работали даже как элементы контейнера.

Однако есть некоторые «семантические» элементы, которые имеют реальное значение, присваиваемое им браузерами, вспомогательным программным обеспечением или поисковыми системами. Использование h1для основного заголовка всегда было хорошей практикой по таким причинам. Использование labelметок полей формы имеет реальное влияние на удобство использования и доступность. И так далее; см . Прагматическое руководство по HTML: Принципы .

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