Span и div - Span and div

Для использования охватывать в Википедии см. Википедия: теги Span
HTML
Сравнения

В HTML, охватывать и div теги элементы, используемые для определения частей документ, чтобы их можно было идентифицировать, когда необходима уникальная классификация. Где другие элементы HTML, такие как п (пункт), Эм (курсив) и т. д., точно представляют семантика контента, дополнительное использование охватывать и div Теги приводят к лучшему доступность для читателей и проще ремонтопригодность для авторов. Если существующий элемент HTML не применим, охватывать и div может ценно представлять части документа, так что HTML атрибуты Такие как учебный класс, я бы, язык, или же реж может быть применено.[1][2]

охватывать представляет собой в соответствии часть документа, например слова в предложении. div представляет блочный уровень часть документа, например несколько абзацев, или изображение с подписью. Ни один из элементов сам по себе не имеет смысла, но они допускают семантические атрибуты (например, lang = "en-US"), CSS стиль (например, цвет и типографика) или клиентские сценарии (например, анимация, скрытие и увеличение), которые необходимо применить.[1][2]

Например, если вы хотите сделать определенную часть текста внутри абзаца красной, вы должны использовать охватывать

<span style="color: red;">I am red!</span>

Это вернет текст красного цвета.

История

В охватывать элемент был введен в HTML во втором проекте рабочей группы по интернационализации html-i18n в 1995 году. Однако только HTML 4.01 стал частью языка HTML, появившись в рабочем проекте HTML 4 W3C в 1997 году.[3]

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

div определяет «раздел» документа, элемент уровня блока, который более отличается от элементов выше и ниже него, чем диапазон встроенного материала.[4]

Различия и поведение по умолчанию

Есть несколько различий между div и охватывать. Самая заметная разница в том, как отображаются элементы. В стандартном HTML div это блочный элемент тогда как охватывать является встроенный элемент. В div block визуально изолирует раздел документа на странице и может содержать другие компоненты уровня блока. В охватывать Элемент содержит часть информации, встроенную в окружающий контент, и может содержать только другие компоненты встроенного уровня. На практике отображение элементов по умолчанию можно изменить с помощью Каскадные таблицы стилей (CSS), хотя разрешенное содержимое каждого элемента не может быть изменено. Например, независимо от CSS, охватывать Элемент не может содержать дочерних элементов уровня блока.[5]

Практическое использование

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

Есть три основные причины использовать охватывать и div теги с учебный класс или же я бы атрибуты:

Стилизация с помощью CSS

Смотрите также: Каскадные таблицы стилей и Разделение презентации и содержания

Это обычное дело для <span> и <div> элементы для переноски учебный класс или же я бы атрибуты в сочетании с CSS для применения макета, типографики, цвета и других атрибутов представления к частям содержимого. CSS применяется не только к визуальному стилю: когда он произносится вслух голосовой браузер, Стили CSS могут влиять на скорость речи, напряжение, насыщенность и даже положение в стереофонический изображение.

По этим причинам и для поддержки более семантической сети атрибуты, прикрепленные к элементам в HTML, должны описывать их семантическое назначение, а не просто их предполагаемые свойства отображения на одном конкретном носителе. Например, HTML в <span class="red-bold">password too short</span> семантически слаб, тогда как <em class="warning">password too short</em> использует Эм для обозначения выделения (отображается в виде текста, выделенного курсивом), и вводит более подходящее имя класса. При правильном использовании CSS такие «предупреждения» могут отображаться красным жирным шрифтом на экране, но при распечатке они могут быть опущены, так как к тому времени уже слишком поздно что-либо с ними делать. Возможно, во время разговора им следует сделать дополнительный стресс и немного снизить скорость речи. Второй пример - семантически более богатая разметка, а не просто презентационная.

Семантическая ясность

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

В течение нескольких лет Консорциум World Wide Web (W3C) проводит крупную Семантическая сеть проект, призванный сделать Интернет все более полезным и значимым для сегодняшних и будущих информационных систем.

В микроформаты движение - это попытка построить представление о смысловом классы. Например, программное обеспечение с поддержкой микроформатов может автоматически найти такой элемент, как <span class="tel">123-456-7890</span> и позволяют автоматический набор телефонного номера.

