HTML - Blocchi
Tutti gli elementi HTML possono essere classificati in due categorie (a) Elementi a livello di blocco (b)Elementi in linea.
Elementi di blocco
Gli elementi del blocco vengono visualizzati sullo schermo come se avessero un'interruzione di riga prima e dopo di essi. Ad esempio, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote> e <address> sono tutti elementi a livello di blocco. Tutti iniziano sulla loro nuova linea e tutto ciò che li segue appare sulla sua nuova linea.
Elementi in linea
Gli elementi in linea, d'altra parte, possono apparire all'interno di frasi e non devono apparire su una nuova riga propria. <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < Gli elementi code>, <cite>, <dfn>, <kbd> e <var> sono tutti elementi inline.
Raggruppamento di elementi HTML
Ci sono due tag importanti che usiamo molto frequentemente per raggruppare vari altri tag HTML (i) tag <div> e (ii) tag <span>
Il tag <div>
Questo è il tag a livello di blocco molto importante che gioca un ruolo importante nel raggruppare vari altri tag HTML e applicare CSS su un gruppo di elementi. Anche ora il tag <div> può essere utilizzato per creare layout di pagina web in cui definiamo diverse parti (sinistra, destra, in alto ecc.) Della pagina utilizzando il tag <div>. Questo tag non fornisce alcuna modifica visiva sul blocco, ma ha più significato quando viene utilizzato con CSS.
Esempio
Di seguito è riportato un semplice esempio di tag <div>. Impareremo il Cascading Style Sheet (CSS) in un capitolo separato, ma lo abbiamo usato qui per mostrare l'uso del tag <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>Questo produrrà il seguente risultato:
Il tag <span>
L'HTML <span> è un elemento inline e può essere utilizzato per raggruppare elementi inline in un documento HTML. Inoltre, questo tag non fornisce alcuna modifica visiva sul blocco ma ha più significato quando viene utilizzato con CSS.
La differenza tra il tag <span> e il tag <div> è che il tag <span> viene utilizzato con elementi inline mentre il tag <div> viene utilizzato con elementi a livello di blocco.
Esempio
Di seguito è riportato un semplice esempio di tag <span>. Impareremo il Cascading Style Sheet (CSS) in un capitolo separato, ma lo abbiamo usato qui per mostrare l'uso del tag <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>Questo produrrà il seguente risultato: