¿Qué es HTML semántico?

¿Entonces cuándo debería usar div? ¿Nunca? 🤔…

Como ya vimos, tenemos varias etiquetas que pueden actuar como cajitas. A nivel de resultado visual obtendremos lo mismo, funcionan, me pintan lo que yo quiero que me pinten en la pantalla, ¿por qué debería preocuparme por ver si debo usar <div> o si debo usar <header> o <section>, etc.? Bueno, hay una razón muy específica para ello 👇.
.
Resulta que a nivel de significado, cada etiqueta tiene un significado diferente. Es decir, aunque hacen lo mismo, NO significan lo mismo, por eso se le llama “HTML semántico”.
.
¿Pero a qué nos referimos con “significado”? ¿Quién entiende ese significado? La respuesta es sencilla: Google 🤠.
.

.
Ok, Google no es el único, básicamente el significado lo entiende cualquier motor de búsqueda, pero convengamos que Google es el más usado. Cuando tú buscas algo en Google ves que en los resultados te aparecen varias páginas web, y si tú vas a hacer una página web ¡pues también vas a querer que la tuya aparezca! ¿No lo crees? Esto hace parte de algo llamado SEO (Search Engine Optimization), es decir, Optimización para Motores de Búsqueda (que aparezcas en Google pues jaja).
.
Entonces, para poder aparecer en Google, Google necesita entender cómo está estructurada tu página web, de esa forma Google puede darle una navegación más fácil desde la vista de resultados a cualquier persona que encuentre tu página web 👇.
.

.
Y la forma en la que Google puede entenderlo es básicamente leyendo tu HTML. Y Google lo leerá por medio de HTML semántico 🤠.
.
¿Eso significa que nunca debería usar <div>? ¡No! Por supuesto que puedes usar <div>, esta etiqueta es muy útil cuando queremos hacer estilos con CSS, por ejemplo. Cuando decimos "no uses <div>" nos referimos a que no deberíamos usarlo para organizar el contenido de tu página, porque simplemente Google ignora cualquier <div> mientras lee tu página. Si tú pones un menú de navegación usando <div> Google lo va a ignorar, pero si tú pones un menú de navegación usando <nav> Google sabrá que tu página web tiene un menú de navegación (y te tomará en cuenta para posicionarte 7u7).
.
En cambio, si tú quieres mostrar un contenido dividido en 2 partes (izquierda y derecha) y usas <div> para hacerlo, entonces está súper bien, porque a Google no le importa cómo muestres (visualmente) tu contenido, así que en estos casos, <div> nos ayuda mucho cuando queremos hacer cosas visuales con nuestra página 😌.

usar html semantico tambien ayuda mucho en la lectura de nuestro código

Me encanta cada dia me enamoro mas de lo que estoy aprendiendo, esta muy buena la idea del manual que ayuda mucho para concentrarse en el video. 😃

Les comparto mis apuntes. 😄

HTML semántico

Es un concepto muy importante para los nosotros como desarrolladores.

Nos va a indicar o señalar que tenemos que usar propiedades adecuadas para los textos, párrafos, imágenes, secciones, etc.

Tenemos que usar las diferentes etiquetas de HTML que ya existen para las diferentes cosas que queramos colocar.

Ventajas

• Al hacer esto vamos a lograr tener un código accesible.
• Tenemos el tema de posicionamiento SEO.
• Nos permite tener un código mucho más claro, ligero y fácil de leer.

SEO

Google revisa nuestra página web y se fija como está nuestro contenido, lo revisa con mucho detalle.

Si tenemos muchos div no vamos a tener un buen posicionamiento.

Ejemplo

Etiqueta div

Es una etiqueta comodín, nos permite hacer muchas cosas no es una buena práctica usarla en cada cosa que hagamos.

Más sobre div.

Otros apuntes

Curso Definitivo de HTML y CSS

Clase

Semántica

las etiquetas <div> solo deben de ir dentro de las etiquetas contenedoras (landmarks) como <footer> <main> <nav> <header>
O en casos más avanzados se puede usar <div> con el atributo role

Trataré de explicar lo que entiendo de la clase.

Html es un lenguage de marcado que nos ayudará a estructurar nuestras páginas web, es por ello que, para “estructurar” se utilizan ciertas etiquetas designadas para eso.
(nav, section, article, etc)