Доступ из кода

Как только разметка HTML или XHTML доставляется в клиентский браузер посетителя страницы, есть вероятность, что клиентскому коду потребуется перемещаться по внутренней структуре (или Объектная модель документа ) веб-страницы. Наиболее частая причина этого заключается в том, что страница доставляется с клиентский JavaScript что будет производить постоянное динамическое поведение после рендеринга страницы. Например, если наведение курсора мыши на ссылку «Купить сейчас» означает, что цена в другом месте страницы становится подчеркнутой, код JavaScript может это сделать, но JavaScript должен идентифицировать элемент цены, где бы он ни находился в разметке. . Достаточно следующей разметки: <div class="price">$45.99</div>. Другой пример - Аякс метод программирования, при котором, например, щелчок по гипертекстовой ссылке может привести к тому, что код JavaScript извлечет текст для нового ценового предложения для отображения вместо текущего на странице без повторной загрузки всей страницы. Когда новый текст возвращается с сервера, JavaScript должен идентифицировать точную область на странице, чтобы заменить ее новой информацией.

Инструментам автоматического тестирования также может потребоваться навигация по разметке веб-страниц с помощью охватывать и div элементы ' учебный класс или же я бы атрибуты. В динамически генерируемый HTML, это может включать использование инструментов тестирования страниц, таких как HttpUnit, член xUnit семейство, а также инструменты нагрузочного или стресс-тестирования, такие как Apache JMeter когда применяется к управляемый формой веб-сайты.

Чрезмерное использование

Разумное использование div и охватывать является важной частью разметки HTML и XHTML. Однако иногда ими злоупотребляют.

Разные список структуры, доступные в HTML, могут быть предпочтительнее самодельной смеси div и охватывать элементы.[6]

Например, это:

<ул учебный класс="меню">  <Ли>Главная страница</Ли>  <Ли>Содержание</Ли>  <Ли>Помощь</Ли></ул>

... обычно предпочтительнее этого:

<div учебный класс="меню">  <охватывать>Главная страница</охватывать>  <охватывать>Содержание</охватывать>  <охватывать>Помощь</охватывать></div>

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

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

Смотрите также

Рекомендации

  1. ^ а б «HTML5: словарь и связанные API для HTML и XHTML». 4.4 Группировка контента: W3C. Получено 16 сентября 2014.CS1 maint: location (связь)
  2. ^ а б «HTML5: словарь и связанные API для HTML и XHTML». 4.5 Семантика на уровне текста: W3C. Архивировано из оригинал 1 августа 2015 г.. Получено 16 сентября 2014.CS1 maint: location (связь)
  3. ^ "HTML / Elements / span - группа сообщества веб-образования". 2013-06-13. Получено 2013-11-14.
  4. ^ «Тег HTML
    ». W3Школы. Получено 22 марта 2018.
  5. ^ «HTML 5.1: 4. Элементы HTML». W3.org. Получено 3 августа 2017.
  6. ^ Гарольд, Эллиотт Расти (2008). Рефакторинг HTML. Эддисон Уэсли. п. 184. ISBN  0-321-50363-5. Нет простого способа найти все неопознанные списки на сайте. [...] Их можно разметить десятками разных способов: как абзацы, divs, таблицы и т. д. После того как вы нашли список, пометить отдельные элементы очень просто. Просто используйте ул, ол, или же дл вместо текущего элемента оболочки. [...] Например, чтобы удалить маркеры, добавьте это правило в таблицу стилей CSS страницы: [...]
  7. ^ Рэггетт, Дэйв; Арно Ле Хорс; Ян Джейкобс (1999). «Добавление структуры в формы: элементы FIELDSET и LEGEND». HTML 4.01 Спецификация. W3C. Получено 12 июля 2010. В НАБОР Элемент позволяет авторам группировать тематически связанные элементы управления и метки. Группирование элементов управления упрощает пользователям понимание их цели, одновременно облегчая навигацию с вкладками для визуальных пользовательских агентов и речевую навигацию для голосовых пользовательских агентов. Правильное использование этого элемента делает документы более доступными.
  8. ^ ван Кестерен, Энн (2010). «Отличия HTML5 от HTML4». W3C. Получено 30 июн 2010.

внешняя ссылка