Estructura html recomendada

Esto nos facilita muchas cosas a todos!



Pexel por @jBaton open_in_new
Photo by Max DeRoin from Pexels

Estructura semántica.

Una estructura que tenga un significado relevante, tanto para los desarrolladores como para las máquinas...

Si haces zoom arriba en tu editor de texto, si alejas la vista para englobar desde la etiqueta <!DOCTYPE html> hasta la última </html> puede que veas algo así:

<!DOCTYPE html> 
<html lang="es-ES" dir="ltr">
<head>
<meta charset="UTF-8">
<link href="css/.." type="text/css" rel="stylesheet" />
</head>
<body>
<header> </header>
<nav></nav>
<article> <!-- Puede cambiarse por section -->
<section></section>
<aside></aside>
</article>
<footer></footer>
<script src="js/.."></script>
</body>
</html>

El documento html contiene una cabeza pensante, un cuerpo contenedor.

Cabecera, navegación o menú, sección, articulo, espacio publicitario y un pié de página.

Traduciendo este ejemplo... Con HTML5se nos recomienda el uso de varias etiquetas html estándar, estas permiten que la máquina "entienda" de qué trata el contenido de la página. Podemos decir que dentro de un espacio <div> se encuentra un párrafo <p> pero de aquí no pasa, no es capaz de diferenciar que es lo que pone dentro de ese parrafo. Con varias etiqueta que ofrece: <q> dentro de una <p> indicaría que en ese párrafo se encuentra una pequeña "cita"

<header>

soy la caja que contendrá tu cabecera

</header>

Traduciendo este ejemplo... Con HTML5se nos recomienda el uso de varias etiquetas html estándar, estas permiten que la máquina "entienda" de qué trata el contenido de la página. Podemos decir que dentro de un espacio <div> se encuentra un párrafo <p> pero de aquí no pasa, no es capaz de diferenciar que es lo que pone dentro de ese parrafo. Con varias etiqueta que ofrece: <q> dentro de una <p> indicaría que en ese párrafo se encuentra una pequeña "cita"

<q>

Estando entre estas Q's! soy un texto citado

</q>

Lorem ipasdasda asd era af aerac aer asd aer asd ar a