Div и span не являются взаимозаменяемыми при создании веб-страницы. Каждый из них предназначен для разных целей, и знание того, когда его использовать, поможет вам создать чистые и простые в управлении веб-сайты.
Использование элемента Div
Divs определяют логические подразделения на вашей веб-странице. ДИВО -Short для разделения, в основном окно , в котором вы можете поместить другие элементы HTML , которые принадлежат вместе. У подразделения может быть несколько других элементов, таких как абзацы, заголовки, списки, ссылки, изображения и т. Д. Внутри него могут даже быть другие подразделения, чтобы обеспечить дополнительную структуру и организацию.
Чтобы использовать элемент div , поместите открытый тег <div> перед областью вашей страницы, которую вы хотите разделить, а закрывающий тег </ div> после него:
<div>
содержимое div
</ div>
Если вы будете стилизовать эту область с помощью CSS, вы можете добавить селектор идентификатора к открывающему тегу div:
<div id = "myDiv">
Или вы можете добавить селектор класса:
<div class = "bigDiv">
Затем вы можете работать с этими элементами в CSS или JavaScript.
Современные лучшие практики склоняются к использованию селекторов классов вместо идентификаторов, отчасти из-за того, насколько специфичны селекторы идентификаторов. Однако любой из них является приемлемым, и вы можете даже дать div как ID, так и селектор класса.
Дивы или разделы?
Элемент div отличается от элемента section HTML5 тем, что он не придает вложенному контенту никакого семантического значения. Если вы не уверены, должен ли блок контента быть элементом div или разделом , подумайте о назначении элемента и контента.
- Если вам нужен элемент просто для добавления стилей в эту область страницы, вы должны использовать элемент div .
- Если контент имеет четкую направленность и может стоять сам по себе, рассмотрите возможность использования элемента section .
В конечном итоге, и div, и секции ведут себя одинаково, и вы можете присвоить любой из них атрибуты и стилизовать их с помощью CSS. Оба являются элементами уровня блока.
Использование пролетов
Span является встроенным элементом по умолчанию, в отличие от элементов div и section . Элемент span обычно используется для переноса определенного фрагмента содержимого, такого как текст, для придания ему дополнительной возможности, которую можно использовать для добавления стилей. Однако без каких-либо атрибутов стиля span никак не влияет на текст.
Другое различие между элементами span и div состоит в том, что элемент div включает в себя разрыв абзаца, тогда как элемент span только указывает браузеру применять правила стиля CSS, которые заключены в теги <span> :
<div id = "mydiv">
<p> <span> выделенный текст </ span> и невыделенный текст. </ p>
</ div>
Вы можете добавить
класс = «изюминка»
или аналог элемента span для стилизации текста с помощью CSS.
Элемент span не имеет обязательных атрибутов, но наиболее полезными являются те же, что и у элемента div :
- стиль
- учебный класс
- Я БЫ
Используйте span, если вы хотите изменить стиль содержимого, не определяя его как новый элемент уровня блока в документе.
Например, если вы хотите, чтобы второе слово заголовка h3 было красным, вы можете заключить это слово в элемент span, который будет оформлять это слово как красный текст. Слово по-прежнему остается частью элемента h3 , но будет отображаться красным цветом.