Por ejemplo:

Como vemos en la imagen, tanto la etiqueta nav como el div nos funcionan para el mismo resultado, pero tanto para el navegador como para el desarrollador es mas factible identificar el menu de navegación con la etiqueta correcta para eso.

Entonces, ¿cómo debo utilizar el div?
Por lo que leí, para ayudarnos a mejorar el esquema y estilos dentro de nuestras etiquetas principales.

Por ejemplo:

De manera simple podemos ver como el div nos ayuda a organizar nuestro menu y el logo cambiando su posición.

Google revisa nuestra pagina y nos indica si tenemos algún Bug que no esta permitiendo que nuestra pagina código funcione o simplemente que la etiqueta que estamos utilizando rompa nuestro código.

Debemos saber en que momento se ponen ciertas etiquetas y cual es su funcionamiento, porque realmente nuestro código no tendría sentido.
__
__
En pocas palabras “NO HAGAMOS CODIGO COMO LOCOS SINO ANALICEMOS QUE ETIQUETAS SON LAS MEJORES DE ACUERDO A EL PROYECTO HTML QUE ESTAMOS DESARROLLANDO” 😎🤣🥰

Muy fan de esta imagen. 😂

me encantaría este carrera y este universidad de PLATZI , eso le que yo estaba buscando hace muchos años.
lamentablemente , me perdí mi tiempo en unos universidades de presencial no me sirvieron por nada , estuvo puros cursos de teoría que no trae nada de practica.
yo he hecho mi carrera de ingeniería de software por 3 años y mas , y casi pura teoría , cursos de programación muy básico, y el final pagar bastante dinero y terminas así sin nada de experiencia o practica , pura cédula no sirve de nada.
oh my god donde andaban gente de platzi , yo le estaba buscando desde 2003 .

En el minuto 0:07… ¿¿¿Será posible??? :0

Un marcado con un significado para lo que realmente va a servir dicho identificador. En otras palabras, HTML5 ha hecho el trabajo al diseñador web mucho más sencillo que con versiones anteriores. 😃

En esta imagen se puede ver lo explicado

Div es como una herramienta de doble filo.
Igual de útil, como dañino!!😤😡😡

Las ventajas de usar HTML semántico

1. Ayuda a que la página sea más accesible.
2. Ayuda a mejorar el posicionamiento SEO.
3. Puede ayudar a que tu código sea más fácil de leer y de mantener.

Apuntes:

• HTML semantico utiliza etiquetas con significado que logran hacer que el sitio sea mas LEGIBLE, ACCESIBLE y ademas mejora tu POSICIONAMIENTO al momento que los motores de busqueda ordenan sus resultados cuando el usuario los requisa (favorecen a los documentos html escritos semanticamente).
• No se debe, por tanto, usar div para una funcion para la cual ya existe una etiqueta.
• Estas etiquetas funcionan muy similarmente, pero significan cosas distintas para un desarrollador o navegador.

la div, conicida tamabien como divcitto, puede tomar diferentes formas en la estructura de nuestro documento web.

Debemos no abusar de div, pues existen etiquetas para describir las diferentes partes del sitio, mejorando asi la accesibilidad y el posicionamiento SEO

Ejemplo con errores con los div

Gracias a todos por sus comentarios y experiencias, soy nuevo en esto y la verdad he aprendido como nunca y la profe excelente muy didáctica y preocupada en los detalles
a seguir aprendiendo
Saludos desde Chile 🇨🇱 ✌️

Recuerden que para no estar todo el tiempo refrescando la página hay algo que se llama “Live Server”. Que ayuda a tener un servidor de forma local, como el de ella pero se actualiza cada vez que realizamos un cabio.

Como podemos usar div, en resumen se utlizan para la estructura de una página web, yo lo veo como contenedores para tener un orden en la visualización de la página.

Utilizar HTML semantico es importante para poder crear sitios web accesibles y con un mejor posicionamiento SEO, mejor organizados y facil de entender (Sitios Web Sostenibles).

Eso de Div no estoy seguro, vean las paginas como tiktok , facebook u otros es puro div

