Elenchi e testo in HTML

Per gestire il testo si usano generalmente i seguenti tag

Ecco i principali tag per delimitare il testo:

<p>

individua l'apertura di un nuovo paragrafo

<div>

individua l'apertura di un nuovo blocco di testo

<span>

individua l'apertura di un elemento di testo inline

Ecco i tag per grassetto, sottolineato e corsivo:

<b>Testo in grassetto</b>

<u>Testo sottolineato</u>

<i>Testo in corsivo</i>

Per gestire gli elenchi invece si usano:

Elenchi puntati

• primo elemento
• secondo elemento
• terzo elemento

	<ul>
		<li>primo elemento</li>
		<li>secondo elemento</li>
		<li>terzo elemento</li>
	</ul>
	

Elenchi puntati indentati

• primo della 1a lista
• secondo della 1a lista
  • primo della 2a lista
  • secondo della 2a lista
    • primo della 3a lista
  • terzo della 2a lista

	<ul>
		<li>primo della 1a lista</li>
		<li>secondo della 1a lista
			<ul>
				<li>primo della 2a lista</li>
				<li>secondo della 2a lista
					<ul>
						<li>primo della 3a lista</li>
					</ul>
				</li>
				<li>terzo della 2a lista</li>
			</ul>
		</li>
	</ul>
	

Elenchi numerati

1. primo elemento
2. secondo elemento
3. terzo elemento

	<ol>
		<li>primo elemento</li>
		<li>secondo elemento</li>
		<li>terzo elemento</li>
	</ol>
	

Elenchi numerati indentati

1. Primo livello
   1. Secondo livello
      1. Terzo livello
      2. Terzo livello
   2. Secondo livello
2. Primo livello

	<ol type="1"><!-- numeri -->
		<li>Primo livello
			<ol type="a"><!-- lettere -->
				<li>Secondo livello
					<ol type="I"><!-- numeri romani -->
						<li>Terzo livello</li>
						<li>Terzo livello</li>
					</ol>
				</li>
				<li>Secondo livello</li>
			</ol>
		</li>
		<li>Primo livello</li>
	</ol>
	

Elenchi numerati con partenze diverse

10. elemento
11. elemento
30. elemento
31. elemento

	<ol start="10">
		<li>elemento</li>
		<li>elemento</li>
		<!-- da questo punto in poi contiamo a partire da 30 -->
		<li value="30">elemento</li>
		<li>elemento</li>
	</ol>
	

Indentazione del testo

Un livello di indentazione

Due livelli di indentazione

Un livello di indentazione

Due livelli di indentazione

	<dl>
		<dt>Un livello di indentazione</dt>
			<dd>Due livelli di indentazione</dd>
		<dt>Un livello di indentazione</dt>
			<dd>Due livelli di indentazione</dd>
	</dl>
	

Ecco i link all'esercizio di esempio sulle liste

Es HTML liste      Es HTML liste su JSFiddle