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>Это даст следующий результат -