HTML es un lenguaje de marcado que define la estructura del contenido en base a unos elementos llamados etiquetas. Existen muchísimas etiquetas en este enlace podrás verlas todas, pero no te asustes, las irás asimilando a medida que necesites utilizarlas.
Estructura de las etiquetas
Estas etiquetas tienen una estructura, la mayoría de ellas necesitan una etiqueta de apertura y una etiqueta de cierre para indicar dónde empieza y dónde acaba el elemento. Veamos un ejemplo.
<p>Hola mundo</p>
En el código anterior podemos ver lo siguiente:
Las partes principales que vemos en la imagen y en el código son:
La etiqueta de apertura: consiste en el nombre del elemento (en este caso,
p), encerrado por paréntesis angulares (<>) de apertura y cierre. Indica dónde empieza a tener efecto un elemento, en este caso un párrafo.El contenido: es lo que agrupa el elemento en su interior, en este caso solo texto.
La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una barra de cierre (
/) antes del nombre de la etiqueta indicando que termina un elemento, en este caso dónde termina el párrafo.El elemento: es el conjunto formado por la etiqueta de apertura, el contenido y la etiqueta de cierre.
Excepciones
Como en toda regla, existen excepciones a esta estructura, y es que hay etiquetas que no pueden tener contenido, es decir, no pueden agrupar nada en su interior, por tanto, estas etiquetas son elementos vacíos. Veamos un ejemplo de un elemento vacío:
<img src="https://to.lk/YmspRz" alt="un ordenador con código" />
La estructura del elemento anterior tiene la siguiente forma:
En este ejemplo podemos observar algunas diferencias con el anterior, lo primero que podemos destacar es que el elemento no tiene etiqueta de cierre, en su lugar, esta etiqueta acaba con una barra de cierre ( / ) antes del paréntesis angular final de la etiqueta.
Cuando una etiqueta se crea de esta manera, se dice que es una etiqueta "auto cerrada" o más conocida por su término en inglés self closing tag.
Además, podemos ver que al no tener una etiqueta de cierre separada, esta no puede tener contenido en su interior.
Atributos
Las etiquetas, tanto normales como de auto cierre pueden tener además otro elemento llamado atributo.
Los atributos contienen información adicional del elemento, estros atributos pueden servir para diferentes funciones. En el caso de la imagen anterior, el atributo src le indicará a la etiqueta en que lugar tiene que buscar la imagen que se tiene que mostrar, y el atributo alt establecerá el texto alternativo que aparecerá si la imagen no se puede cargar de manera correcta o se utilizará por los lectores de pantalla para describir la imagen.
Por tanto, el texto alt debe proporcionarle al lector la suficiente información como para que este tenga una buena idea de qué muestra la imagen sin poder verla.
Los atributos deben seguir algunas normas:
Debe haber un espacio entre el nombre de la etiqueta y el atributo.
Debe haber un espacio entre los atributos.
El nombre del atributo va seguido de un signo de igual ( = )
A continuación del signo igual aparecerá el valor del atributo entre comillas ( " " )
En caso de ser un elemento con etiqueta de apertura y de cierre, los atributos siempre se incluirán en la etiqueta de apertura, nunca en la de cierre.
Anidación de etiquetas
Ahora que ya sabes que es una etiqueta y que algunas etiquetas pueden tener contenido en su interior, te voy a hablar sobre la anidación de etiquetas. Se llama anidamiento al hecho de colocar elementos dentro de otros.
Por ejemplo, si se quiere resaltar una palabra dentro de un texto se puede hacer uso de la etiqueta <strong>. Veamos un ejemplo.
<p>Hola <strong>mundo</strong> en etiqueta bien anidada</p>
El elemento <strong> se utiliza para marcar con énfasis lo que haya en su interior (más información).
Es importante asegurarse de que los elementos estén correctamente anidados, de lo contrario el resultado podría no ser el esperado. Ejemplo de una etiqueta mal anidada:
<p>Hola <strong>mundo</p>en etiqueta mal anidada</strong>
Los elementos deben abrirse y cerrarse de manera ordenada de forma que siempre haya uno dentro de otro y no estén entrelazados.
De lo contrario, los navegadores intentarán adivinar la estructura correcta y puede que el resultado no sea el esperado, como en el ejemplo.
Ejercicios interactivos
Ahora que ya conoces algunos aspectos básicos del HTML te invito a que le eches un vistazo al listado de etiqueta de este enlace e intentes hacer los siguientes ejercicios en un editor online como codepen. Después de cada ejercicio tendrás la solución para ver si has acertado.
Ejercicio 1
Crea dos elementos de imagen, uno que tenga el atributo src y el atributo alt, y otro elemento imagen que solo tenga el atributo alt para ver qué ocurre si una imagen puede cargar correctamente y qué ocurre si la imagen no puede cargar.
El objetivo del ejercicio es ver qué ocurre en cada caso y para qué sirven los atributos.
Ejercicio 2
Intenta replicar la siguiente imagen teniendo en cuenta los diferentes tamaños de texto:
El objetivo es mostrar información con diferentes tamaños de texto de más importante a menos importante, por ejemplo:
Texto 1: Tu nombre (Tamaño de letra grande)
Texto 2: Tu apellido (Tamaño de letra algo más pequeño que el texto 1)
Texto 3: Tu edad (Tamaño de letra algo más pequeño que el texto 2)
Texto 4: Una descripción (Tamaño de letra de un párrafo)
Ejercicio 3
Intenta replicar la siguiente imagen:
Crea un elemento de tipo párrafo con el texto: "Este es el tercer ejercicio que hago de etiquetas HTML" y haz que el texto "tercer ejercicio" tenga más énfasis que el resto, a continuación, agrega al final del párrafo una imagen con los siguientes atributos:
src: https://to.lk/UJFSgn
alt: "gato bebé dentro de un calzado blanco"
Conclusión
Si has llegado hasta aquí, enhorabuena 🎉, vas por el camino correcto, sigue practicando y conseguirás tus objetivos. Te animo a que intentes crear tu propia estructura HTML a tu gusto utilizando el listado de etiquetas a ver qué consigues crear.
Espero que este breve recorrido por los conceptos básicos de HTML te haya resultado útil y te inspire a seguir aprendiendo y experimentando.
¡Nos vemos en el próximo post!