В чем смысл элементов span, ul, li, h1 и т. Д. (И других), если стилизованные элементы div могут имитировать их функциональность? - PullRequest
2 голосов
/ 25 июня 2010

Я создаю настраиваемые пользователем HTML-шаблоны и решаю, какие типы элементов использовать. С одной стороны, я мог бы использовать наиболее подходящий тип элемента HTML для каждого типа контента - ul / li для списков, h1, h2 (и т. Д.) Для заголовков и так далее. С другой стороны, я мог бы просто использовать div с атрибутами класса. Фактически, я должен был бы использовать атрибуты класса с любым подходом, и мне пришлось бы дополнительно обнулить некоторые неприятные свойства по умолчанию для некоторых типов элементов HTML, если бы я использовал предыдущий подход.

Учитывая гибкость CSS, довольно легко использовать элементы div практически для каждого элемента, содержащего текст, и, вероятно, это можно сделать с использованием меньшего количества CSS. Должен ли я попытаться использовать h1 - h6, span, ul, li, hr, p и т. Д. По назначению, или просто использовать div?

Ответы [ 5 ]

3 голосов
/ 25 июня 2010

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

1 голос
/ 25 июня 2010

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

Поисковая система знает, что текст в <h1> более важен, чем текст в <p>. Поисковая система знает, что текст в <span> объединяется, образуя смежные фразы с окружающим его встроенным текстом, тогда как текст в <div> - это отдельная строка (даже если вы использовали CSS display: inline, чтобы изменить его внешний вид ).

На самом деле вы ничего не получите, используя <div class="h1"> вместо семантически наиболее подходящего элемента. Возможно, вам понадобятся еще несколько правил CSS для сброса, если вы используете <ul>, <table> или <form>, но это все.

1 голос
/ 25 июня 2010

Одно слово, семантика.

Для меня, по крайней мере, теги имеют значение помимо того, что они выводят на экран для пользователя.Семантика страницы в HTML - это (вне головы) контекст элементов и то, как они сочетаются друг с другом на странице.

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

Правильно сформированный код всегда (!) Будет иметь правильно вложенные заголовки, придерживаясь тегов заголовков,

<h1>The Title of my page</h1>
<h2>The subtitle of my page</h2>
<h3>Perhaps the title of a section</h3>

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

Другая причина может заключаться в том, что пользователь не имеет 't загрузил вашу таблицу стилей, после чего все ваши div'ы будут перемещаться повсюду.Например, использование мобильного браузера на ограниченном тарифном плане.

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

Чтобы вернуться к точке семантики,согласно законодательству Великобритании, вы обязаны обслуживать пользователей с ограниченными возможностями.Используя div, вы не.У программы чтения с экрана возникнут проблемы с расшифровкой вашего кода из-за его безумного безумия.

:)

0 голосов
/ 25 июня 2010

Все эти теги описывают значение или с хорошим словом, семантика . Люди со слабым зрением, которые используют программы чтения с экрана, зависят от того, что веб-страница построена с тегами, которые сообщают им, что такое различные куски текста на странице. Например. H1, H2, Hn все говорят им, что это заголовок. P говорит им, что это абзац. UL / LI говорит им, что это маркированный список. и т.д. Человек с программой чтения с экрана использует эти теги для сканирования страницы. Они могут «увидеть», сколько тегов заголовков (H1, H2, Hn) находятся на странице, а затем просто просмотреть их, чтобы найти раздел, который они хотят прочитать.

0 голосов
/ 25 июня 2010

Одним словом, да.Вы должны использовать соответствующий элемент, и по нескольким причинам:

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

Поисковые боты используют ваши H # тэги для определения важности.

...