Elementos HTML
Aprende qué son los elementos HTML: pareados vs vacíos (void), de bloque vs en línea, y cómo anidarlos, con ejemplos ejecutables.
Los elementos son los fundamentos del Lenguaje de Marcado de Hipertexto (HTML). Cada documento HTML está compuesto por elementos que se especifican mediante etiquetas.
Los elementos HTML y las etiquetas HTML suelen confundirse. Las etiquetas se usan para abrir y cerrar el objeto, mientras que el elemento incluye tanto las etiquetas como su contenido. Consideremos un ejemplo con la etiqueta <h1>: <h1> Título del documento </h1> - es un elemento, y <h1>, </h1> - son etiquetas.
Los atributos de un elemento también se escriben dentro de su etiqueta de apertura — consulta Atributos HTML para ver cómo añaden información adicional.
Tipos de elementos HTML
Los elementos HTML se presentan en dos formas: elementos pareados y elementos vacíos (void).
Un elemento pareado tiene una etiqueta de apertura (<tag>) y una etiqueta de cierre correspondiente (</tag>), y el contenido del elemento se sitúa entre ellas. Por ejemplo, <p>Hello</p> está formado por la etiqueta de apertura <p>, el texto Hello y la etiqueta de cierre </p>.
¡No olvides la etiqueta de cierre! Aunque algunos elementos HTML se muestran correctamente incluso sin la etiqueta de cierre, no dependas de esto. Puede generar resultados inesperados o errores.
Ejemplo de elementos HTML pareados:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Title of the document</h1>
<p>The first paragraph</p>
<p>The second paragraph, <br /> where line break is inserted </p>
</body>
</html>En el ejemplo anterior usamos 4 elementos pareados:
- el elemento
<html>, que incluye todos los demás elementos HTML de la página web, - el elemento
<body>, que contiene el cuerpo de la página web, - el elemento
<p>, que define un párrafo, - el elemento
<h1>, que contiene el encabezado de la página web.
También usamos la etiqueta vacía <br> para insertar un salto de línea.
Elementos HTML vacíos
Los elementos vacíos (también llamados void elements) no tienen contenido y, por lo tanto, no tienen etiqueta de cierre. El elemento <br>, que inserta un salto de línea, es un buen ejemplo. En XHTML los elementos vacíos se "autocierran" en la etiqueta de apertura así: <br/>.
Los elementos vacíos en HTML son: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track> y <wbr>.
El antiguo elemento <keygen> también era un elemento vacío, pero ha sido eliminado del estándar HTML y no debería usarse más.
Ser "vacío" solo hace referencia a no tener contenido — no dice nada sobre el diseño. Algunos elementos vacíos son de nivel de bloque (por ejemplo, <hr> dibuja una regla horizontal de ancho completo), mientras que otros son en línea (por ejemplo, <br> y <img>).
Ejemplo de la etiqueta HTML <br>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>HTML <br> tag</h1>
<p>This tag <br /> defines a line break.</p>
</body>
</html>Elementos HTML de bloque y en línea
Para fines de estilo y maquetación, la mayoría de los elementos HTML se encuadran en una de dos categorías según su valor display predeterminado: elementos de nivel de bloque y elementos en línea. Este comportamiento predeterminado es importante porque controla tres cosas antes de que escribas ningún CSS:
- Flujo: los elementos de nivel de bloque comienzan en una nueva línea y se apilan verticalmente; los elementos en línea se sitúan uno junto a otro dentro de una línea de texto.
- Ancho y modelo de caja: un elemento de nivel de bloque ocupa todo el ancho disponible y respeta
width,heightymargin/paddingverticales. Un elemento en línea solo ocupa el ancho de su contenido e ignorawidth/heighty los márgenes verticales. - Anidamiento: un elemento de nivel de bloque puede contener otros elementos de nivel de bloque y en línea, pero un elemento en línea generalmente solo debe contener otros elementos en línea (y texto), no elementos de nivel de bloque.
Puedes cambiar la categoría predeterminada de un elemento con la propiedad CSS display, pero conocer el valor predeterminado te ayuda a predecir cómo se organizará una página. Para un análisis más profundo, consulta Elementos HTML de bloque y en línea.
Los elementos de nivel de bloque estructuran la parte principal de tu página web dividiendo el contenido en bloques coherentes. Siempre comienzan en una nueva línea y ocupan todo el ancho disponible, y tienen un salto de línea antes y después del elemento.
Los elementos de nivel de bloque son: <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> y <video>.
Todos los elementos de nivel de bloque tienen etiquetas de apertura y cierre.
Ejemplo de los elementos HTML de nivel de bloque:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<footer>
<p>Author: W3docs team</p>
<p><a href="[email protected]">Send message to the author</a>.</p>
</footer>
</body>
</html>En el ejemplo usamos el elemento de nivel de bloque <footer> para definir el pie de página de la página web y su contenido.
Los elementos en línea se usan para distinguir una parte de un texto, para darle una función o significado particular. Los elementos en línea suelen incluir una sola palabra o algunas palabras. No provocan un salto de línea y no ocupan el ancho completo de la página, solo el espacio delimitado por su contenido. Los elementos en línea generalmente se usan dentro de otros elementos HTML.
Los elementos en línea son: <a>, <abbr>, <b>, <bdo>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time> y <var>.
Los elementos <acronym>, <big> y <tt> también fueron en su momento elementos en línea, pero ahora están obsoletos. Usa <abbr> en lugar de <acronym>, y usa CSS en lugar de <big> y <tt>.
Elementos HTML anidados
Los elementos HTML pueden contener otros elementos, es decir, pueden anidarse. Por ejemplo, si quieres dar a un texto un énfasis fuerte e indicarle al navegador que lo muestre en negrita, puedes usar la etiqueta <strong> anidada dentro de la etiqueta <p>.
Ejemplo de los elementos HTML anidados:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Title of the document</h1>
<p>The first paragraph</p>
<p><strong>This part of the sentence</strong> has a strong emphasis and is displayed as bold.</p>
</body>
</html>Las etiquetas HTML deben anidarse en el orden correcto, lo que significa que la etiqueta abierta más recientemente es siempre la siguiente en cerrarse.
En nuestro ejemplo, cerramos primero la etiqueta <strong> y luego la etiqueta <p>.