Nos referimos a HTML semántico cuando somos capaces de definir nuestra estructura HTML con las etiquetas que expresan el significado verdadero de lo que estamos creando.

Por ejemplo, si tenemos en mente colocar un título y somos semánticos, utilizaremos como primer opción la etiqueta que da a entender que estamos creando un título, ya que no hay necesidad de usar otras etiquetas que no sean las inventadas para crear un título…

Excelente clase nos ayuda entender de por que debe tener una estructura semántica para nos pueda entender los buscadores.

Notas de la clase

HTML semántico: etiquetas con significado

• Ayuda a tu sitio a ser accesible
• Mejora tu posicionamiento SEO
• Código más claro

Intentar limitar el uso de etiquetas div

Me parece excelente que desde un principio se empiece hablando del HTML semántico, así al momento de escribir HTML para un sitio real haremos un mejor trabajo

Dejo esta aportación

No conocía este editor https://codi.link/ esta muy interesante

HTML Semántico es el uso de las etiquetas HTML para reforzar la semántica, o el significado, de la información en las páginas web más que simplemente redefinir su forma de presentación (apariencia). El HTML semántico es procesado por los navegadores web regulares así como por muchos otros agentes de usuarios

para crear un navbar (barra de navegación) se usa la etiqueta 🔖:

<nav>y aquí el contenido de la barra de navegación</nav>

también se puede hacer con:

<div></div>

pero por buenas prácticas y para mejor SEO:

código HTML semántico: Ayudar al buscador a indexar mejor nuestro código

RETO#2
<header>Encabezado</header>
<nav>barra de navegacion</nav>
<main>Contenido principal</main>
<section>define una sección de la página.</section>
<article>define un artículo, el cual puede tener su propio encabezado, navegación, sección o pie de página.</article>
<footer>Pie de pagina</footer>

https://www.w3.org/Style/Examples/011/firstcss.es.html

Me encanta la idea de este curso y me reí bastante con la imagen de Google siendo cruel con el Div. Me ayudó a entenderlo y se ve que fue hecho con cariño. Gracias por esto.

Benefeicios de usar HTML semantico y no solo <div></div>

• Nuestro motor de busqueda lo interpreta mejor y mas rapido.
• Ofrece sensacion de plena organizacion de nuestro codigo por consecuente, mucho mas facil de leer.
• Sera mucho mas facil trabajar con otros desarrolladores.
• Y por ultimo, tu codigo se vera una chimba!

Las etiquetas mas usadas en el HTML semantico son las siguientes:

<header></header>
<nav></nav>
<section></section>
<article></article>
<img></img>
<footer></footer>

Estructura básica

Todas los sitios web tienden a compartir componentes estándar similares.
cabecera: <header>

Barra de navegación: <nav> .
contenido principal:<main> , con varias subsecciones de contenido representados por
<article>, <section> y <div> elementos.
Recuadro:<aside> a menudo colocado en el interior <main>.
pie de página <footer>

Nosotros somos afortunados al poder ver lo que nos rodea, pero hay personas que no tienen la misma fortuna, por ello es importante el correcto uso de las etiquetas ya que los interpretes de paginas web leen las etiquetas para poder dar información más precisa a usuarios invidentes.

Les comparto mis apuntes tomados en Notion:
https://drive.google.com/file/d/1o47yB6-Do5mE3P5h92XuhnrRowWky9Av/view?usp=sharing

Este recurso me gusta mucho, ya que ayuda a entender que preguntas debes realizarte antes de utilizar cada elemento:
https://html5doctor.com/lets-talk-about-semantics/

Si utilizan windows y quieren crear u archivo desde la terminal:
Abran powershell en la carpeta del curso y escriban:

 ni semantic.html

Debe verse de esta forma, luego le dan enter:

La importancia de usar las etiquetas correspondientes.

no se olviden de cambiar el lang=“en” a “es” para que no les salte el traductor

Con el semantico es mas facil leer el codigo a que estuviese toda la estructura con div.

Definición según HTML reference:

#div
Defines a generic block of content, that does not carry any semantic value. Used for layout elements like containers.

SEO

HTML semántico: nos indica que ocupemos las propiedades indicadas que ya están funcionalidades desde HTML 5

Un documento HTML, una página web, contiene un árbol de etiquetas, que tiene una organización básica. La etiqueta raíz de un documento HTML es <html> y dentro tiene dos etiquetas principales:

