делитель и диапазон
| HTML |
|---|
| Сравнения |
В HTML , стандартном языке разметки для документов, предназначенных для отображения в веб-браузере , <div> и <span> Теги — это элементы, используемые для определения частей документа , чтобы их можно было идентифицировать, когда необходима уникальная классификация. Если другие элементы HTML, такие как <p> (абзац), <em> (акцент) и так далее, точно передают семантику содержания, дополнительное использование <span> и <div> теги обеспечивают лучшую доступность для читателей и удобство обслуживания для авторов. Если ни один существующий элемент HTML не применим, <span> и <div> может полноценно представлять части документа, поэтому атрибуты HTML, такие как class, id, lang, или dir можно применить. [1] [2]
<span> представляет собой встроенную часть документа, например слова в предложении. <div> представляет на уровне блока , например несколько абзацев или изображение с заголовком. часть документа <div> означает разделение. Элементы допускают семантические атрибуты (например, lang="en-US"), стили CSS (например, цвет и типографика) или сценарии на стороне клиента (например, анимация, скрытие и увеличение), которые необходимо применить. [1] [2]
<div> определяет «разделение» документа, элемент уровня блока, который более отличается от элементов выше и ниже него, чем от диапазона встроенного материала. [3]
Примеры
[ редактировать ]Например, чтобы сделать определенную часть текста внутри абзаца красной, <span> можно использовать следующим образом: [ необходимо разъяснение (также включите <div> пример) ]
| HTML Синтаксис (веб-код, используемый для форматирования текста) |
Оформленный вывод (как видят посетители веб-страницы) |
|---|---|
I am <span style="color: red;">red</span> and I am <span style="color: blue;">blue</span>!
|
Я красный и я синий ! |
История
[ редактировать ]The <span> Элемент был введен в HTML рабочей группы по интернационализации во втором проекте html-i18n в 1995 году. Однако только в HTML 4.01 он стал частью языка HTML, появившись в рабочем проекте HTML 4 W3C в 1997 году. [4]
<span> был введен для разметки любого строкового фрагмента текста, поскольку «необходим общий контейнер для хранения атрибутов LANG и BIDI в тех случаях, когда никакой другой элемент не подходит». Он по-прежнему служит этой общей цели, хотя с тех пор был определен гораздо более широкий диапазон семантических элементов, а также гораздо больше атрибутов, которые, возможно, потребуется применить.
Различия и поведение по умолчанию
[ редактировать ]Существует множество различий между <div> и <span>. Наиболее заметное отличие заключается в том, как отображаются элементы. В стандартном HTML <div> является элементом уровня блока, тогда как <span> является встроенным элементом . <div> блок визуально изолирует раздел документа на странице и может содержать другие компоненты уровня блока. <span> Элемент содержит часть информации, встроенную в окружающий контент, и может содержать только другие компоненты встроенного уровня. На практике отображение элементов по умолчанию можно изменить с помощью каскадных таблиц стилей (CSS), хотя разрешенное содержимое каждого элемента не может быть изменено. Например, независимо от CSS, <span> элемент не может содержать дочерних элементов уровня блока. [5]
Практическое использование
[ редактировать ]<span> и <div> элементы используются исключительно для обозначения логической группировки вложенных элементов.
Есть три основные причины использовать <span> и <div> теги с class или id атрибуты :
Стилизация с помощью CSS
[ редактировать ]Это обычное явление для <span> и <div> элементы для переноски class или id атрибуты в сочетании с CSS для применения атрибутов макета, типографики, цвета и других атрибутов представления к частям контента. CSS применяется не только к визуальному стилю: при произнесении вслух голосового браузера стили CSS могут влиять на скорость речи, ударение, насыщенность и даже положение в стереофоническом изображении.
По этим причинам, а также для поддержки более семантической сети атрибуты, прикрепленные к элементам в HTML, должны описывать их семантическое назначение, а не просто их предполагаемые свойства отображения на одном конкретном носителе. Например, HTML в <span class="red-bold">password too short</span> является семантически слабым, тогда как <em class="warning">password too short</em> использует <em> элемент для обозначения выделения (отображается в виде текста, выделенного курсивом) и вводит более подходящее имя класса. При правильном использовании CSS такие «предупреждения» могут отображаться на экране красным жирным шрифтом, но при распечатке они могут быть опущены, поскольку к тому времени уже слишком поздно что-либо с ними делать. Возможно, во время разговора им следует уделять больше внимания и немного снижать скорость речи. Второй пример — это семантически более богатая разметка, а не просто презентационная.
Семантическая ясность
[ редактировать ]Такая группировка и маркировка частей содержимого страницы может быть введена исключительно для того, чтобы сделать страницу более семантически значимой в общих чертах. Невозможно сказать, как будет развиваться Всемирная паутина в ближайшие годы и десятилетия. Веб-страницы, разработанные сегодня, могут по-прежнему использоваться, когда информационные системы, которые мы пока не можем себе представить, сканируют, обрабатывают и классифицируют Интернет. Даже современные поисковые системы, такие как Google и другие, используют собственные алгоритмы обработки информации значительной сложности.
В течение нескольких лет Консорциум Всемирной паутины (W3C) реализует крупный проект семантической паутины , призванный сделать всю сеть все более полезной и значимой для сегодняшних и будущих информационных систем.
Движение микроформатов — это попытка построить идею семантической classэс. Например, программное обеспечение, поддерживающее микроформаты, может автоматически найти такой элемент, как <span class="tel">123-456-7890</span> и разрешить автоматический набор телефонного номера.
Доступ из кода
[ редактировать ]Как только разметка HTML или XHTML доставляется в клиентский браузер посетителя страницы, существует вероятность того, что коду на стороне клиента потребуется перемещаться по внутренней структуре (или объектной модели документа ) веб-страницы. Наиболее распространенной причиной этого является то, что страница поставляется с клиентским JavaScript , который обеспечивает постоянное динамическое поведение после отображения страницы. Например, если наведение курсора мыши на ссылку «Купить сейчас» предназначено для выделения цены в другом месте страницы, код JavaScript может это сделать, но JavaScript должен идентифицировать элемент цены, где бы он ни находился в разметке. . Достаточно следующей разметки: <div class="price">$45.99</div>. Другим примером является метод программирования Ajax , где, например, щелчок по гипертекстовой ссылке может привести к тому, что код JavaScript получит текст нового ценового предложения для отображения вместо текущего на странице без перезагрузки всей страницы. Когда новый текст возвращается с сервера, JavaScript должен определить точную область на странице, которую нужно заменить новой информацией.
Инструментам автоматического тестирования также может потребоваться навигация по разметке веб-страницы с помощью <span> и <div> элементы' class или id атрибуты. В динамически генерируемом HTML это может включать использование инструментов тестирования страниц, таких как HttpUnit , член семейства xUnit , а также инструментов нагрузочного или нагрузочного тестирования, таких как Apache JMeter, при применении к веб-сайтам, управляемым формами .
Чрезмерное использование
[ редактировать ]Разумное использование <div> и <span> является важной частью разметки HTML и XHTML. Однако иногда ими злоупотребляют.
Различные структуры списков , доступные в HTML, могут быть предпочтительнее самодельной смеси <div> и <span> элементы. [6]
Например, это:
<ul class="menu">
<li>Main page</li>
<li>Contents</li>
<li>Help</li>
</ul>
который производит
... обычно предпочтительнее этого:
<div class="menu">
<span>Main page</span>
<span>Contents</span>
<span>Help</span>
</div>
который производит
Другие примеры семантического использования HTML, а не <div> и <span> элементы включают использование <fieldset> элементы для разделения веб-формы, использование <legend> элементы для идентификации таких подразделений и использования <label> определить форму <input> элементы, а не <div>, <span> или <table> элементы, используемые для таких целей. [7]
В HTML5 появилось несколько новых элементов; несколько примеров включают <header>, <footer>, <nav> и <figure> элементы. Использование семантически соответствующих элементов обеспечивает лучшую структуру HTML-документов, чем <span> или <div>. [8]
См. также
[ редактировать ]- HTML и HTML5
- HTML-элемент
- HTML-атрибут
- Каскадные таблицы стилей и справка:Каскадные таблицы стилей
- CDATA
- Контекстные объекты в промежутках (COinS)
- JavaScript
- Семантическая сеть
Ссылки
[ редактировать ]- ^ Jump up to: а б «HTML5: словарь и связанные API для HTML и XHTML» . W3C. 4.4 Группировка контента . Проверено 16 сентября 2014 г.
- ^ Jump up to: а б «HTML5: словарь и связанные API для HTML и XHTML» . W3C. 4.5 Семантика уровня текста. Архивировано из оригинала 1 августа 2015 года . Проверено 16 сентября 2014 г.
- ^ «HTML-тег <div>» . W3Школы . Проверено 22 марта 2018 г.
- ^ «HTML/Elements/span — группа сообщества веб-образования» . 13 июня 2013 г. Проверено 14 ноября 2013 г. [ мертвая ссылка ]
- ^ «HTML 5.1: 4. Элементы HTML» . W3C . Проверено 3 августа 2017 г.
- ^ Гарольд, Эллиотт Расти (2008). Рефакторинг HTML . Эддисон Уэсли. п. 184. ИСБН 978-0-321-50363-3 .
Не существует простого способа найти все неопознанные списки на сайте. [...] Их можно размечать десятками разных способов: как абзацы,
divтаблицы, [и т. д.]. Найдя список, разметить отдельные элементы будет легко. Просто используйте<ul>,<ol>, или<dl>вместо текущего элемента-обертки. [...] Например, чтобы удалить маркеры, добавьте это правило в таблицу стилей CSS страницы: [...] - ^ Рэггетт, Дэйв ; Арно Ле Хорс; Ян Джейкобс (1999). «Добавление структуры формам: элементы FIELDSET и LEGEND» . Спецификация HTML 4.01 . W3C . Проверено 12 июля 2010 г.
The
FIELDSETЭлемент позволяет авторам группировать тематически связанные элементы управления и метки. Группирование элементов управления облегчает пользователям понимание их цели, одновременно облегчая навигацию по вкладкам для визуальных пользовательских агентов и речевую навигацию для речевых пользовательских агентов. Правильное использование этого элемента делает документы более доступными. - ^ ван Кестерен, Энн (2010). «Отличия HTML5 от HTML4» . W3C . Проверено 30 июня 2010 г.