HTML - Bloki
Wszystkie elementy HTML można podzielić na dwie kategorie (a) Blokowe elementy poziomu (b)Elementy wbudowane.
Elementy blokowe
Elementy blokowe pojawiają się na ekranie tak, jakby miały przerwę w linii przed i po nich. Na przykład <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr Elementy />, <blockquote> i <address> są elementami blokowymi. Wszystkie zaczynają na własnej nowej linii, a wszystko, co następuje po nich, pojawia się w nowej linii.
Elementy wbudowane
Z drugiej strony elementy wbudowane mogą pojawiać się w zdaniach i nie muszą pojawiać się w osobnym wierszu. <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < code>, <cite>, <dfn>, <kbd> i <var> to elementy wbudowane.
Grupowanie elementów HTML
Istnieją dwa ważne tagi, których używamy bardzo często do grupowania różnych innych tagów HTML (i) tag <div> i (ii) tag <span>
Tag <div>
Jest to bardzo ważny znacznik blokowy, który odgrywa dużą rolę w grupowaniu różnych innych tagów HTML i stosowaniu CSS na grupie elementów. Nawet teraz tag <div> może być używany do tworzenia układu strony, w którym definiujemy różne części (lewą, prawą, górną itp.) Strony za pomocą tagu <div>. Ten tag nie zapewnia żadnych wizualnych zmian w bloku, ale ma to większe znaczenie, gdy jest używany z CSS.
Przykład
Poniżej znajduje się prosty przykład tagu <div>. Nauczymy się kaskadowego arkusza stylów (CSS) w osobnym rozdziale, ale użyliśmy go tutaj, aby pokazać użycie tagu <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>To da następujący wynik -
Tag <span>
HTML <span> jest elementem wbudowanym i można go używać do grupowania elementów wbudowanych w dokumencie HTML. Ten tag również nie zapewnia żadnych wizualnych zmian w bloku, ale ma większe znaczenie, gdy jest używany z CSS.
Różnica między tagiem <span> a tagiem <div> polega na tym, że tag <span> jest używany z elementami wbudowanymi, podczas gdy tag <div> jest używany z elementami blokowymi.
Przykład
Poniżej znajduje się prosty przykład tagu <span>. Nauczymy się kaskadowego arkusza stylów (CSS) w osobnym rozdziale, ale użyliśmy go tutaj, aby pokazać użycie tagu <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>To da następujący wynik -