Насколько важны семантические элементы HTML, специфичные для макета?

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

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

  • section
  • aside
  • footer
  • header
  • article
  • и т.д...

Каковы последствия, если вы неверно применяете эту «макетную» семантику? Я читал, что это положительно влияет на читателей и слепых. Но когда я использую программу как Dolphin Supernova, чтобы проверить, подходят ли созданные мной сайты подходит для слепых. Я не вижу разницы между страницей с «правильной» семантической разметкой и версией, в которой я заменил все элементы макета на элемент div по умолчанию. Итак, почему важны эти элементы макета. Каковы преимущества при правильном их использовании. И на кого / что вы повлияете, если не будете их использовать должным образом.


html semantic-markup
person user007    schedule 23.04.2015    source источник
comment
Семантический HTML не только интуитивно понятен, но и имеет свои преимущества в SEO.   -  person Sandeep Nayak    schedule 23.04.2015
comment
Итак, вы согласны с тем, что <ul> удобно, но не желаете распространять это на <aside> или _3 _...? Вы можете заменить все на <span class="..">, понимаете? Мне очень жаль, но я не понимаю этого рассуждения.   -  person deceze♦    schedule 23.04.2015
comment
Вам не обязательно их использовать. Это просто настоятельно рекомендуется по многим причинам, наиболее важными из которых является тот факт, что ваш код будет легко читаемым (эффективно для больших проектов) и будет соответствовать стандартам W3C (что является хорошим плюсом).   -  person ovesco    schedule 24.04.2015
comment
Мне нравится использовать эти семантические элементы html, потому что они упрощают чтение моего кода. Но когда у меня есть список меню, я не понимаю, почему писать <ul> в (неинтересном) элементе навигации лучше.   -  person user007    schedule 24.04.2015

Ответы (1)


arrow_upward
6
arrow_downward

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

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

Это также может быть просто вы, пытающееся со временем эффективно поддерживать и расширять свой собственный код.

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

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

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

Возможно, в качестве более наглядного примера: в браузере Opera была (есть?) Экспериментальная функция, в которой он отображает дополнительную панель под адресной строкой, которая содержит кнопки для навигации по странице, на которой вы находитесь; с его помощью вы можете быстро перейти на верхнюю страницу, следующую страницу, страницу индекса и т. д. Для того, чтобы это работало, браузеру, очевидно, необходимо знать, что такое «верхняя» или «следующая» страница. Без стандартов это невозможно. См. здесь для дальнейшего объяснения.

person deceze♦    schedule 24.04.2015