¿Alguna vez te has preguntado qué es realmente un elemento en HTML? Si es así, no te preocupes, estoy a punto de explicártelo de forma super rápida.
Este es un post que forma parte de la serie de nuestro diccionario HTML donde te volverás todo un profesional en este lenguaje.
También recuerda que si tienes cualquier pregunta, tienes los comentarios de debajo para dejarmela. Y ahora vamos al lío.
¿Qué son los elementos en HTML?
Los elementos en HTML son unidades, o mejor dicho, «cosas» que componen la estructura y definen el contenido y la semántica de una página web. Proporcionan información al navegador sobre cómo presentar y organizar el contenido.
Un elemento HTML consta de una etiqueta de apertura, contenido (si lo tiene) y una etiqueta de cierre.
También pueden tener atributos como veremos más adelante.
Para ilustrarlo, aquí tienes un ejemplo:
<aperturaEtiqueta> Contenido <cierreEtiqueta> = Elemento
Ejemplo de un elemento
Supongamos que queremos crear un párrafo en un documento HTML. En este caso, utilizaremos el elemento de bloque «p» de párrafo.
Vamos a crear una etiqueta de apertura, el contenido y la etiqueta de cierre. Y además, vamos a decirle que tenga una clase concreta como atributo.
<p class=”claseCSS”>Este es un ejemplo de un elemento de párrafo en HTML.</p>
En este ejemplo, <p> es la etiqueta de apertura del elemento de párrafo, y </p> es la etiqueta de cierre. El atributo, que en este caso es la clase. El texto entre la etiqueta de apertura y de cierre («Este es un ejemplo de un elemento de párrafo en HTML.») es el contenido del elemento.
Este elemento HTML le indica al navegador que muestre el contenido como un párrafo, aplicando automáticamente un espaciado antes y después del párrafo y mostrando el texto en un bloque separado (al tratarse de un elemento de bloque).
¿Bastante fácil, verdad?
Lista de Elementos en HTML
He creado una pequeña-gran lista de elementos en HTML. Ya sabes, por si la quieres consultar en algún momento.
| Elemento | Descripción |
|---|---|
<html> | Define el documento HTML |
<head> | Contiene metainformación sobre el documento |
<title> | Define el título del documento |
<body> | Define el cuerpo del documento |
<h1> a <h6> | Define los encabezados |
<p> | Define un párrafo |
<br> | Inserta un salto de línea |
<hr> | Define un cambio temático en el contenido |
<a> | Define un hipervínculo |
<img> | Define una imagen |
<ul> | Define una lista desordenada |
<ol> | Define una lista ordenada |
<li> | Define un elemento de lista |
<div> | Define una sección en un documento |
<span> | Define una sección en un documento |
<input> | Define un control de entrada |
<button> | Define un botón clickeable |
<form> | Define un formulario HTML |
<table> | Define una tabla |
<tr> | Define una fila en una tabla |
<td> | Define una celda en una tabla |
<th> | Define un encabezado de celda en una tabla |
<thead> | Agrupa el encabezado de contenido en una tabla |
<tbody> | Agrupa el cuerpo de contenido en una tabla |
<tfoot> | Agrupa el pie de contenido en una tabla |
Diferencia entre etiqueta y elemento
Ahora, si te preguntara qué diferencia hay entre un elemento y una etiqueta HTML, ¿sabrías decirme cuál es la diferencia?
A veces estos dos términos se suelen utilizar indistintamente, incluso se suelen confundir. Pero la realidad es que tienen significados diferentes.
Las etiquetas son los marcadores que definen el inicio y el final de un elemento.
Y un elemento es el conjunto de las partes que hemos visto, es decir, las etiquetas, los atributos y el contenido. ¡Y ojo! Normalmente tienen una etiqueta de apertura y otra de cierre PERO no siempre es así. Por ejemplo, en el caso de la etiqueta <img>, como hemos visto antes no tiene etiqueta de cierre.
Y ya sabes, recuerda que si tienes alguna duda o sugerencia… ¡Nos vemos en los comentarios!