GOGODEV / @JJRuizEmpresa
Autor: Juan José Ruiz a.k.a GOGODEV
YouTube: [Link]
Twitter: [Link] (@JJRuizEmpresa)
IMPORTANTE
El contenido de este pdf lo tienes también en vídeo en el canal de YouTube
[Link] , dentro de la lista de reproducción: Curso de HTML.
Todo el contenido formativo es gratuito, no olvides pasarte y suscribirte para no perderte nada, y así
nos apoyas :)
GOGODEV / @JJRuizEmpresa
<CAPÍTULO .05>
LA ESTRUCTURA DE LA SEMÁNTICA
SOBRE ETIQUETAS SEMÁNTICAS DE ESTRUCTURACIÓN DE CÓDIGO.
</CAPÍTULO .05>
GOGODEV / @JJRuizEmpresa
LA ESTRUCTURA DE LA SEMÁNTICA
<SOBRE_ESTRUCTURAS>
A lo largo de los capítulos anteriores hemos aprendido a trabajar con numerosas etiquetas para
trabajar el texto, los elementos multimedia o los formularios. Ahora ha llegado el momento, antes de
comenzar con la estética, de poner orden en nuestras construcciones.
La estructura es un aspecto fundamental en el desarrollo web, no solo porque nos ayuda a mantener
un código limpio y mejor estructurado, si no también por la importancia de la semántica.
Y es que las etiquetas de estructura nos ayudarán a agrupar parte de nuestro contenido, pero también
serán de gran utilidad para los robots que quieran leer nuestra web y quieran saber qué contiene esta.
¿Y para qué quiero yo que un robot lea mi web? Te preguntarás. Sencillo. Hay múltiples de ellos que lo
hacen a diario, y juzgan tu contenido, y a ellos las etiquetas de estructura les ayudan a entender qué
contiene tu página.
Ejemplo de robot: Google. El robot de búsqueda de Google lee el contenido de tu página para saber
qué contiene esta, y así poder mostrarla en su listado de opciones cuando alguien esté buscando
alguna información de interés que contiene tu sitio. Y por supuesto, si deseas que tu sitio obtenga
visibilidad (y en el caso de que trabajes como programador tu jefe o cliente seguro que lo querrá)
debes ayudar al robot de Google con estructuras bien definidas.
Otro ejemplo de robot: El lector de contenido para personas discapacitadas. Muchas son las personas
que navegan por internet y, sin embargo, padecen alguna discapacidad en la visión. Para poder
navegar, usan robots como el lector del navegador, que les ayuda a entender qué se está mostrando
en el monitor, y les lee o reproduce la información que solicitan.
Ya sea por estos, o el mero motivo de querer (y debes quererlo) ser un buen programador, que ejecuta
un código limpio y bien estructurado, es importante agrupar las diferentes partes de nuestra página
web en este tipo de etiquetas. ¡Vamos allá!
</SOBRE_ESTRUCTURAS>
<CABECERA_PRINCIPAL_Y_PIE_DE_PÁGINA>
Hasta ahora, la única estructura que hemos aplicado a nuestro código HTML ha sido la diferenciar el
contenido de los metadatos dentro de la etiqueta <head> del contenido que mostramos, que hemos
ido colocando dentro de la etiqueta <body>, y hasta ahora esto ha sido sencillo puesto que estamos
obligados a hacerlo así. Sin embargo, dentro del body hemos ido aplicando todas y cada una de las
etiquetas que hemos ido conociendo sin control.
Vamos a comenzar a darles un poco de orden, y vamos comenzar por las etiquetas de <header>
<footer> y <main>
Cuando estemos construyendo nuestra página web, dentro del body, es un buen ejercicio pararse a
pensar lo siguiente:
GOGODEV / @JJRuizEmpresa
¿Cuáles de mis contenidos van a colocarse en la parte superior de mi página como elementos
destacados, como puede ser el menú de navegación? Todos estos elementos los colocaremos dentro
de la etiqueta <header>, es decir, conformarán nuestra cabecera.
¿Cuáles de mis contenidos van a colocarse en el pie de página? Aquí, abajo del todo, se suelen
colocar enlaces de refuerzo, los avisos legales, el copyright y otros elementos que no son el
contenido principal de la página. Todo esto, que irá al final de cada página, lo agruparemos dentro de
una etiqueta <footer>.
Y todo lo demás, aquello que no pertenece ni a la cabecera <header> ni al pie de página <footer> lo
ubicaremos dentro de la etiqueta <main>, conteniendo la información principal.
Así pues, a partir de ahora, nuestras construcciones lucirán con la siguiente estructura básica:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<head>
<!-- Aquí irá el contenido de la cabecera, como el menú de
navegación o elementos introductorios como un banner general
de mi sitio -->
</head>
<main>
<!-- Aquí colocamos el contenido principal de nuestra página -->
</main>
<footer>
<!-- Aquí colocamos el contenido que irá dentro del pie de página
nuestro sitio, como enlaces de refuerzo o el aviso legal de
nuestro sitio -->
</footer>
</body>
</html>
Es importante destacar que, a la hora de estructurar un sitio web, no existe una única solución
posible para cada problema, y podemos encontrar numerosas soluciones a una misma
estructuración. Sin embargo, este es un buen punto de comienzo con el que seguro no te equivocarás.
</ CABECERA_PRINCIPAL_Y_PIE_DE_PÁGINA >
GOGODEV / @JJRuizEmpresa
<NAVEGACIÓN>
Hablemos ahora de la navegación. En nuestro sitio web, deberemos colocar en diferentes lugares
menús a través de los cuáles el usuario pueda navegar a través de las diferentes páginas que
conforman nuestro sitio web. Pues bien, a nivel semántico, y sin importar dónde ubiquemos nuestro
menú, este lo encerraremos siempre dentro de una etiqueta <nav>
Además, y por convención de uso, siempre que desarrollemos un menú, lo haremos a través de una
lista no ordenada, donde cada elemento de la lista contiene un enlace.
Veámoslo con un ejemplo:
<nav>
<ul>
<li><a href="[Link]">Inicio</a></li>
<li><a href="[Link]">Nosotros</a></li>
<li><a href="[Link]">Servicios</a></li>
<li><a href="[Link]">Portfolio</a></li>
<li><a href="[Link]">Contacto</a></li>
</ul>
</nav>
En este ejemplo, tenemos un menú de navegación, y por eso, lo hemos colocado dentro de una
etiqueta <nav>. Posteriormente, para desarrollar el menú, hemos usado una lista no ordenada <ul>,
donde cada elemento <li>: inicio, nosotros, servicios, portfolio y contracto, contiene un enlace que te
lleva a dicha página.
Como bien hemos dicho anteriormente, no existe una única forma de desarrollar un menú, pero si
usas la fórmula estándar no vas a equivocarte.
Por último, indicar que los menús pueden ir dentro de cualquier lugar de nuestra página web. Puedes
tener un menú dentro del <header>, un menú de refuerzo en el <footer> y también, por ejemplo, en uno
de los laterales del contenido principal. Ubícalos allá donde los necesites según la página web que
estés construyendo.
</NAVEGACIÓN>
<SECCIONES_ARTÍCULOS_Y_SECUNDARIOS>
Gracias a las etiquetas vistas en los dos puntos anteriores, podemos segmentar mucho más nuestro
contenido y darle algo más de orden. Sin embargo, y a priori, es presumible entender que el contenido
que vayamos a ubicar dentro del <main> aún puede quedarnos algo extenso, y necesitamos darle
orden. Para ello, vamos a conocer tres nuevas etiquetas de estructura que nos van a ayudar a
continuar atomizando nuestro contenido: Las etiquetas de sección, las de artículo, y las de contenido
secundario o relacionado: <section>, <article> y <aside>:
GOGODEV / @JJRuizEmpresa
Etiqueta de sección <section>: Con ella, agruparemos las diferentes secciones en las cuales
se divide nuestro contenido principal. Imaginemos por ejemplo que tenemos una página que
en su <main> va a contener información sobre la compañía, después va a tener una galería de
imágenes de nuestros trabajos y por último una sección con diferentes testimonios de
nuestros clientes. Podríamos agrupar cada una de ellas dentro de una etiqueta <section> para
hacer entender que cada una de estas trata un tema diferente. Como puedes observar, a
medida que vamos bajando en la estructuración, el uso de cada una de las etiquetas
comienza a ser más subjetivo, pudiendo encontrar un mayor o menor número de ellas en
función del criterio del constructor de la página. Y es que, visualmente, el uso de las etiquetas
de estructura no tiene efecto. Este, es tan solo a nivel semántico.
Etiqueta de artículo <article>: Esta tiene quizás un formato más sencillo de entender que la
anterior. Y es que, dentro de <article> encerraremos, como su propio nombre indica, el
contenido de un artículo dentro de una web. Si por ejemplo estamos construyendo un blog,
encerraremos dentro de esta etiqueta todo el contenido del artículo, tales como su título, su
imagen de cabecera, su descripción y/o su contenido. De igual forma, podríamos encerrar en
un article cada uno de los productos en una tienda online.
Etiqueta de contenido secundario <aside>: Dentro de un aside colocaremos toda esa
información que está relacionada con la sección o el artículo, pero cuyo material no forma
parte de lo importante del mismo. Podemos entenderla como contenido auxiliar. Un ejemplo
de aside sería, dentro de un blog, una barra lateral a la derecha en la que mostramos un
listado de artículos relacionados con el post que se está leyendo actualmente, o un banner
con un anuncio de interés para el contenido que se está visitando.
</SECCIONES_ARTÍCULOS_Y_SECUNDARIOS>
<DIVISIONES_EN_BLOQUE_Y_EN_LÍNEA>
Llegamos al final de las etiquetas semánticas con las divisiones <div> y las divisiones en línea
<span>. Y es que, a pesar de todas las etiquetas vistas anteriormente, puede llegar a ser necesario en
algún momento realizar otras divisiones, que no atienden a ninguno de los casos anteriores. Esto va a
ser algo muy común a lo largo del desarrollo del siguiente curso (Curso CSS), cuando comencemos a
trabajar la parte estética y visual de nuestro contenido y es que, a veces, puede resultar interesante
realizar una nueva división, no porque sea una sección o un artículo diferente, si no simplemente
porque queremos pintar de colores distintos cada una de ellas.
Por eso, y para realizar cualquier otro tipo de división en nuestra estructura que necesitemos,
podemos acudir a las etiquetas de <div> y <span>.
La principal diferencia entre ellas es que <div> es una división de bloque, mientras que <span> es una
división en línea. Estos, son conceptos que trataremos más adelante cuando nos adentremos en el
uso de CSS, pero de momento puedes quedarte con esto:
GOGODEV / @JJRuizEmpresa
<div> será interesante cuando hagamos divisiones en bloques completos, “que conformen
más de una línea de contenido”.
<span> por el contrario será utilizado cuando queramos dividir un pequeño contenido dentro
de una misma línea. Por ejemplo, para resaltar alguna frase en otro color dentro de un texto,
como indicábamos en el ejemplo anterior.
Hora de practicar
¿Cómo estructurarías la siguiente página?
Y con esto no solo llegamos al final del capítulo, si no también al final del curso de HTML donde
hemos estado tratando la estructura, el contenido. En el siguiente curso (Curso CSS) arrancamos una
nueva senda para, ahora sí, poder comenzar a aplicar estética y diseño a nuestro contenido.
Si quieres repasar en vídeo todo este bloque, o te has quedado atascado, puedes ver todo el proceso
en el canal de YouTube GOGODEV.
Ya tenemos el contenido. Es hora de vestirlo bien, hacerlo lucir, y presumir de ello.
</DIVISIONES_EN_BLOQUE_Y_EN_LÍNEA>