<head>: con la información de cabecera de la página. Es información que en principio no aparecerá en el cuerpo de la página, pero que sirve para saber de qué trata la página, cómo deben interpretarla los distintos clientes web, etc.
<body>: que es la información del cuerpo, es decir, lo que se verá en el navegador cuando el usuario entre.

Reto solucionado![](

Reto cumplido!

En esta página se habla de la importancia del HTML semnántico. También se hace la comparación de una página de hoy vs una de inicios de los 90s. De verdad está muy interesante.

entonces conclusiones hasta ahora:

• Dominar HTML
• Dominar CSS
• Saber usar las etiquetas correctas

Mis apuntes en Notion💚

La etiqueta <div> tiene varios usos al poder definir un bloque genérico de contenido, pero existen etiquetas semánticas que pueden ayudar a que el sitio sea más accesible, por ejemplo, para poder definir un pie de página utilizamos la etiqueta <footer> en lugar de la etiqueta <div>.  Es decir, por ejemplo, tú quieres jugar videojuegos, pero no has definido qué juegos probar, similar a querer utilizar etiquetas <div> para todo debido a que no has definido a detalle la interfaz de la página. Ahora, decides comprar juegos de Mario Bros (suponiendo que tienes un Nintendo Switch) porque viste publicidad relacionada con esos juegos, aquí ya definiste qué videojuegos comprar. Esta situación es parecida a utilizar la etiqueta <footer> en lugar de <div> debido a que ya te informaste acerca de la función de la etiqueta <footer>. Este es un ejemplo que se me ocurrió, pero el punto principal es saber utilizar las etiquetas semánticas. Espero haberlo entendido bien, estoy abierto a retroalimentación. Nunca paren de aprender.

lo que se evita en HTML es el abuso de la etiqueta div para editar una o varias secciones en específico, por ello existen etiquetas que hacen dicha tarea y que podemos separar la estructura del documento en bloques donde podemos hacer las modificaciones sin afectar al resto de los elementos

Yo al enterarme que el div era malo para SEO:

Mi solución al desafío.

En resumen, permite que nuestro código sea más fácil de entender porque cada etiqueta nos brinda un significado de la sección de la página web, así, en general se ve más ordenada, no solo para mí, sino, para otros desarrolladores.

<!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>Semantic</title>
</head>
<body>
<header>define el encabezado de la página</header>
<nav>define una barra de navegación que incluye enlaces</nav>
<section>define una sección de la página</section>
<article> define un artículo, el cual puede tener su propio encabezado, navegación, sección o pie de página.</article>
<footer>define un pie de página o de sección.</footer>
</body>
</html>

Clase 5 - ¿Qué es HTML semántico?

¿Qué es HTML semántico?

• Esto significa usar las etiquetas correctas para lo que queremos construir y no usar el elemento <div> para todo como muchos devs los hacen.

¿Para qué nos sirve el HTML semántico?

• Nos ayuda a que nuestro sitio web sea más accesible.
• Mejora el posicionamiento de nuestro sitio web.
• Generamos un código más claro y legible.

¿El elemento <div> es semántico?

• No, este elemento no tiene un peso semántico.

• En esta página tambien se explica el HTML semántico, también se tienen ejemplos para cada elemento(header, nav, section …). Recomendada:
  https://www.w3schools.com/html/html5_semantic_elements.asp

en resumen div nose deve usar para todo algunos programadores usan div para todo pero eso es una mala practica en una seccion usar div o seccion es mejor usar un section porque el navegador lo renderizara mejor

Soy programador hace 5 o 6 años y trabajo en una empresa de desarrollo hace unos meses, pero les digo que ver este curso introductorio me ha ayudado a llenar vacíos y la verdad termina siendo super interesante, recomiendo ver estos cursos con ya más experiencia

Estefany Aguilar, muy buena explicacion. te felicito. saludos.

Veo a muchos utilizando div, estan en el camino al olvido por google

Que lindura eres un angel saludos princess

HTML nos brinda una serie de etiquetas con mayor significado, para cada parte, sección, o elemento de nuestra página, y que, aunque en la práctica no generen un resultado distinto al de usar una etiqueta <div> como contenedor para todo, pueden darle mayor significado a nuestro código, así como algunas otras ventajas.

Este es mi resultado del desafío

Aquí dejo como quedo mi página para el desafío de esta sección usando un poco de css básico para darle el formato de la imagen.

Yo pensando que era el <head> de su vida y resulta que era un <div> 😦

Bueno el video esta bien, por temas de posicionamiento el usar mucho la etiqueta div se lo penaliza los navegadores, son buenas practicas saber cuando usarlo, cabe resaltar que la etiqueta div es un elemento de bloque cosa que con el tiempo pude comprender por no tener esta herramienta de aprendizaje como lo es Platzi

ME GUSTA ESTA PLATAFORMA
MUCHAS GRACIAS POR LAS CLASES A PLATZI

Quizás muchos se enredaron aquí, pero daré mi resumen para que entre todos podamos entender mejor.
.
La etiqueta <div> sirve para crear secciones o agrupar contenido de nuestra página, pero no puede ser reemplazada por etiquetas importantes como <nav>, <footer>, <header> o <section> (que también funcionan para separa o dividir contenido), ya que éstas etiquetas son importantes para el HTML semántico.
.
y que es el HTML Semántico? es el resultado de usar etiquetas con significado importante como <header> <nav> o <section> ya que estas etiquetas nos ayuda a mejorar nuestro posicionamiento o sea el SEO (Search Engine Optimization), y hace que nuestro sitio sea más accesible y visible en la búsqueda.
.
Entonces, Cuando usar <div>? cuando por ejemplo queremos dividir nuestro contenido en dos sectores o columnas dentro de nuestra página pero que ésta división no sea una parte importante de la página, sino que sea solo apariencia o visual.

La etiqueta <div> se puede utilizar cuando no es necesario utilizar las demás etiquetas semánticas 😃

Básicamente pienso que la profe necesita trabajar el tema de su muletilla. :p

<div></div>

Es un excelente aliado para hacer efecto visuales, siempre trata de usar html semantico y usa los divs para apoyarte con el css

Muy interesante la explicación

En HTML vamos a encontrar la etiqueta div, que permite hacer varias cosas, sin embargo se debe dar sentido a lo que estemos escribiendo en este lenguaje.
Por lo que se deben utilizar etiquetas con significado, ya que ayudan al sitio web a ser accesible, mejora el posicionamiento en SEO y ayuda a que el código sea mas claro.

La etiqueta <article> me confunde con crear articulos.

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Semantica Web</title>
  </head>
  <body>
    <header>
      <h1>Jesus Velasco</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Articulos</a></li>
        <li><a href="#">Proyectos</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
    </nav>
    <main>
      <section>
        <h2>Ultimos articulos</h2>
        <article>
          <h3>Lorem ipsum dolor sit.</h3>
          <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro, 
            provident nisi! Tempora magni est aliquid consectetur esse ipsam error 
            eos quibusdam, harum magnam repellendus aperiam aut deserunt dolor iste dolorem!
          </p>
        </article>
        <article>
          <h3>Lorem ipsum dolor sit.</h3>
          <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro, 
            provident nisi! Tempora magni est aliquid consectetur esse ipsam error 
            eos quibusdam, harum magnam repellendus aperiam aut deserunt dolor iste dolorem!
          </p>
        </article>
        <article>
          <h3>Lorem ipsum dolor sit.</h3>
          <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro, 
            provident nisi! Tempora magni est aliquid consectetur esse ipsam error 
            eos quibusdam, harum magnam repellendus aperiam aut deserunt dolor iste dolorem!
          </p>
        </article>
      </section>
      <section>
        <h2>Proyectos destacados</h2>
        <article>
          <h2>Lorem.</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, iure.
          </p>
        </article>
        <article>
          <h2>Lorem.</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, iure.
          </p>
        </article>
        <article>
          <h2>Lorem.</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, iure.
          </p>
        </article>
      </section>
    </main>
    <footer>
      <p>Desarrollado con 🥴 por Jesus Velasco</p>
    </footer>
  </body>
</html>

Entrando a la facultad para hacer analista programador, nunca nos mencionaron el div en los primeros semestres, es más, juntándome en comunidades de programadores fue que descubrí que rayos era, yo pude vivir perfectamente sin él, tu también puedes jajaja supongo que es mejor no prestar atención al div al principio del aprendizaje para acostumbrarse a organizar bien nuestro documento html, lo que lo hace más fácil de identificar también para otros programadores que interactúen con nuestro código

etiqueta <div>

muy bien

Me gusta mucho estas clases el manual es muy entretenido para seguir en el proceso y que sea mas cómodo aprender.

Mis apuntes en Notion

HTML Semántico
La semántica hace referencia al significado de las palabras y al significado de las oraciones, por ejemplo, cuando leemos un texto coherente, que utiliza palabras y oraciones adecuadas y que le dan sentido a lo que leemos.

De igual forma, HTML nos brinda una serie de etiquetas con mayor significado, para cada parte, sección, o elemento de nuestra página, y que, aunque en la práctica no generen un resultado distinto al de usar una etiqueta <div> como contenedor para todo, pueden darle mayor significado a nuestro código, así como algunas otras ventajas.

Ventajas

1. Código más claro y fácil de mantener
2. Ayuda a tu sitio a ser accesible
3. Mejora tu posicionamiento SEO
   
   

¿Qué es HTML semántico?

Etiqueta <div>

• Define las divisiones lógicas existentes en el contenido de una página web pero sin ningún uso en particular.

HTML Semántico

HTML Semántico es el uso de las etiquetas HTML para reforzar la semántica, o el significado, de la información en las páginas web más que simplemente redefinir su forma de presentación (apariencia).

Ventajas

• Ayuda a hacer tu sito más accesible.
• Mejora tu posicionamiento SEO.
• Permite tener un código más claro y sostenible.

<!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>HTML semántico</title>
  </head>
  <body>
    <header>Header</header>
    <nav>Nav</nav>
    <main>
      <article>Article</article>
      <article>Article</article>
      <article>Article</article>
    </main>
    <footer>Footer</footer>
  </body>
</html>

HTML semántico

• La etiqueda <div> … es un misterio !
• Nos indica a usar las etiquetas precisas a cada necesidad.
• Ayuda al sitio a ser accesible.
• Mejora el posicionamiento SEO.
• Código más claro y legible.

Inicie con el curso de programación basica y me gustó, ya he tomado otros cursos y han estado muy bien, pero este curso con el manual que nos dio Estefany esta bestial!!!

El manual debería ser obligatorio para todos los cursos. Facilita el aprendizaje.

Mil gracias Estefany!!!

El HTML semántico nos sugiere usar propiedades adecuadas para todos los elemento, para tener un código accesible, mas claro y mejora el posicionamiento de la pagina web.

Estefany deberia dar todos los cursos de Frontend 😃.
Lo hace ver todo facil y enamora su carisma para las clases.

La semántica en HTML se refiere al significado extra que otorgan los elementos. Esta información es lo que permite que un documento se pueda rastrear de mejor manera. Ayuda a que el contenido se muestre de manera consistente en diferentes aplicaciones y contextos.

Me encanta ver que puedo poner en practica inmmediata las cosas aprendidas, gracias por el manuel es de lo más top para mi porque de esa manera aprendo realmente mejor y rapido.

HTML Semántico

<!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>HTML Semántico</title>
</head>
<body>
  <header>
      <h1>Título principal de nuestra pagina</h1>
  </header>
  <nav> <!--Menú de navegación de nuestra página web -->
    <ul> 
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </nav>
  <main>
    <h2>Sección principal de nuestra página</h2>
  </main>
  <footer>
    <p>Pie de pagina</p>
  </footer>
</body>
</html>

HTML Semantico

<div> Etiqueta que no debemos usar siempre, debe tener un sentido.

HTML Semantico nos indica las propiedades adecuadas de acuerdo al tipo de etiqueta que se requiere, EJM: para un parrafo, para una imagen, texto, secciones. Usar las etiquetas correspondientes

Para qué sirve:

• Tener un código accesible
• código más claro
• Posicionamiento SEO, dado que google lo que hace es revisar el contenido de la pagina y si tiene muchos DIV, lo descarta

HTML semántico nos señala que hagamos buen uso de las propiedades que ofrece HTML5 para los textos, párrafos, imágenes, secciones, etc.