Использование Span и Div HTML-элементов с CSS в веб-дизайне

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

С помощью
Элемент

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

Чтобы использовать элемент div, поместите открытый
пометьте перед областью вашей страницы, что вы хотите в качестве отдельного раздела, и закрыть
тег после него:


содержимое div

Если области вашей страницы требуется дополнительная информация, которую вы будете использовать для стилизации с помощью CSS позже, вы можете добавить селектор идентификаторов (например, 

ID = "myDiv">

) или селектор класса (например, 

класс = "bigDiv">

). Оба эти атрибута затем можно выбрать с помощью CSS или изменить с помощью JavaScript. Текущие передовые практики склоняются к использованию селекторов классов вместо идентификаторов, отчасти из-за того, какие конкретно селекторы идентификаторов. На самом деле, однако, вы можете использовать любой из них и даже дать разделение как ID, так и селектор класса. Когда использовать
Против 

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

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

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

Использование элемента

Элемент span по умолчанию является встроенным элементом. Это отличает его от элементов div и section. Элемент span часто используется для переноса определенного фрагмента содержимого, обычно текста, чтобы придать ему дополнительный «крючок», который можно стилизовать позже. Используемый с CSS, он может изменить стиль текста, который он включает; однако без каких-либо атрибутов стиля один элемент span никак не влияет на текст.

Это основное различие между span и элементами div. Как упомянуто выше, элемент div включает разрыв абзаца, в то время как элемент span только указывает браузеру применять правила стиля CSS, связанные с тегами:


Выделенный текст и невыделенный текст.



Добавить

 класс = «изюминка»

или другой класс элемента span для стилизации текста с помощью CSS (например, 

 класс = «изюминка»>

). Элемент span не имеет обязательных атрибутов, но наиболее полезными являются те же, что и у элемента div:

  • стиль
  • класс
  • Я бы

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

Например, если вы хотите, чтобы второе слово заголовка h3 было красным, вы можете заключить это слово в элемент span, который будет оформлять это слово как красный текст. Слово по-прежнему остается частью элемента h3, но теперь также отображается красным:

Это мой потрясающий заголовок

Ссылка на основную публикацию