HTML - блоки

Все элементы HTML можно разделить на две категории. (a) Элементы уровня блока (b)Встроенные элементы.

Блочные элементы

Блочные элементы появляются на экране так, как будто перед ними и после них есть разрыв строки. Например, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr Элементы />, <blockquote> и <address> являются элементами уровня блока. Все они начинаются на своей новой строке, и все, что следует за ними, появляется на отдельной новой строке.

Встроенные элементы

С другой стороны, встроенные элементы могут появляться в предложениях и не должны появляться в отдельной новой строке. <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < Элементы code>, <cite>, <dfn>, <kbd> и <var> являются встроенными элементами.

Группировка HTML-элементов

Есть два важных тега, которые мы очень часто используем для группирования различных других тегов HTML (i) тег <div> и (ii) тег <span>.

Тег <div>

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

пример

Ниже приводится простой пример тега <div>. Мы изучим каскадную таблицу стилей (CSS) в отдельной главе, но мы использовали ее здесь, чтобы показать использование тега <div> -

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML div Tag</title>
   </head>
	
   <body>
      <!-- First group of tags -->
      <div style = "color:red">
         <h4>This is first group</h4>
         <p>Following is a list of vegetables</p>
         
         <ul>
            <li>Beetroot</li>
            <li>Ginger</li>
            <li>Potato</li>
            <li>Radish</li>
         </ul>
      </div>

      <!-- Second group of tags -->
      <div style = "color:green">
         <h4>This is second group</h4>
         <p>Following is a list of fruits</p>
         
         <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Mango</li>
            <li>Strawberry</li>
         </ul>
      </div>
   </body>
   
</html>

Это даст следующий результат -

Тег <span>

HTML <span> - это встроенный элемент, и его можно использовать для группировки встроенных элементов в HTML-документе. Этот тег также не предоставляет никаких визуальных изменений в блоке, но имеет большее значение при использовании с CSS.

Разница между тегом <span> и тегом <div> заключается в том, что тег <span> используется со встроенными элементами, тогда как тег <div> используется с элементами уровня блока.

пример

Ниже приводится простой пример тега <span>. Мы изучим каскадную таблицу стилей (CSS) в отдельной главе, но мы использовали ее здесь, чтобы показать использование тега <span> -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML span Tag</title>
   </head>
	
   <body>
      <p>This is <span style = "color:red">red</span> and this is
         <span style = "color:green">green</span></p>
   </body>
	
</html>

Это даст следующий результат -