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

Ответ 1

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

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

Представьте себе две параллельные вселенные.

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

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

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

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

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

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

Добавление - переход к семантическому HTML

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

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

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

Ответ 2

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

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

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

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

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

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

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

Ответ 3

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

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

Ответ 4

Открытый код более поддается обслуживанию

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

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

dothething(q);
CmtFn(x);

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

loadUserData(username);
parseComments(language);

Если вы сказали, что # 2 лучше, ну, тот же принцип применяется к HTML. Четкое обозначение вещей, отступающий код и т.д. Упрощает работу с вашим кодом.

Ответ 5

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

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

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

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

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

Ответ 6

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

Ответ 7

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

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

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

Ответ 8

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

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

Ответ 9

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

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

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

Ответ 10

Более предсказуемый результат для разных устройств, используемых для отображения HTML.

Ваша энергия может быть сфокусирована на разных причудах/ошибках в каждом из устройств (наиболее часто используемых для приложений yor).

Ответ 11

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

С точки зрения HTML и CSS вам нужно только настроить CSS и оставить только HTML.

Что касается производительности, скажем, всего, что делает ваш HTML/CSS, правильное разделение данных и форматирование может сделать ваш HTML меньше.

Ответ 12

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

Ответ 13

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

Теперь взгляните на "эквивалент" с HTML4: <div class="article">Bla bla bla</div>

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

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

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

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

Ответ 14

В дополнение ко всем этим ответам семантический HTML улучшает рейтинг поиска (см. SEO). Google и другие поисковые системы ищут определенные семантические фрагменты вашей страницы и используют их для выполнения большого количества рангов.