Каковы преимущества использования семантического HTML?

Question

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

Спасибо

Answer 1

Не о производительности

Семантическая разметка не о производительности, а о смысле.

Давайте представим две параллельные вселенные.

• В мире тупого HTML есть только один тег: <thing>. Как бы вы указали, где стили должны применяться? Как браузеры узнают, как отобразить страницу? Как программы чтения с экрана для слепых различают заголовки и текст, сноски и пункты меню? Вы должны добавить все виды неуклюжих атрибутов.
• Между тем, в подробном мире HTML , есть множество имен. У вас есть <header> и <footer> и <article> и <caption> и <menu> и <paragraph> и <footnote> и т. Д. Теперь вы можете разумно применять стили и любую программу, которая читает ваш контент - браузеры Читатели экрана, что угодно - могут иметь соответствующие контенту правила. Например:
  • «Мой пользователь слепой, поэтому я должен объявить, что есть изображения, предложить прочитать соответствующие подписи и не беспокоиться о загрузке фактических данных изображения».
  • «У моего пользователя маленький экран и хорошее зрение, и он попросил меня сделать абзацы небольшими, чтобы их было много на странице».
  • "Мой пользователь не заботится о сносках и никогда не хочет их видеть."

Реальный мир находится где-то посередине между этими двумя сценариями.

Некоторые аспекты семантического HTML немного идеалистичны, но принцип здравый. Например, использование <strong> вместо <b> передает «этот текст важен» и не обязательно «этот текст должен быть жирным шрифтом». Возможно, ваш пользователь хочет, чтобы важный текст был выделен оранжевым цветом. Это до них.

Дело в том, что HTML - это разметка , что означает полезную маркировку . Семантический HTML - это то, чем должен быть весь HTML: полезные, значимые метки.

Быстрая загрузка вашего сайта - это совсем другой вопрос.

(см. Также: мой ответ здесь .)

---

Добавление - эволюция к семантическому HTML

Я думаю, что со временем HTML становится более семантическим.

Вернувшись в мир тупого HTML, они, вероятно, в итоге получат сумасшедшую разметку, например <thing type='list'> и <thing render='image'>. Веб-программисты будут жаловаться: «Эй, мы делаем это все время. Почему бы просто не иметь тег <image>? Это облегчит нашу жизнь».

В реальном мире люди постоянно кодируют такие вещи, как <div id='nav'> и <div class='article'>. Поэтому имеет смысл создавать новые элементы, такие как <nav> и <article> и <section>. Вот что могли бы сделать черновые спецификации HTML5 .

Answer 2

семантический HTML и производительность

В семантическом HTML используются не только правильные теги для правильных целей, что, очевидно, улучшает SEO, но и разделение разметки (HTML), стиля (CSS) и сценариев (JS). Разделение не только улучшит обслуживание, но и улучшит производительность загрузки, поскольку вы обычно кэшируете файлы CSS / JS. Если вы загромождаете HTML-файл всем необработанным кодом CSS / JS и / или используете style вместо id или class, это приведет к излишнему увеличению размера HTML-страницы, и потребуется больше времени для ее перемещения .

Answer 3

Семантический код использует элементы HTML для своих целей. Хорошо структурированный HTML будет иметь семантическое значение для широкого круга пользователей и пользовательских агентов (браузеры без таблиц стилей, текстовые браузеры, КПК, поисковые системы и т. Д.)

Преимущества

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

Рабочий пример этого заключается в том, что поисковые системы взвешивают важность ключевых слов в соответствии с тем, что они есть. Например, заголовок статьи, заключенный в один из заголовков (h1 и его иерархия), получит большую важность и, следовательно, видимость, чем промежутки. Семантический HTML обеспечивает эффективную поисковую оптимизацию (SEO).

Средство извлечения семантических данных W3C является хорошей демонстрацией возможностей использования семантического HTML и автоматизации программного обеспечения.

Побочным эффектом исключения представления информации из семантической разметки является то, что теперь данные и их представление могут быть отделены в реализации. Это означает, что вы можете изменить презентацию, не касаясь данных, или применить презентацию к нескольким типам данных. Это именно то, чего вместе достигают такие технологии, как CSS и XHTML. Конечно, семантический HTML не является необходимым для такого разделения, но, будучи семантическим, он обеспечивает исключение презентационной информации.

http://www.seoblogger.co.uk/serps/the-benefits-of-using-semantic-code.html

Answer 4

Четкий код более удобен для обслуживания

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

Если бы вы кодировали JavaScript, вы бы написали такие функции?

dothething(q);
CmtFn(x);

... или как это?

loadUserData(username);
parseComments(language);

