HTML-Element: funcionamiento y estructura de los elementos en HTML
Los elementos en HTML se utilizan para dar estructura a un documento HTML. Informan al navegador sobre cómo tratar los contenidos incluidos.
¿Qué es un HTML-Element?
Un elemento en HTML es un componente dentro de un documento HTML que muestra al navegador cómo debe manejarse un contenido. Normalmente comienza con una etiqueta de apertura <> y finaliza con una etiqueta de cierre </>. Entre ambas etiquetas se encuentra el contenido o el ámbito de validez. La etiqueta de apertura da una instrucción sobre cómo tratar el contenido, y la etiqueta de cierre finaliza dicha instrucción. Los elementos en HTML se utilizan para el formato, las particularidades semánticas y la simple representación de contenidos.
- 3x más rápido, ahora un 60 % de ahorro
- Alta disponibilidad >99.99 %
- Solo en IONOS: hasta 500 GB incluidos
La sintaxis de un elemento HTML
La estructura básica de un elemento en HTML casi siempre es la misma. La sintaxis es la siguiente:
<tagname>Aquí va el contenido o ámbito de validez</tagname>La etiqueta de apertura <tagname> indica de qué tipo de elemento se trata. A continuación, va el contenido o el ámbito de validez, y después la etiqueta de cierre </tagname>, que finaliza la instrucción.
HTML-Element vs. HTML-Tag: ¿en qué se diferencian?
Las etiquetas HTML son una parte fundamental de los elementos en HTML. Una etiqueta de apertura marca el inicio de un elemento, y una etiqueta de cierre marca su final. Junto con el contenido, forman un elemento en HTML completo.
Ejemplo de HTML-Element
En el siguiente ejemplo sencillo se muestra el funcionamiento de un HTML-Element. También se ilustra el uso de un elemento en HTML anidado adicional. Todo documento HTML utiliza esta anidación para crear una estructura jerárquica. En el siguiente código, se usan cuatro elementos en HTML diferentes: <html>, <[body](t3://page?uid=36866)>, <h1> y <p>:
<!DOCTYPE html>
<html>
<body>
<h1>Esto es un título</h1>
<p>Aquí va un párrafo.</p>
</body>
</html>El elemento <html> define todo el documento como un documento HTML. Todos los demás contenidos están dentro de este elemento. A continuación, sigue el elemento <body>, que contiene el contenido visible del documento. Dentro de este elemento se encuentran los elementos HTML <h1> y <p>. <h1> le indica al navegador que interprete el contenido como un título HTML del nivel más alto de la jerarquía. El elemento <p> introduce un apartado de contenido.
Particularidad: elementos HTML vacíos
Existen algunos elementos en HTML que no necesitan contenido ni una etiqueta de cierre. Un ejemplo es el salto de línea HTML <br>. Este se inicia solo con una etiqueta de apertura, pero aun así se considera un HTML-Element. En el siguiente ejemplo puedes ver cómo se utiliza dentro de otro elemento HTML:
<!DOCTYPE html>
<html>
<body>
<p>Este es un párrafo <br>
con un salto de línea.</p>
</body>
</html>Los elementos HTML más importantes
Al trabajar con documentos HTML, necesitarás usar numerosos elementos en HTML. Aquí te mostramos algunos de los más importantes:
| HTML-Element | Descripción |
|---|---|
<html>
|
Define HTML como el tipo de documento |
<head>
|
Marca información que no se mostrará en el navegador |
<title>
|
Define el título de la página en el meta-title |
<base>
|
Establece la URL base |
<body>
|
Contiene todo el contenido visible en el navegador |
<h1>, <h2>, <h3>, …
|
Definen los títulos |
<p>
|
Marca un apartado de contenido |
<ul>
|
Inicia una lista desordenada |
<ol>
|
Define una lista numerada |
¿Quieres saber más sobre el popular lenguaje de marcado para la web? En nuestro tutorial de HTML para principiantes, hemos reunido los consejos y trucos más importantes para que empieces.