UNIVERSIDAD MARIANO GALVEZ DE
GUATEMALA
SEDE MAZATENANGO
FACULTAD: INGENIERIA EN SISTEMAS DE
INFORMACION Y CIENCIAS DE LA
COMPUTACION
TEMA: ETIQUETAS HTML5
CURSO: DESARROLLO WEB
ESTUDIANTE: DAVIS NOE LIMA LOPEZ
CICLO: VIII
CARNE: 3090-19-10176
Etiquetas HTML
Las etiquetas HTML son fragmentos de código que permiten crear elementos HTML,
estructuras básicas del lenguaje de programación HTML en el que se escriben las páginas
web porque es el que entienden los navegadores.
El formato de una etiqueta HTML es un bloque de texto encerrado entre corchetes
angulares < >, y cada elemento HTML tiene una etiqueta de inicio del tipo <etiqueta> y
suele terminar con una etiqueta de cierre que lleva una barra inclinada al principio
</etiqueta>.
Estructura del documento HTML
Un documento HTML debe tener siempre una estructura inicial, con algunas etiquetas y
características obligatorias y otras recomendables. Ese esquema es el siguiente, donde se
diferencian tres zonas principales:
Tipo de documento: En la primera línea del documento HTML debe ir
especificado siempre de que tipo de documento HTML se trata.
Head: En el documento HTML hay una primera sección donde se especificarán
todos los metadatos del documento, es decir, la parte «que no se ve» directamente
en el navegador de forma visual.
Body: La segunda sección es el cuerpo de la página, donde si aparecen todos los
elementos que aparecerán visualmente en el navegador del usuario.
Las dos últimas secciones deben estar dentro de la etiqueta <HTML>, que es la que debe
contener cualquier tipo de etiqueta HTML
ETIQUETA DESCRIPCION
<!DOCTYPE html> Este elemento sirve para identificar la versión
de HTML en la que está escrita el documento.
<head> El elemento HTML <head> provee información
general (metadatos) acerca del documento,
incluyendo su título y enlaces a scripts y hojas
de estilos.
<body> El elemento <body> de HTML representa el
contenido de un documento HTML. Solo puede
haber un elemento <body> en un documento.
PÁGINA 1
Ejemplo:
METADATOS
Habíamos mencionado que la estructura de un documento HTML debía contener siempre
dos etiquetas HTML principales: la cabecera de la página o <head> y el cuerpo de la página
o <body> . El primero de ellos, del que hablaremos en este apartado, se encarga de
contener etiquetas de metadatos (información sobre el documento) así como establecer
relaciones con otros documentos. El segundo de ellos, se encarga de la parte visual que
verá el usuario en el navegador.
ETIQUETA ATRIBUTO DESCRIPCION
<title> Título de la página (pestaña o título
del navegador o en buscadores).
<base> href, target URL base del documento (usado para
gestionar rutas relativas).
<link> href, hreflang, rel, media, type Establece una relación del documento
actual con otro externo.
<meta> name, content, http-equiv, charset Establece un metadato específico en el
documento actual.
<style> media, type Crea estilos CSS que afectarán
únicamente al documento actual.
<script> src, type, charset, async, defer Indica un script a cargar o ejecutar en
la página actual.
PÁGINA 2
Ejemplos:
Ejemplos utilizando Etiquetas
AGRUPACION
Las siguientes etiquetas se utilizan para agrupar información.
ETIQUETA ATRIBUTOS DESCRIPCION
<div> Capa o división utilizado para agrupar
varias etiquetas HTML.
<p> Define un párrafo de texto (con sus
etiquetas HTML para texto).
<pre> Establece un texto preformateado
(respetando espacios y saltos de línea).
<blockquote> cite Agrupa información y características de
una cita (autor, fuente, etc...).
<main> Contenedor para englobar la parte
principal de la página.
<hr> Indica una separación temática del texto.
Ejemplo
PÁGINA 3
LISTAS
En HTML podemos crear listas de información de una forma muy sencilla. Empecemos por
las etiquetas disponibles:
ETIQUETA ATRIBUTO DESCRIPCION
<ul> Define una lista sin orden.
Se trata de la etiqueta
contenedora.
<ol> start, reversed, type Define una lista numerada
(con orden). Etiqueta
contenedora.
<li> value Define un ítem de la lista.
En primer lugar, debemos elegir la etiqueta <ul> o la etiqueta <ol> dependiendo de si
queremos una lista donde no importa el orden (lista de objetos que tengo en el bolsillo) o
una lista en la que si importa el orden (lista de canciones preferidas de mayor a menor).
Una vez elegido, comenzamos a añadir ítems, uno por etiqueta <li>. La forma más básica
de crear una lista sería la siguiente:
Ejemplo: lista sin orden
Lista con orden
PÁGINA 4
Esto crearía una lista, donde cada uno de los ítems aparecería con un circulo negro cada
uno. Una particularidad poco conocida es que HTML nos permite omitir las etiquetas de
cierre </li> si van seguidas de otra etiqueta de apertura <li>.
Si reemplazamos la etiqueta <ul> por <ol> los ítems pasan a ser ítems numerados (por
defecto, números enteros a partir de 1). Las etiquetas <ol> permiten indicar varios
atributos opcionales para modificar la forma en que se numera cada ítem:
ATRIBUTO VALOR SIGNIFICADO
start [número] Indica el número del primer ítem de la lista y del que
empezará a contar.
reversed Si se indica este atributo, la lista se numera en orden
inverso.
type 1|a|A|i|I Lista con números enteros, letras o números romanos
(en minúsculas o mayúsculas).
LISTAS DE DESCRIPCIONES
De la misma forma que podemos crear listas genéricas, podemos crear listas de
descripciones. La diferencia es que este tipo de listas se suele utilizar cuando queremos
asociar pares de nombre-valor. Primero veamos las etiquetas:
ETIQUETA DESCRIPCION
<dl> Define una lista de descripciones. Es la etiqueta contenedora.
<dt> Término de la descripción. Contiene el nombre o término a
describir.
<dd> Descripción o valor asociado al término. Pueden existir varios por
término.
ETIQUETAS DE TEXTO
En primer lugar, existe una serie de etiquetas HTML simples para seleccionar un
fragmento de texto y dotarlo de un significado especial. Por ejemplo:
ETIQUETA DESCRIPCION
<strong> Fragmento de texto importante o palabras clave.
<em> Fragmento de texto enfatizado respecto a la frase que lo
contiene.
<mark> Fragmento de texto resaltado, simulando estar marcado
con rotulador amarillo.
<i> Fragmento de texto con voz o tono alternativo al resto.
<b> Fragmento de texto sin importancia destacable (fines
PÁGINA 5
utilitarios).
<u> Fragmento de texto para nombres propios o escritura
incorrecta intencionada (sic).
<s> Fragmento de texto inexacto o que ya no es relevante.
(errores o inexactitudes)
<span> Fragmento de texto sin significado (útil para seleccionar).
<cite> Fragmento de texto con el título de un trabajo creativo:
obras, libros...
Ejemplo
PÁGINA 6
ETIQUETAS DE MULTIMEDIA
Para incluir imágenes en el contenido de una página utilizaremos la etiqueta <img>, que es
una etiqueta muy sencilla, que dispone de varios atributos para modificar como se verá la
imagen (los atributos src y alt son siempre obligatorios):
ATRIBUTO DESCRIPCION
src Indica el nombre o la URL de la imagen a mostrar. Atributo
obligatorio.
alt Establece un texto alternativo que describa la imagen a mostrar.
Atributo obligatorio.
width Indica el ancho de la imagen en píxels (sin la unidad). Se puede
hacer desde CSS.
height Indica el alto de la imagen en píxels (sin la unidad). Se puede
hacer desde CSS.
Un ejemplo básico para colocar una imagen sería el siguiente:
FORMATOS DE IMÁGENES
En el ámbito informático existen múltiples formatos de imágenes (¡muchísimos!) pero no
todos son aptos para utilizar en web. Vamos a dar un repaso a los formatos más utilizados
y cuales son más apropiados:
FORMATO CARACTERISTICA
PNG Soporta transparencia.
Compresión sin pérdidas.
Imágenes «lisas».
JPG Compresión con pérdidas.
Ideal para imágenes con
texturas.
ETIQUETA DE TABLA
Las tablas están incluidas en HTML desde sus primeras versiones y son una forma
fantástica de mostrar datos claramente. Además, si las construimos de forma semántica y
correctamente, es muy sencillo darle estilos desde CSS y cambiar su diseño con unas
PÁGINA 7
cuantas propiedades CSS, puesto que mediante las etiquetas que la componen se puede
hacer referencia a cada parte de la misma.
Una tabla puede ser sencilla o compleja, dependiendo de nuestro objetivo y la cantidad de
etiquetas o atributos a utilizar. Así pues, veamos primero las etiquetas básicas para crear
una tabla de la forma más sencilla posible:
ETIQUETA DESCRIPCION
<table> Etiqueta contenedora que tendrá en su interior toda la tabla.
<tr> Table Row. Etiqueta contenedora de cada fila de la tabla.
<td> Table Data. Cada una de las celdas de la tabla.
<th> Table Header. Cada una de las celdas de cabecera de la tabla.
La etiqueta <table> sería el elemento que contendría todos los elementos de la tabla,
mientras que <th> y <td> se utilizarían para cada uno de los campos de la tabla (cabecera y
celda respectivamente). Cada vez que se quisiera añadir una nueva fila, habría que
incluirlo todo dentro de una etiqueta <tr>.
Estas cuatro etiquetas serían las etiquetas necesarias para crear una tabla. Un ejemplo muy
sencillo de una tabla de 3x2 celdas (exceptuando las cabeceras), sería la siguiente:
EJEMPLO
PÁGINA 8
Combinar celdas
Cada etiqueta <td> y <th> puede incluir una serie de atributos para modificar su
comportamiento o para establecer relaciones semánticas entre celdas. Probablemente, las
más interesantes sean colspan y rowspan:
Atributo Valor Descripción
colspan número Número de columnas que la celda abarcará.
rowspan número Número de filas que la celda abarcará.
headers ids Id de los elementos <th> con los que tiene relación la
celda.
scope (solo <th> row La cabecera se aplica a alguna de las filas adyacentes.
col La cabecera se aplica a alguna de las columnas
adyacentes.
rowgroup La cabecera se aplica a todas las celdas restantes de la
fila.
colgroup La cabecera se aplica a todas las celdas restantes de la
columna.
auto La cabecera se aplica a las celdas de forma automática
abbr (solo <th>) nombre Abreviatura o información alternativa sobre la
cabecera.
Con estos atributos podemos indicar que ciertas celdas abarquen más espacio y se
combinen con el espacio que ocuparía otra celda adyacente y así crear estructuras de tabla
más flexibles.
PÁGINA 9
El atributo rowspan actuaría exactamente igual, pero abarcando filas en vertical, en lugar
de columnas en horizontal.
Organización de tablas
Por defecto, al crear una tabla, el navegador se encarga de crearla a medida que va leyendo
las etiquetas, por lo que la tabla se crea en el orden que se han especificado sus elementos,
de arriba a abajo. Sin embargo, podemos utilizar una serie de etiquetas contenedoras que
establecerán la zona de la tabla donde deben aparecer su contenido:
Etiqueta Descripción
<thead> Etiqueta contenedora de la cabecera de la tabla. Parte superior de
la tabla
<tbody> Etiqueta contenedora del cuerpo de la tabla. Parte central de la
tabla.
<tfoot> Etiqueta contenedora del pie de la tabla. Parte inferior de la tabla.
<caption> Establece un título de la tabla, independientemente de su posición.
PÁGINA 10
En este ejemplo, a pesar de seguir el orden tfoot, thead, tbody, caption definido en el
HTML, el navegador lee la tabla y la redistribuye según su significado semántico, de modo
que lo organiza dejándolo con el orden caption, thead, tbody, tfoot. De esta forma, estas
etiquetas nos pueden servir para indicar secciones concretas de la tabla,
independientemente del lugar donde estemos escribiendo, algo que puede ser muy útil si
estamos creando la tabla de forma dinámica mediante algún lenguaje de programación.
FORMULARIOS
Los formularios son una forma sencilla de establecer mecanismos para que el usuario
pueda introducir información en una página web de forma sencilla e intuitiva, y el sitio
web sea capaz de procesarla correctamente y añadirla en una base de datos de la página,
enviarla por email o procesarla para mostrar información final al usuario.
Contenedor de formulario
PÁGINA 11
Para comenzar con la creación de un formulario, el primer paso es indicar una etiqueta
contenedora <form>, que incluirá toda la información que se quiere recoger en ese
formulario:
La etiqueta <form> dispone de varios atributos para utilizar:
Atributo Valor Descripción
action URL Dirección URL del back-end
donde se enviará la
información del formulario.
method get | post Método HTTP de envío. GET
a través de URL, POST para
envío extenso.
name nombre Nombre del formulario. Útil
para procesar
posteriormente.
target destino Nombre del lugar donde se
abrirá el formulario. \_blank
para nueva pestaña.
enctype tipo Codificación para el envío
del formulario. Importante
para envío de archivos.
accept-charset codificación Fuerza a utilizar una
codificación en los
parámetros de texto del
formulario.
autocomplete on | off Activa o desactiva el
autocompletado para todos
los campos del formulario.
Ejemplo de una etiqueta de formulario
<form name="formulario" method="post" action="/[Link]"></form>
Tipos de datos
Para que un usuario pueda introducir información en un formulario, requiere que se le
indiquen una serie de campos que le permitan introducir la información de la forma más
cómoda y rápida posible. Para ello, debemos saber a priori que tipo de dato le vamos a
pedir al usuario (texto, numérico, fecha, etc...), y así saber que tipo de campo de entrada
de datos es más conveniente colocar.
Información a obtener Ejemplos Etiqueta y atributo a
utilizar
Información de texto Nombres, apellidos, <input>
direcciones físicas...
PÁGINA 12
<textarea>
Números o cantidades Edades, precios, cuantías... <input> para números
Fechas u horas Fecha de nacimiento, inicio <input> para fechas
de evento...
Verdadero/falso Si/No, Opción A/B, <input type="checkbox">
ON/OFF...
Opción única (Elegir una opción de 2 ó más <input type="radio">
posibles)
<select>
Varias opciones (Elegir varias opciones de 2 ó <select multiple>
más posibles)
<input type="checkbox">
Opción única abierta (Elegir una opción o indicar <datalist>
una propia)
Selección de color (Escoger un color o <input type="color">
tonalidad)
Selección de archivo (Escoger un archivo para <input type="file">
enviar)
En HTML5, de forma nativa, el navegador proporciona estos campos de entrada en los que
el usuario puede introducir información específica. Cada uno de ellos tiene sus propias
particularidades y características, además de que hay que tener cuidado con algunos, ya
que pueden no estar soportados por completo en todos los navegadores.
Campos de entrada
Una de las etiquetas que más utilizaremos para obtener información a modo de campo de
entrada de datos en un formulario es la etiqueta <input>. Su funcionalidad más utilizada
es la de servir como campo de texto:
En este ejemplo tenemos un pequeño formulario donde se le pide al usuario su nombre
con la etiqueta <input type="text"> y, posteriormente, se coloca un botón para enviar el
formulario con la etiqueta <input type="submit">. Aunque vemos que se trata de la
misma etiqueta <input>, dependiendo del valor indicado en el atributo type realizará una
tarea u otra.
PÁGINA 13
LA ETIQUETA "INPUT"
La etiqueta <input> tiene una gran cantidad de atributos (algunos dependiendo del valor
de type, que mostraremos más adelante). Estos son los atributos que podemos utilizar de
forma general para prácticamente cualquier campo de entrada de datos con la etiqueta
<input>:
Atributo Valor Descripción
type tipo de campo Indica el tipo de campo del
que se trata.
name nombre del campo Indica el nombre del campo
para hacer referencia más
tarde.
value valor por defecto Indica el valor inicial que
tendrá ese campo de datos.
form nombre del formulario Asocia este campo de datos
con un formulario específico.
placeholder sugerencia Indica una sugerencia al
usuario antes de escribir.
size número Tamaño visual (número de
carácteres) del campo de
datos.
autocomplete on | off Activa o desactiva el
autocompletado para este
campo.
autofocus Establece el foco (coloca el
cursor) en este campo al cargar
la página.
El atributo type nos permitirá indicar que tipo de campo de dato mostrará en el navegador
(text, number, date... los veremos más adelante). Mediante el atributo name le daremos un
nombre al campo de texto, así cuando enviemos la información del formulario, podremos
manejarla desde javascript o desde el back-end haciendo referencia a dicho nombre.
BOTONES DE ENVÍO DE FORMULARIOS
Por último, y no por ello menos importante, tenemos los botones de envío de formulario.
Si un formulario carece de estos botones, el usuario sólo puede enviarlo si pulsa ENTER en
el último campo del formulario. No obstante, siempre es aconsejable incluir un botón
explícitamente para que el usuario pueda pulsarlo y enviar el formulario sin confusión y de
forma clara.
Tenemos varios tipos de botones que actúan sobre el formulario:
Tipo de botón de control Etiqueta a utilizar Ejemplo
PÁGINA 14
Botón de envío de <input type="submit"> Enviar
formulario
Botón de envío con <input type="image">
imagen
Botón de borrar <input type="reset">
formulario
Botón sin funcionalidad <input type="button"> o
<button>
Ejemplo de un botón normal
Botón con imagen
Boton de borrar
PÁGINA 15
CONTROLES: CAMPOS DE TEXTO
La etiqueta HTML <input> puede tomar varios valores diferentes en su atributo type para
permitir al usuario introducir información de texto, además de otra etiqueta denominada
<textarea> para cantidades de texto más grandes como varios párrafos.
Tipo de información a Etiqueta a utilizar Ejemplo
obtener
Texto alfanumérico libre <input type="text">
(texto corto)
Texto para búsquedas <input type="search">
Número de teléfono o <input type="tel">
móvil
Dirección URL <input type="url">
Dirección de correo email <input type="email">
Clave o contraseña <input type="password">
Campo oculto (no <input type="hidden">
mostrar al usuario)
Texto alfanumérico libre <textarea>
(extenso)
Es importante no escribir sugerencias de usuario en el atributo value, sino en placeholder.
Utiliza el atributo value sólo si quieres indicar valores por defecto del campo.
PÁGINA 16
Listas de selección
Si las casillas de verificación se nos quedan cortas o necesitamos mostrar una lista más
extensa de datos, quizás sería conveniente utilizar una lista de selección, también llamada
frecuentemente combo o lista desplegable. Estas listas nos permiten mostrar al usuario
varias opciones disponibles para que se decanten por una.
Tipo de información a Etiqueta a utiliza Ejemplo
obtener
Lista (cerrada) de opciones <select> y <option> Opción 1
Lista (abierta) de opciones <datalist>
También podemos utilizar la etiqueta <optgroup>, que es una etiqueta contenedora para
agrupar varias etiquetas <option>. De esta forma, podemos crear pequeñas agrupaciones
para tener más organizada la lista de opciones. La propia etiqueta <optgroup> no es
seleccionable por el usuario, aparecerá en negrita y sólo estará disponible para organizar
las opciones:Su forma más básica se compone de una etiqueta contenedora <select> que en
su interior incluirá varias etiquetas <option>, una por opción posible a elegir. Si queremos
que una opción de la lista esté marcada por defecto, incluiremos el atributo selected:
LISTAS SELECCIONABLES MÚLTIPLES
También podemos utilizar la etiqueta <optgroup>, que es una etiqueta contenedora para
agrupar varias etiquetas <option>. De esta forma, podemos crear pequeñas agrupaciones
para tener más organizada la lista de opciones. La propia etiqueta <optgroup> no es
seleccionable por el usuario, aparecerá en negrita y sólo estará disponible para organizar
las opciones:
PÁGINA 17
MEDIDORES Y BARRAS DE PROGRESO
Existen algunos otros controles que, aunque no nos permiten introducir información,
pueden ser muy útiles en formularios para presentar información de una forma más visual
u ofrecer datos adicionales al usuario. Eso sí, se trata de etiquetas que sin el uso de
Javascript sólo podremos realizar funcionalidades muy básicas:
Tipo de botón de control Etiqueta a utilizar
Barra de progreso <progress>
Medidor <meter>
BARRA DE PROGRESO
En primer lugar, tenemos una barra de progreso que puede ser útil para colocarla cuando
necesitamos que el usuario sepa que debe esperar mientras se realizan otras tareas, o
incluso para indicar el progreso de algún proceso o incluso del usuario a través de la
página.
Mediante el atributo max podemos definir el valor que debe tener la barra de progreso
para estar completa y mediante el atributo value el valor actual de la barra de progreso.
PÁGINA 18
Etiquetas HTML de scripts
A medida que aprendemos HTML vemos que se trata de un lenguaje de marcas estupendo
y muy potente, pero también nos vamos dando cuenta que ciertos detalles no se pueden
cubrir sólo con HTML y CSS. Para ello tenemos que hacer uso de un lenguaje de
programación llamado Javascript.
LA ETIQUETA SCRIPT
Para utilizar Javascript, lo que hacemos normalmente es indicar al HTML que queremos
cargar un script (generalmente, un archivo de texto con código Javascript) y hacerlo
funcionar sobre la página actual. Para hacer esto, utilizaremos la etiqueta <script>, que
permite indicar una serie de atributos:
Atributo Valor Descripción
src URL Dirección URL del script externo a cargar.
type tipo Tipo de script a cargar. Si se omite, se asume
text/javascript como valo
nomodule boolean Si se define este atributo, el script no se carga en
navegadores modernos.
async boolean Ejecuta el script cuando se haya descargado, sin
bloquear el navegador.
defer boolean Aplaza la ejecución del script, lo ejecuta al final,
cuando haya descargado todo.
Para empezar, ten en cuenta que la etiqueta <script> tiene fundamentalmente dos modos
de funcionar, que se basan en como definas la etiqueta <script>:
Como script en línea: El código JS se incluye en el HTML, dentro de la etiqueta.
Como script externo: El código JS se incluye en el fichero Javascript enlazado en
src.
Un ejemplo de script en línea sería el siguiente. Observa que el código se incluye en el
interior de la etiqueta, por lo que permanece en el documento HTML:
El siguiente código, por otro lado, es un script externo, donde el código Javascript se
encuentra en un archivo separado del HTML, concretamente en la ruta /js/[Link]:
PÁGINA 19
La etiqueta noscript
Debemos ser conscientes de que, aunque actualmente la mayoría de los navegadores
poseen Javascript, un usuario puede acceder desde un dispositivo que no tenga Javascript
(muy poco habitual) o que tenga Javascript deshabilitado (poco habitual). Una buena
costumbre, es proporcionar una alternativa (aunque sea mínima) para aquellos usuarios
que no tengan Javascript habilitado.
LA ETIQUETA TEMPLATE
La etiqueta <template> es un método ideal para reutilizar información HTML y tratarla
mediante Javascript. En el siguiente ejemplo tenemos una tabla HTML que sólo tiene
definida la cabecera de la misma. Sin embargo, un poco más abajo hay una etiqueta
<template> que contiene una fila con 3 celdas:
Etiquetas HTML interactivas
A partir de HTML5, existen algunas etiquetas que proporcionan características interactivas
a una página. En dichas etiquetas el usuario debe tomar parte de forma activa para
activarlas o utilizarlas. Elementos desplegables, menús contextuales, diálogos emergentes,
etc...
Veamos una lista de dichas etiquetas:
Etiqueta Descripción
PÁGINA 20
<details> Crea un elemento desplegable. Etiqueta que contiene todo el
contenido del elemento
<summary> Título del desplegable que aparece siempre, se encuentre
desplegado o no
<dialog> Ventana de diálogo que puede contener y mostrar cierta
información.
Etiquetas semánticas
En versiones anteriores a HTML5, al crear la estructura de una página, normalmente
utilizabamos etiquetas <div> para ir agrupando secciones de la página. Unido a esto,
ibamos añadiendo id o clases (atributos) dependiendo de nuestro interés, para que
quedase más claro. Una estructura como la que menciono podría ser la siguiente
Vemos que en esta estructura tenemos una agrupación que contiene todos los elementos
de un artículo, donde el primer elemento es un encabezado <h1> (titular), luego un párrafo
de introducción, seguido de un párrafo de contenido y un último párrafo a pie de artículo.
La estructura podría ser más sencilla o más complicada, pero nos viene bien como ejemplo
de introducción a este tema.
Nótese que los elementos utilizados <div> y <p> no tienen una semántica específica, salvo
que son etiquetas de agrupación y que la segunda contiene un párrafo. En HTML5 se
introducen una serie de etiquetas de agrupación que funcionan exactamente como
un<div>, pero que además tienen un significado semántico porque indican la naturaleza
del contenido que agruparán.
PÁGINA 21
Etiquetas semánticas
Etiqueta Descripción
<article> Artículo. Parte principal de un escrito (posts, mensaje en foros,
comentario...)
<nav> Apartado de navegación (enlaces de secciones, categorías, etc...)
<header> Cabecera visual de la página (logotipo, título, etc...). No confundir con
<head>.
<h1> Encabezado de nivel 1. Equivalente al título del documento.
<h2> Encabezado de nivel 2. Equivalente al tema del documento.
<h3> Encabezado de nivel 3. Equivalente a la sección de un tema.
<h4> Encabezado de nivel 4. Equivalente a un apartado de la sección.
<h5> Encabezado de nivel 5. Equivalente a un ejemplo del apartado.
<h6> Encabezado de nivel 6. Equivalente a un subapartado del ejemplo.
<footer> Pie de página de una sección (o del documento completo).
<section> Sección o grupo temático de contenido. No usar sólo para dar estilo.
<aside> Agrupación de contenido no relacionado con el tema principal del
documento.
<address> Agrupación con la información de contacto del autor del artículo o
documento.
PÁGINA 22
