Como ya hemos visto anteriormente en la sección Introducción a HTML, con HTML se define la estructura y el contenido de las páginas web.
Para ello, utilizamos elementos HTML para crear todos los párrafos, encabezados, listas, imágenes y enlaces que componen una página web típica.
En esta entrada, vamos a explorar cómo funcionan los elementos HTML.
Diferencias Entre Etiquetas y Elementos HTML
Casi todos los elementos HTML de una página son sólo piezas de contenido envueltas en etiquetas HTML de apertura y cierre.
Las etiquetas de apertura indican al navegador que éste es el comienzo de un elemento HTML. Están compuestas por una palabra clave encerrada entre corchetes angulares <>. Por ejemplo, una etiqueta de apertura de párrafo tiene el siguiente aspecto <p>.
Las etiquetas de cierre indican al navegador dónde termina un elemento. Son casi iguales a las etiquetas de apertura; la única diferencia es que tienen una barra inclinada antes de la palabra clave. Por ejemplo, una etiqueta de cierre de párrafo tiene el siguiente aspecto: </p>.
Estructura Básica y Sintaxis de HTML
La estructura básica de un documento HTML se compone de una serie de elementos anidados entre etiquetas de apertura y cierre. Cada elemento puede tener atributos y contenido.
Un elemento de párrafo completo tiene el siguiente aspecto:
Puedes pensar en los elementos como contenedores de contenido. Las etiquetas de apertura y cierre indican al navegador el contenido del elemento. El navegador puede entonces utilizar esa información para determinar cómo debe interpretar y formatear el contenido.
Algunos aspectos a destacar en la sintaxis de HTML son:
- Las etiquetas de apertura y cierre llevan siempre el símbolo «<» y «>».
- Las etiquetas de apertura y cierre deben anidarse correctamente, es decir, una etiqueta de cierre debe corresponder a la última etiqueta de apertura abierta.
- Los atributos se especifican dentro de las etiquetas de apertura y se asignan un valor con el símbolo «=». Por ejemplo: <p class="parrafo">.
- El contenido de los elementos se escribe entre las etiquetas de apertura y cierre.
- Algunos elementos pueden estar vacíos, es decir, no tienen contenido. En este caso, se cierran inmediatamente después de la etiqueta de apertura con el símbolo «/>». Por ejemplo: <img src="imagen.jpg" alt="Descripción de la imagen" />.
Hay algunos elementos HTML que no tienen una etiqueta de cierre. Estos se conocen como elementos vacíos porque no envuelven ningún contenido. Nos encontraremos con algunos de ellos en lecciones posteriores, pero en su mayoría, los elementos tienen etiquetas de apertura y cierre.
El uso de las etiquetas correctas puede tener un gran impacto en dos aspectos de sus sitios: cómo se clasifican en los motores de búsqueda; y cómo son de accesibles para los usuarios que dependen de tecnologías de asistencia, como los lectores de pantalla, para utilizar Internet.
El uso de los elementos correctos para el contenido se llama HTML semántico. Exploraremos esto con mucha más profundidad más adelante en próximas anotaciones.
Elementos HTML Comunes
HTML tiene una amplia lista de elementos predefinidos que puedes utilizar para estructurar y dar formato al contenido de una página web. Algunos de los elementos más comunes son:
Por ejemplo, títulos, párrafos, listas, enlaces, imágenes, etc.
Títulos
Los elementos <h1>, <h2>, …, <h6>, etc. se utilizan para crear títulos o encabezados de diferentes niveles de importancia. Por ejemplo:
<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Subsubtítulo</h3>Párrafos
El elemento <p> se utiliza para crear párrafos de texto. Por ejemplo:
<p>Este es un párrafo de texto.</p>
<p>Este es otro párrafo de texto.</p>Listas
Los elementos <ul> (lista no ordenada) y <ol> (lista ordenada) se utilizan para crear listas de elementos. Cada elemento de la lista se escribe con el elemento <li>. Por ejemplo:
<ul>
<li>Elemento de lista 1</li>
<li>Elemento de lista 2</li>
<li>Elemento de lista 3</li>
</ul>
<ol>
<li>Elemento de lista 1</li>
<li>Elemento de lista 2</li>
<li>Elemento de lista 3</li>
</ol>Enlaces
El elemento <a> se utiliza para crear enlaces a otras páginas o recursos. El atributo href se utiliza para especificar la dirección del enlace. Por ejemplo:
<a href="https://www.google.es/">Enlace a Google</a>Imágenes
El elemento img se utiliza para incrustar imágenes en una página web. El atributo src se utiliza para especificar la dirección de la imagen y el atributo alt se utiliza para proporcionar una descripción de la imagen. Por ejemplo:
<img src="imagen.jpg" alt="Descripción de la imagen" />Tablas
El elemento table se utiliza para crear tablas de datos. Los elementos tr se utilizan para crear filas de la tabla y los elementos td o th se utilizan para crear celdas de datos o encabezados, respectivamente. Por ejemplo:
<table>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Fila 1, Celda 1</td>
<td>Fila 1, Celda 2</td>
</tr>
<tr>
<td>Fila 2, Celda 1</td>
<td>Fila 2, Celda 2</td>
</tr>
</table>Formularios
El elemento form se utiliza para crear formularios que permiten recoger datos del usuario. Los elementos input, textarea y select se utilizan para crear diferentes tipos de campos de entrada de datos. Por ejemplo:
<form>
<label for="nombre">Nombre:</label><br>
<input type="text" id="nombre" name="nombre"><br>
<label for="apellido">Apellido:</label><br>
<input type="text" id="apellido" name="apellido"><br><br>
<label for="pais">País:</label><br>
<select id="pais" name="pais">
<option value="españa">España</option>
<option value="francia">Francia</option>
<option value="italia">Italia</option>
</select>
<br><br>
<input type="submit" value="Enviar">
</form>En resumen, hay una gran variedad de elementos HTML disponibles para estructurar y dar formato al contenido de una página web.
Elementos HTML Semánticos
Los elementos semánticos son elementos HTML que proporcionan un significado específico y mejoran la organización y estructuración del contenido. Algunos elementos semánticos HTML comunes son:
- header: se utiliza para contener el encabezado de una sección o documento. Por ejemplo: <header> <h1>Título principal</h1> <p>Subtítulo</p> </header>.
- footer: se utiliza para contener el pie de página de una sección o documento. Por ejemplo: <footer> <p>Copyright 2022</p> </footer>.
- nav: se utiliza para contener una sección de navegación. Por ejemplo: <nav> <a href="inicio.html">Inicio</a> | <a href="productos.html">Productos</a> | <a href="contacto.html">Contacto</a> </nav>.
- section: se utiliza para dividir el contenido en secciones temáticas. Por ejemplo: <section> <h2>Sección 1</h2> <p>Contenido de la sección 1</p> </section> <section> <h2>Sección 2</h2> <p>Contenido de la sección 2</p> </section>.
- article: se utiliza para contener una unidad de contenido autocontenida, como una noticia o un artículo. Por ejemplo: <article> <h2>Título del artículo</h2> <p>Contenido del artículo</p> </article>.
- aside: se utiliza para contener contenido secundario o complementario al contenido principal. Por ejemplo: <aside> <h3>Contenido secundario</h3> <p>Información adicional o complementaria al contenido principal</p> </aside>.
Atributos y Valores
Los atributos son características adicionales que se pueden añadir a los elementos HTML para proporcionar más información o especificar cómo se deben mostrar o comportar los elementos. Algunos atributos HTML comunes son:
- class: permite asignar una o varias clases a un elemento, lo que permite aplicar estilos con CSS. Por ejemplo: <p class="parrafo">.
- id: permite asignar un identificador único a un elemento, lo que permite acceder y modificar el elemento con JavaScript. Por ejemplo: <p id="parrafo1">.
- href: se utiliza en el elemento a para especificar la dirección del enlace. Por ejemplo: <a href="https://www.google.com">Enlace a Google</a>.
- src: se utiliza en el elemento img para especificar la dirección de la imagen. Por ejemplo: <img src="imagen.jpg" alt="Descripción de la imagen" />.
- alt: se utiliza en el elemento img para proporcionar una descripción de la imagen. Por ejemplo: <img src="imagen.jpg" alt="Descripción de la imagen" />.
- type: se utiliza en el elemento input para especificar el tipo de campo de entrada. Por ejemplo: <input type="text" id="nombre" name="nombre">.
- value: se utiliza en el elemento input para asignar un valor predeterminado al campo de entrada. Por ejemplo: <input type="text" id="nombre" name="nombre" value="Introduce tu nombre">.
En resumen, los atributos son características adicionales que se pueden añadir a los elementos HTML para proporcionar más información o especificar cómo se deben mostrar o comportar los elementos.
