Elementos HTML
Los elementos son los fundamentos del Lenguaje de Marcado de Hipertexto (HTML). Cada documento HTML está compuesto por elementos que se especifican mediante etiquetas.
A menudo se confunden los elementos HTML y las etiquetas HTML. Las etiquetas se usan para abrir y cerrar el objeto, mientras que el elemento incluye ambas etiquetas y su contenido. Consideremos un ejemplo con la etiqueta <h1>: <h1> Título del documento </h1> - es un elemento, y <h1>, </h1> - son etiquetas.
Tipos de elementos HTML
Los elementos HTML pueden venir en pares o ser vacíos. Los elementos emparejados tienen etiquetas de apertura () y de cierre (</>), y el contenido del elemento se coloca entre ellas.
TIP
¡No olvides la etiqueta de cierre! Aunque algunos elementos HTML se muestran correctamente incluso sin la etiqueta de cierre, no debes confiar en ello. Podría provocar resultados inesperados o errores.
Los elementos vacíos no tienen etiquetas de cierre. En XHTML los elementos vacíos se "cierran" en la etiqueta de apertura así: <br/> .
Los elementos vacíos en HTML son: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track> y <wbr>.
Ejemplo de los elementos vacíos HTML:
Ejemplo con elementos HTML emparejados|Elementos HTML|W3Docs
<!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>Resultado
En el ejemplo anterior usamos 4 elementos emparejados:
- 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.
En el ejemplo dado también usamos una etiqueta vacía <br> para insertar un salto de línea.
Elementos HTML de bloque y en línea
Con fines de estilo, todos los elementos HTML se dividen en dos categorías: elementos de bloque y elementos en línea.
Los elementos de bloque son aquellos que estructuran la parte principal de tu página web, dividiendo tu contenido en bloques coherentes. Siempre comienzan en una nueva línea y ocupan todo el ancho de la página, de izquierda a derecha; también pueden ocupar una línea o varias líneas y tienen un salto de línea antes y después del elemento. Los elementos de bloque pueden incluir tanto elementos de bloque como elementos en línea.
Los elementos 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 bloque tienen etiquetas de apertura y de cierre.
Ejemplo de los elementos HTML de bloque:
Mensaje para el autor|Ejemplo de elementos de bloque|Elementos HTML|W3Docs
<!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>Resultado
En el ejemplo usamos el elemento 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 unas pocas palabras. No provocan un salto de línea ni ocupan todo el ancho de una página, solo el espacio delimitado por su etiqueta de apertura y cierre. Los elementos en línea suelen usarse dentro de otros elementos HTML.
Los elementos en línea son: <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt> y <var>.
Elementos HTML anidados
Los elementos HTML pueden contener otros elementos, es decir, pueden estar anidados. Por ejemplo, si quieres dar a un texto un énfasis fuerte y decirle al navegador que lo muestre en negrita, puedes usar la etiqueta <strong> anidada dentro de la etiqueta <p>.
Ejemplo de los elementos HTML anidados:
Elementos HTML
<!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>TIP
Las etiquetas HTML deben estar "anidadas" 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>.
La etiqueta de cierre
Al final debes poner la etiqueta de cierre. Sin embargo, incluso si te olvidas de ella, algunos elementos HTML seguirán mostrándose correctamente. La etiqueta de cierre se considera opcional, así que el ejemplo siguiente funcionará en todos los navegadores. Pero no debes confiar en ello. Si quieres evitar errores inesperados, intenta no olvidar la etiqueta de cierre.
Ejemplo en el que falta la etiqueta de cierre HTML:
Ejemplo en el que falta la etiqueta de cierre HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>HTML end tag </h1>
<p>We forgot to put the end tag.
</body>
</html>Elementos HTML vacíos
Los elementos HTML que no tienen contenido se llaman elementos vacíos. El <br>, que define un salto de línea, es un elemento vacío que no tiene etiqueta de cierre.
Ejemplo de la etiqueta <br> HTML:
Ejemplo de la etiqueta <br> HTML:
<!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>Practice
What are some characteristics of HTML elements as described on the given webpage?