Если вы сказали, что # 2 лучше, ну, тот же принцип применим к HTML . Четкая маркировка, правильное выделение кода и т. Д. Облегчает поддержку вашего кода.

Answer 5

Многие люди думают, что производительность - это мера скорости, с которой что-то выполняется. В презентации Линуса Торвальда на git (на youtube) он утверждает, что производительность - это нечто большее. Производительность также о полезности. Я думаю, что моя машина - это машина с высокими эксплуатационными характеристиками, потому что она потребляет меньше топлива. Веб-сайт, который трудно использовать, может загружаться быстро, но плохо выполняет свою задачу.

Аргумент о том, что семантика в сети повышает эффективность, поскольку файлы CSS и js кэшируются, не является надежным. Можно создать веб-сайт с очень маленьким размером, который совсем не семантический. Но в большинстве случаев, если вы вдумчивы и говорите, что имеете в виду (семантика), вы, вероятно, увеличите общую производительность, потому что в любом случае вы работаете эффективно! Сказать, что ты имеешь в виду, - лучший ответ в большинстве случаев.

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

Наконец, нет абсолютной семантики. Я бы посчитал ячейку таблицы столбцом в некоторых обстоятельствах. И насколько разные термины сильные и смелые? Вы действительно можете утверждать, что «сильный» всегда должен использоваться? «Жирный» имеет одинаково ясное значение большую часть времени. Конечно, «выделение» и «курсив» различны. «Курсив» - это реализация «Акцента». Если вы семантичны до крайности, вы можете потратить много времени и усилий на соблюдение правил и меньше времени на выполнение задач. Кроме того, ты станешь сердитым!

Надеюсь, это поможет!

Answer 6

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

• Семантически правильная разметка увеличивает вероятность машины (поисковая система / бот / скребок для экрана или другой тип сценария) возможность проанализировать ваш контент, чтобы оценить его назначение.

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

Answer 7

Несемантическая разметка рискует быть недоступной для людей с ограниченными возможностями, для начала. Прочитайте недавнюю статью Николаса С. Закаса на эту тему; Я думаю, что это отличное введение в предмет.

И имейте в виду, что поисковая система, такая как Google, видит ваш сайт почти так же, как вспомогательная технология, используемая инвалидом. Робот Google не знает и не заботится о том, что что-то имеет закругленные углы и довольно синий фон, но это имеет большое значение, если он знает, что это <h1>, а не просто старый <div>.

Answer 8

Кроме того, использование семантического HTML будет полезным для пользователей вспомогательных технологий, таких как программы чтения с экрана, которые могут изменять высоту или пол читающего голоса для обозначения важной информации, презентационной информации или акцента. Например, если информация, которую вы хотите по-настоящему подчеркнуть, помечена как <<code>em> для демонстрации, а не просто выделена жирным шрифтом (вы все равно можете ввести тег <em>, который будет выделен в вашем CSS), программа чтения с экрана изменит перегиб этого конкретного слова, чтобы подчеркнуть его.

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

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

Answer 9

Вам и другим разработчикам легче узнать, что происходит, лучше читать, когда CSS и другие недоступны. «Может» работать лучше при использовании программы чтения с экрана, что улучшает вашу доступность. Что еще более важно, я думаю, это заставляет вас писать более точную разметку, которая с большей вероятностью будет проверяться без необходимости делать слишком много исправлений. Проще говоря, это хорошая практика, но я бы сказал, что не стоит слишком зацикливаться на правильной работе на все 100%, умственные способности лучше тратить на другие проблемы, чем спорить о погоде, а dl лучше чем ul для данной проблемы и т. Д.

Answer 10

Есть явные преимущества. Например, взгляните на этот кусок кода: <article>Bla bla bla</article>

Теперь рассмотрим «эквивалент» с HTML4: <div class="article">Bla bla bla</div>

Для машины нет особой разницы между <div> или <article>. Две разные строки без особого значения. Но если вы предоставляете разные теги, вы можете назначить разное значение каждому из них, и это то, что на самом деле.

С точки зрения бота поисковой системы, тег <div> - это то, что используется в качестве контейнера, более не имеющего особого значения. Но если я использую <article>, то робот поисковой машины поймет, что внутри это будет фрагмент текста, интересный для людей.

Вы можете увидеть это более четко с другим тегом, таким как <aside>, где вы говорите, что то, что находится внутри него, не имеет никакого отношения к остальной части документа. Например, вы можете разместить рекламу внутри (реклама может быть связана с содержанием, но это использование случайно:))

С точки зрения производительности, я не знаю, есть ли большая разница или есть ли разница вообще, но это не цель, которую нужно достичь.