In questo articolo, ti mostrerò come creare intestazioni ed elenchi in HTML, usando i tag h1 -> h6 e ul – li .

Quando presentiamo un articolo in Word, inseriremo l'intestazione 1 per il titolo principale di quell'articolo. Il prossimo passo è inserire l'intestazione 2 per gli elementi di grandi dimensioni, all'interno di ogni elemento di grandi dimensioni inseriremo le intestazioni 3. E anche in HTML utilizzeremo i tag di intestazione (abbreviati in h ) per presentare sul web.

Successivamente introduco anche il tag ul e il tag li , si tratta di due coppie di tag che spesso vanno insieme per creare elementi di elenco. Dai, cominciamo.

Crea intestazioni in HTML

Il tag h ( titolo ) viene utilizzato per creare il titolo principale e i sottotitoli di una pagina web, non solo ha l'effetto di enfatizzare i titoli ma funziona anche nel campo della SEO del sito web.

Abbiamo un totale di 6 tag h, da h1 -> h6 e la dimensione del carattere di default di ogni tag diminuirà gradualmente. H1 avrà la dimensione più grande, seguito da h2 .. e infine h6.

 <h1>Tiêu đề H1</h1> <h2>Tiêu đề H2</h2> <h3>Tiêu đề H3</h3> <h4>Tiêu đề H4</h4> <h5>Tiêu đề H5</h5> <h6>Tiêu đề H6</h6>

Per farti capire meglio, guarda come ho presentato in questo articolo come segue:

• Nel titolo principale dell'articolo ho inserito il tag h1 " Tag HTML per formati di intestazione ed elenco "
• I due sottotitoli " tag formattazione intestazione " e " tag formattazione elenco " utilizzano il tag h2 perché è una piccola parte del tag h1
• Allo stesso modo, se in ogni tag h2 , se è ulteriormente suddiviso, utilizzeremo il tag h3 .

Crea elenchi in HTML

Se l'intestazione viene utilizzata per creare il titolo principale e il sottotitolo per gli elementi, il tag elenco viene utilizzato per elencare i dati. Questa presentazione è abbastanza comune quando si lavora con Word.

Esempio : supponiamo di avere 3 elementi, ora li elencherò come segue.

• articolo 1
• voce 2
• voce 3

Per creare la struttura sopra, dobbiamo combinare i tag ul e li . Dove il tag ul viene utilizzato per dichiarare un elenco di elementi e il tag li viene utilizzato per dichiarare ogni elemento.

Con l'esempio sopra, la sua struttura HTML sarà simile a questa:

 <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul>

Nel caso in cui desideri avere un elemento secondario, il che significa che ogni elemento avrà un elenco di elementi secondari, dobbiamo solo creare un tag ul all'interno di quell'elemento.

Ad esempio : Item2 avrà elementi figlio aggiuntivi come segue.

• articolo 1
• voce 2
  • voce 2.1
  • voce 2.2
• voce 3

Ora la struttura HTML sarà simile a questa:

 <ul> <li>item1</li> <li>item2 <ul> <li>​item2.1</li> <li>item2.2</li> </ul> </li> <li>item3</li> </ul>

Se vuoi creare un elenco contrassegnato da numeri come questo:

1. Articolo 1
2. Articolo 2
3. Articolo 3

Quindi usa il tag ol insieme al tag li come segue:

 <ol> <li>item1</li> <li>item2</li> <li>item3</li> </ol>

Esercizi fai da te per creare intestazioni ed elenchi in HTML

L'argomento è il seguente : Scrivere un articolo utilizzando HTML e CSS, utilizzando i tag di intestazione per creare intestazioni e sottosezioni. All'interno di ogni elemento usa i tag ul e li per creare un elenco.

Di solito utilizziamo i tag ul e li per creare menu multilivello, menu verticali e menu orizzontali. Tuttavia, per farlo, devi combinare con CSS. Quindi, dopo aver appreso le due parti di HTML e CSS, faremo questi esempi pratici.