The Structure of HTML

Antes de comenzar a utilizar HTML es importante que entiendas su estructura. Como se trata de un lenguaje de marcas, se deben marcar las diferentes partes de tu contenido, algo parecido a cuando usas un marcador.

Elementos HTML

El HTML se construye mediante "elementos" y aquellos elementos que usas son lo que marcas. Abajo se muestra un ejemplo de cómo podrías marcar un párrafo de texto normal.

<p>This paragraph is part of my content</p>

Lo que nos encontramos aquí es la frase ("This paragraph is part of my content" -> "Este párrafo es parte de mi contenido") la cual ha sido colocada entre las marcas <p> y </p>. A esas marcas <p> y </p> se les llama etiquetas (tags). Toda etiqueta consiste en, un < al comienzo, una abreviatura en medio y un > en el final. En este caso, p es la abreviatura de párrafo. Combinando las etiquetas <p> y </p> se crea un elemento (element). Todo elemteno HTML comienza con una etiqueta de apertura (en este caso la etiqueta <p>) y en la mayoría de los casos termina con una etiqueta de cierre (esto es </p>). Todo lo que se encuentre entre ambas etiquetas se corresponde con el contenido real del elemento.

Elementos vacíos

La mayoría de los elementos HTML se parecen al anterior <p></p>, pero existen unas excepciones, los llamados elementos vacíos. El elemento "salto de línea" es de este tipo y tiene la siguiente pinta:

<br />

Como puedes ver, no hay ninguna etiqueta de cierre y el "elemento" no muestra ningún contenido, por eso se le llama elemento vacío. Por ser un elemento vacío se le cierra al final de la etiqueta con la marca /. No es obligatorio cerrar un elemento vacío con "/", pero sí se considera una buena práctica y deberías considerar habituarte a usarlo. (Como se dijo anteriormente, la etiqueta consiste en una abreviatura y en este caso br significa "salto de página" (break en inglés)

¡Ojo!

Cuando los navegadores leen un documento HTML5 les da igual si has escrito las etiquetas en mayúsculas o minnúsculas. ¡Pero a otros desarrolladores sí les importa! Incluso puedes escribir la etiqueta de salto de línea de muchas formas, tales como estas:

<BR />
<bR />
<Br />
<br />

Se considera una buena práctica escribir tus etiquetas en minúscula porque facilita la lectura y, simplemente se considera como buen artesano a quien las escriba de ese modo.

Lo que hemos aprendido

• Un elemento HTML comienza con una etiqueta de apertura
• Un elemento HTML finaliza con una etiqueta de cierre.
• Una etiqueta HTML comienza con < y termina con >.
• Las letras entre < y > son abreviaturas.
• El contenido de un elemento se enmarca entre las etiquetas de apertura y cierre.
• Pueden existir elemento HTML vacíos.
• A los elementos vacíos se les marca el cierre dentro de la etiqueta de apertura.
• Habitúate a escribir todas las etiquetas en minúsculas pues es considerado como una buena práctica.