Los elementos HTML son las partes de contenido que componen un documento. A través de los elementos se inserta texto, imágenes o vídeo en una página web. A pesar de que es habitual leer de forma indistinta «elemento» o «etiqueta», no deben confundirse, pues no son lo mismo. Las etiquetas son parte de los elementos.
Los elementos tienen la siguiente estructura:
- Etiqueta de apertura
- Cero o más atributos
- Texto encerrado entre las etiquetas
- Etiqueta de cierre (aunque no siempre)
Ejemplo de un elemento de párrafo:
<p>Este texto es un párrafo.</p>
En este ejemplo se puede observar la etiqueta de apertura <p>, la etiqueta de cierre </p> y el texto en su interior. El texto que se encuentra entre las dos etiquetas es el que aparecerá en pantalla. Eso significa que los navegadores web mostrarán este texto como un párrafo.
Elemento vacío
Algunos elementos no tienen etiqueta de cierre. Este es el caso de las imágenes, cuya estructura mínima es la de su etiqueta de apertura y un atributo que indica la ruta en la que se encuentra ubicada la imagen. Al no tener etiqueta de cierre no puede tener contenido entre las dos etiquetas. De ahí el nombre.
<img src="/fotos/pez-azul.png">
Anidación y orden
Los elementos se pueden anidar unos dentro de otros, siempre que se haga de forma ordenada. Por ejemplo, podemos añadir texto en cursiva dentro de un párrafo.
<p>Este texto es un párrafo con <b>negrita</b>.</p>
Este será el resultado:
Este texto es un párrafo con negrita.
Los elementos se pueden anidar tantas veces como se quiera, pero también conviene evitar ciertas anidaciones ilógicas. Por ejemplo, no sería lógico anidar un párrafo dentro de otro, ni una cabecera dentro de un párrafo. Hay que estructurar la web con sentido común y evitando errores como el del siguiente ejemplo:
<p>Este texto está <i>mal</p> anidado</i>.
Elementos de bloque
Los elementos se pueden clasificar en dos grupos, según el espacio que ocupan en la página. Algunos elementos son de bloque y otros son elementos en línea.
Los elementos de bloque siempre empiezan en una línea nueva y ocupan todo el espacio disponible hasta el final de la línea. Esto significa que ocupan la anchura máxima hasta encontrar los límites del elemento contenedor superior. Estos elementos no permiten que otro elemento se pueda colocar a su lado.
Lista de los elementos de bloque: <address>, <blockquote>, <dd>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <li>, <noscript>, <ol>, <p>, <pre>, <table>, <tbody>, <tfoot>, <thead> y <ul>.
El elemento <div>
El elemento <div> se utiliza para crear secciones o agrupar contenido; se trata de un elemento contenedor muy importante a nivel de diseño web. Este elemento no proporciona un cambio visual en el bloque, pero tiene su utilidad cuando se usa con las hojas de estilo CSS. Por tanto, todos los elementos que queramos agrupar deberán ir dentro de las etiquetas <div> (de apertura) y </div> (de cierre).
Ejemplo de código HTML usando un elemento <div>:
<div>
<h4>Mis lenguajes de programación preferidos:</h4>
<p>Los lenguajes están en orden alfabético.</p>
<ol>
<li>Bash</li>
<li>C</li>
<li>Go</li>
<li>Perl</li>
<li>Python</li>
<li>Ruby</li>
</ol>
</div>
Elementos de línea
Los elementos de línea ocupan el mínimo espacio horizontal, y de esta manera permiten que otros elementos de línea se coloquen a su lado. Esto significa que este tipo de elementos ocupan únicamente el espacio necesario para mostrar su contenido. El ejemplo más significativo son los enlaces.
Lista de los elementos de línea: <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <del>, <dfn>, <em>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <map>, <mark>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <tt> y <var>.
El elemento <span>
El elemento <span> se utiliza para agrupar elementos en línea o simplemente aplicar estilo al texto combinándolo con los atributos class e id. Este elemento tampoco proporciona ningún cambio visual, pues tiene su utilidad cuando se usa con las hojas de estilo CSS. Por tanto, todos los elementos de línea que se quieran agrupar deberán ir entre las etiquetas <span> (de apertura) y </span> (de cierre).
Ejemplo de código HTML usando un elemento <span> para aplicar estilos:
<p>Este párrafo tiene texto <span style='color:green'>verde</span>.</p>
Dando como resultado:
Este párrafo tiene texto verde.
En este ejemplo hemos usado el atributo style para indicar el color verde mediante el uso de hojas de estilo en cascada (CSS). No es obligatorio conocer esta tecnología en el presente curso de HTML, pero sí es recomendable estar familiarizado por casos como este. En el valor de style se introducen las declaraciones CSS, compuestas por una propiedad y un valor.
Uso de elementos según tipología
Saber diferenciar los dos tipos de elementos es imprescindible para poder hacer un buen diseño y estructurar el contenido de forma correcta. Además, la mayoría de elementos de bloque pueden contener otros elementos de bloque y elementos de línea. Pero los elementos de línea sólo pueden contener otros elementos de línea.
Esto significa que un elemento de bloque no puede usarse dentro de un elemento de línea, mientras que un elemento de línea puede usarse tanto dentro de los elementos de bloque como dentro de los elementos de línea.
Resumiendo, la principal diferencia entre el elemento <div> y el elemento <span> es que el primero se usa para agrupar elementos en un bloque y el segundo se usa para agrupar elementos en una línea. Es lógico, pues, que este último sólo pueda contener elementos de línea.
