Saltar la navegación

3.2. Elementos

Un elemento HTML se define mediante una etiqueta inicial. Si el elemento contiene otro contenido, termina con una etiqueta de cierre, donde el nombre del elemento está precedido por una barra diagonal. Ejemplos:

<div> ... </div>
<h1> .. </h1>
<p> .. </p>

Los elementos <p> .... </p> y <h1> ... </h1> son elementos HTML.

Mientras que <p> y </p> son las etiquetas con las que construyo el elemento, <p> Este es el párrafo </p> es un bloque de párrafo con el texto indicado.

Hay algunos elementos HTML que no necesitan cerrarse, solo tienen etiqueta inicial, como <img>, <br>, <hr>, etc. Estos se conocen como elementos vacíos.

Elementos anidados

En HTML esta permitido (y abundantemente usado) tener elementos HTML anidados (unos dentro de otros)

El único problema es siempre recordar cerrar los elementos (si hay que cerrarlos), y en el orden correcto.

<!DOCTYPE html>
<html>
    <head>
        <title> Ejemplo de código HTML</title>
    </head>
    <body>
        <p>Bienvenido al <b>Curso de HTML</b></p>
    </body>
</html>

Las etiquetas de HTML pueden tener varios formatos, según el elemento que se trate:

Etiquetas con contenido

Se inician en una etiqueta de apertura, luego llevan el contenido, y finalizan con una etiqueta de cierre:

<p> aquí va el contenido </p>

<h1> aquí va el contenido </h1>

Etiquetas sin contenido

Se inician en una etiqueta de apertura, no llevan contenido, y finalizan en la misma etiqueta. No es obligatoria cerrarlas:

<br> (insistimos, aunque funcione <br/>, no esta bien según las reglas de w3.org)

<input type="submit" value="Acceder">

<img src=“unaimagen.png" width=“128" height=“128">

Las etiquetas que tienen prohibido cerrarse, son :

area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta, param

Algunas etiquetas vacías

Algunos ejemplos de etiquetas vacías o de autocierre son:

<br>: Salto de línea o línea de quiebre.
<hr>: Línea horizontal.
<img>: Imagen.
<input>: Campo de entrada de datos.
<meta>: Metadatos del documento.
<link>: Enlace a un recurso externo.
<wbr>: Salto de línea sugerido.
<area>: Área de un mapa de imagen.
<base>: URL base para enlaces relativos.

Estas etiquetas se utilizan para insertar elementos específicos en el documento HTML y no requieren una etiqueta de cierre separada.

Creado con eXeLearning (Ventana nueva)