Войти
В HTML, spanи divтеги - это элементы, используемые для определения частей документа , чтобы их можно было идентифицировать, когда необходима уникальная классификация. Если другие элементы HTML, такие как p(абзац), em(выделение) и т. Д., Точно представляют семантику содержимого, дополнительное использование Теги spanи divобеспечивают лучшую доступность для читателей и упрощают ремонтопригодность для авторов. Если существующий элемент HTML не применим, spanи divмогут полноценно представлять части документа, так что атрибуты HTML, такие как class, id, lang Можно применитьили dir.
spanпредставляет собой строчную часть документа, например слова в предложении. divпредставляет часть документа уровня блока, например, несколько абзацев или изображение с его подписью. Ни один из элементов сам по себе не имеет смысла, но они допускают семантические атрибуты (например, lang = "en-US"), стили CSS (например, цвет и типографику) или клиентские сценарии (например, анимация, скрытие и увеличение), которые необходимо применить.
Например, если вы хотите сделать определенную часть текста внутри абзаца красной, вы должны использовать span
Я красный!
Это вернет текст красного цвета.
Элемент spanбыл представлен в HTML во втором заседании рабочей группы по интернационализации. draft html-i18n в 1995 году. Однако только HTML 4.01 стал частью языка HTML, появившись в рабочем проекте HTML 4 W3C в 1997 году.
В 1995 году spanбыл введен для разметки любого встроенного диапазона текста, потому что «общий контейнер необходим для переноса атрибутов LANG и BIDI в случаях, когда другой элемент не подходит». Он по-прежнему служит этой общей цели, хотя с тех пор был определен гораздо более широкий диапазон семантических элементов, а также существует гораздо больше атрибутов, которые, возможно, потребуется применить.
divопределяет «раздел» документа, элемент уровня блока, который более отличается от элементов над и под ним, чем от диапазона встроенного материала.
Между divи spanсуществует несколько различий. Самая заметная разница в том, как отображаются элементы. В стандартном HTML div- это элемент уровня блока, тогда как span- это встроенный элемент. Блок divвизуально изолирует раздел документа на странице и может содержать другие компоненты уровня блока. Элемент spanсодержит часть информации, встроенную в окружающее содержимое, и может содержать только другие компоненты встроенного уровня. На практике отображение элементов по умолчанию можно изменить с помощью каскадных таблиц стилей (CSS), хотя разрешенное содержимое каждого элемента не может быть изменено. Например, независимо от CSS, элемент spanможет не содержать дочерних элементов уровня блока.
spanи divчисто для того, чтобы подразумевать логическую группировку вложенных элементов.
Есть три основных причины использовать теги spanи divс атрибутами classили id :
Для элементов и обычно используются атрибуты classили idв сочетании с CSS для применения макета, типографики, цвета и других атрибутов представления. к частям содержания. CSS применяется не только к визуальному стилю: при произнесении вслух в голосовом браузере стили CSS могут влиять на скорость речи, напряжение, насыщенность и даже положение в стереофоническом изображении.
По этим причинам и для поддержки более семантической сети атрибуты, прикрепленные к элементам в HTML, должны описывать их семантическое назначение, а не просто их предполагаемые свойства отображения на одном конкретном носителе. Например, HTML в пароль слишком короткийсемантически слаб, тогда как пароль слишком короткийиспользует элемент em для обозначения акцента (отображается как текст, выделенный курсивом) и вводит более подходящее имя класса. При правильном использовании CSS такие «предупреждения» могут отображаться красным жирным шрифтом на экране, но при распечатке они могут быть опущены, поскольку к тому времени уже слишком поздно что-либо с ними делать. Возможно, во время разговора им следует сделать дополнительный стресс и немного снизить скорость речи. Второй пример - семантически более богатая разметка, а не просто презентационная.
Такой вид группировки и маркировки частей содержимого страницы может быть введен исключительно для того, чтобы сделать страницу более семантически значимой в общих чертах. Невозможно сказать, как Всемирная паутина будет развиваться в ближайшие годы и десятилетия. Веб-страницы, разработанные сегодня, могут все еще использоваться, когда информационные системы, которые мы еще не можем себе представить, просматривают, обрабатывают и классифицируют сеть. Даже современные поисковые системы, такие как Google и другие, используют проприетарные алгоритмы обработки информации значительной сложности.
В течение нескольких лет Консорциум всемирной паутины (W3C) выполнял крупный проект семантической паутины, призванный сделать всю сеть более полезной и значимой для сегодняшнего дня. и информационные системы будущего.
Движение микроформатов - это попытка построить идею семантических классов. Например, программа с поддержкой микроформатов может автоматически найти такой элемент, как 123-456-7890, и разрешить автоматический набор телефонного номера.
После того, как разметка HTML или XHTML доставлена в клиентский браузер посетителя страницы, есть вероятность, что клиентскому коду потребуется перемещаться по внутренней структуре (или Объектная модель документа ) веб-страницы. Наиболее частая причина этого заключается в том, что страница доставляется с клиентским JavaScript, который будет производить постоянное динамическое поведение после того, как страница будет отрисована. Например, если наведение курсора мыши на ссылку «Купить сейчас» означает, что цена в другом месте страницы становится подчеркнутой, код JavaScript может это сделать, но JavaScript должен идентифицировать элемент цены, где бы он ни находился в разметке.. Достаточно следующей разметки: $45.99. Другим примером является метод программирования Ajax, где, например, щелчок по гипертекстовой ссылке может привести к тому, что код JavaScript извлечет текст для нового ценового предложения, отображаемого вместо текущего на странице, без повторного -загрузка всей страницы. Когда новый текст возвращается с сервера, JavaScript должен идентифицировать точную область на странице, чтобы заменить ее новой информацией.
Инструменты автоматического тестирования также могут нуждаться в навигации по разметке веб-страницы с использованием элементов spanи divclassили id. атрибуты. В динамически генерируемом HTML это может включать использование инструментов тестирования страниц, таких как HttpUnit, член семейства xUnit, а также инструментов нагрузочного или стресс-тестирования, таких как как Apache JMeter при применении к веб-сайтам, управляемым формами.
Разумное использование divи spanявляется важной частью разметки HTML и XHTML. Однако иногда ими злоупотребляют.
Различные структуры list, доступные в HTML, могут быть предпочтительнее самодельной смеси элементов divи span.
Для Например, это:
... обычно предпочтительнее этого:
Главная страница Содержание Справка
Другие примеры семантического использования HTML вместо элементов divи spanвключают использование элементов fieldsetдля разделения сети форма, использование элементов legend для идентификации таких разделов и использование label для идентификации формы input Для таких целей используются элементы , а не элементы div, spanили table.
HTML5 представил несколько новых элементов; несколько примеров включают элементы header, footer, navи figure. Использование семантически подходящих элементов обеспечивает лучшую структуру для HTML-документов, чем spanили div.
