En el ejemplo HTML anterior, nos apresuramos un poco para evitar perdernos en demasiada charla.
Este fue el HTML que escribimos:
<p>Un párrafo de texto</p> <ul> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ul>
Quiero darte resultados rápido y de forma rápida, ¡y ponerte en movimiento lo antes posible! ¡Ahora tienes una página HTML que puedes ver!
Pero ese archivo HTML que guardamos realmente no tenía todos los elementos que necesita un archivo HTML adecuado.
¿Qué quiero decir con eso?
Aquí hay una versión más correcta de eso:
<!DOCTYPE html> <html> <head> </head> <body> <p>Un párrafo de texto</p> <ul> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ul> </body> </html>
Los elementos que teníamos antes están envueltos en la etiqueta body.
Esa, junto con head (en este ejemplo vacío), está contenida en la etiqueta html, que es la etiqueta raíz.
body contiene los elementos visibles de la página.
head se utiliza para contener información especial sobre el contenido y más, como veremos más adelante.
En un documento, podemos tener solo una apariencia de html, body y head.
Finalmente, en la parte superior tenemos el doctype: <!DOCTYPE html>. Esto le dice al navegador «este es un archivo HTML».
Observa que usé una sangría de 2 caracteres para las etiquetas anidadas.
Las etiquetas anidadas deben sangrarse.
En el ejemplo, la etiqueta ul contiene las etiquetas li, por lo que las etiquetas li están anidadas.
Utiliza 2 o 4 caracteres, o el carácter de tabulación para sangrar esos elementos anidados, según tu preferencia, pero mantén una «estructura de árbol». Esto hará que sea mucho más fácil analizar visualmente un archivo HTML.
