¿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

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.

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

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!!😤😡😡

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

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.

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.

😄 Ahora viene lo semántico.

Seamos sinceros, mas uno paso por su momento de divitis 😂😅

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

¿Entonces no uso <div>?

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.

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.

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

En mozilla developer podrás encontrar más información sobre HTML semántico

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <header>
    hola
   </header>
   <nav>
    <ul></ul>
   </nav>

   <footer></footer>
</body>
</html>

La primera vez que me dijeron, procura no usar muchos DIV, y reviso el html en muchas paginas y repletas de puros div xd

Desafío
Construye la estructura semántica de un documento 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.

Aquí dejo un poco de cuando inicio el uso de la etiqueta div
Div and Span Tag

Developer -> el atributo alt me servira para que tenga mejor accesibilidad la web y las personas con una discapacidad puedan acceder sin problemas.😁🤔

el consltor seo -> el atributo alt para posicionar mejor y más rapido 😈 😎

Importancia y beneficios de usar HTML semántico:

• Ayuda a tu sitio a ser más accesible
• Mejora tu posicionamiento SEO
• Ayuda a la lectura de código ya que al darle significado, se hace más fácil entender qué hace cada etiqueta o porción de código

Me acuerdo que todo mi codigo html los ponia con puros , divs era un dolor de cabeza leer nuevamebte el codigo

<DOCTYPE html >
<html>
<body>
    <div id="header">
        <a href="/"><img src=logo.png alt="home"></a>
        <h1>My Weblog</h1>
        <p class="tagline">
            A lot of effort went into making this effortless.
        </p>
    </div>
    <div id="nav">
        <ul>
            <li><a href="#">home</a></li>
            <li><a href="#">blog</a></li>
            <li><a href="#">gallery</a></li>
            <li><a href="#">about</a></li>
        </ul>
    </div>
    <div class="articles">
        <div class="article">
            <p class="post-date">October 22, 2009</p>
            <h2>
                <a href="#" title="link to this post">Travel day</a>
            </h2>
            <div class="content">
                Content goes here...
            </div>
            <div class="comments">
                <p><a href="#">3 comments</a></p>
            </div>
        </div>
    </div>
    <div class="aside">
        <div class="related"></div>
        <div class="related"></div>
        <div class="related"></div>
    </div>
    <div id="footer">
        <p>&#167;</p>
        <p>&#169; 2013&#8211;9 <a href="#">Arkaitz Garro</a></p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
    <header>
        <a href="/"><img src=logo.png alt="home"></a>
        <hgroup>
            <h1>Title</h1>
            <h2 class="tagline">
                A lot of effort went into making this effortless.
            </h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">home</a></li>
            <li><a href="#">blog</a></li>
            <li><a href="#">gallery</a></li>
            <li><a href="#">about</a></li>
        </ul>
    </nav>
    <section class="articles">
        <article>
            <time datetime="2009-10-22">October 22, 2009</time>
            <h2>
                <a href="#" title="link to this post">Travel day</a>
            </h2>
            <div class="content">
                Content goes here...
            </div>
            <section class="comments">
                <p><a href="#">3 comments</a></p>
            </section>
        </article>
    </section>
    <aside>
        <div class="related"></div>
        <div class="related"></div>
        <div class="related"></div>
    </aside>
    <footer>
        <p>&#167;</p>
        <p>&#169; 2013&#8211;9 <a href="#">Arkaitz Garro</a></p>
    </footer>
</body>
</html>

excelente clase

Reto solucionado![](

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

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.

HTML semántico

El HTML semántico es una forma de escribir código HTML que se centra en el significado del contenido, en lugar de solo su apariencia. Se utiliza para describir el papel y la función de cada elemento en la página web, lo que facilita que los navegadores y otros agentes de usuario comprendan el contenido y lo presenten de forma accesible.

En HTML semántico, se utilizan etiquetas específicas para definir el tipo de contenido que se está presentando. Por ejemplo, la etiqueta <header> se utiliza para definir el encabezado de la página, la etiqueta <article> se utiliza para definir un artículo de contenido independiente, y la etiqueta <section> se utiliza para definir una sección de contenido.

Las ventajas de usar HTML semántico incluyen:

• Mejora la accesibilidad: El HTML semántico facilita que los lectores de pantalla y otras herramientas de accesibilidad comprendan el contenido de la página web.
• Mejora la experiencia del usuario: El HTML semántico puede ayudar a los navegadores a presentar el contenido de forma más intuitiva y fácil de usar.
• Mejora el SEO: El HTML semántico puede ayudar a los motores de búsqueda a comprender mejor el contenido de la página web, lo que puede mejorar su ranking en los resultados de búsqueda.

Aquí hay algunos ejemplos de etiquetas HTML semánticas comunes:

• <header>: Define el encabezado de la página.
• <main>: Define el contenido principal de la página.
• <section>: Define una sección de contenido.
• <article>: Define un artículo de contenido independiente.
• <aside>: Define contenido secundario, como una barra lateral.
• <footer>: Define el pie de página de la página.
• <nav>: Define un sistema de navegación.
• <figure>: Define una figura, como una imagen o un gráfico.
• <img>: Define una imagen.
• <a>: Define un enlace.
• <table>: Define una tabla.
• <h1>, <h2>, …, <h6>: Definen encabezados de diferentes niveles.
• <p>: Define un párrafo de texto.

Es importante elegir las etiquetas HTML semánticas correctas para el contenido que se está presentando. Esto ayudará a garantizar que la página web sea accesible, fácil de usar y tenga un buen ranking en los resultados de búsqueda.

Básicamente el que usemos HTML semántico ayuda a que nuestro sitio web sea mucho mejor reconocido por google para tener un buen posicionamiento, en lo personal pienso que usar HTML semántico es una buena práctica ✅

Estructura semantica html

<code> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ejercicio2 estructura basica de html para una pagina web</title>
</head>
<body>
    <header> <!--TODO! tag que corresponde  a la seccion de header-->

    </header>
    <nav> <!--TODO* tag que corresponde  a la seccion de nav-->
        <ul></ul>
    </nav>

    <main> <!--TODO? tag que corresponde  a la seccion de main-->
        <article></article> <!--TODO: tag que corresponde  a la seccion de article-->
    </main>
    <footer></footer> <!--TODO? tag que corresponde  a la seccion de footer-->
</body>
</html>

✅

HTML semántico es una forma de escribir código HTML de una manera que hace que tu página web sea más fácil de entender tanto para los desarrolladores como para las máquinas, como los motores de búsqueda y los lectores de pantalla utilizados por personas con discapacidades visuales. Aquí tienes una explicación sencilla:

Imagina que estás construyendo una casa y quieres que sea fácil de navegar para las personas que la visitan. En lugar de simplemente poner puertas y ventanas en cualquier lugar sin un plan claro, decides usar colores y formas específicas para hacer que cada parte de la casa tenga un propósito claro. Por ejemplo, usas puertas rojas para las habitaciones y ventanas azules para las áreas comunes.

En HTML semántico, hacemos algo similar con nuestro código. En lugar de simplemente usar etiquetas como <div> y <span> sin un propósito claro, utilizamos etiquetas específicas que describen el tipo de contenido que contienen. Por ejemplo, en lugar de usar <div> para todo, podríamos usar etiquetas como <header> para el encabezado de la página, <nav> para la navegación, <article> para el contenido principal y <footer> para el pie de página.

Esto no solo hace que el código sea más legible para los desarrolladores, sino que también le dice a las máquinas, como los motores de búsqueda, qué partes de tu página son importantes y cómo están relacionadas. Así, pueden indexar y mostrar tu contenido de una manera más inteligente.

En resumen, puedes usar div las veces que uno quiera, sin embargo se recomienda no usar en exceso la etiqueta ‘div’ para todo el sitio, se recomienda usar las etiquetas existentes correspondientes segun sea el caso.

El mejor curso de html que existe 😄

Usar demasiadas etiquetas <div> en un documento HTML, en lugar de utilizar las etiquetas semánticas apropiadas, puede llevar a varios inconvenientes:

1. Legibilidad del Código: Un documento lleno de etiquetas <div> puede ser difícil de leer y entender, especialmente cuando el código se vuelve más complejo. Las etiquetas semánticas como <header>, <footer>, <article>, y <section> proporcionan una idea clara de la estructura y el propósito de diferentes partes del contenido.

2. Accesibilidad: Las etiquetas semánticas son útiles para las tecnologías de asistencia, como los lectores de pantalla. Utilizar etiquetas específicas como <nav> para la navegación o <main> para el contenido principal ayuda a las tecnologías de asistencia a interpretar la estructura de la página. Si solo se usan etiquetas <div>, se puede perder esa claridad, lo que hace que el sitio sea menos accesible para usuarios con discapacidades.

3. SEO (Optimización de Motores de Búsqueda): Los motores de búsqueda pueden utilizar las etiquetas semánticas para entender mejor la estructura y el contenido de una página. Esto puede influir en cómo se indexa y clasifica tu página en los resultados de búsqueda. Usar solo <div> puede limitar la capacidad del motor de búsqueda para interpretar tu contenido correctamente.

4. Mantenimiento: El uso de etiquetas <div> en exceso puede hacer que el código sea más difícil de mantener y actualizar. Si necesitas hacer cambios en el futuro, puede ser complicado entender qué hace cada <div> y cómo se relacionan entre sí.

5. Estilo y Diseño: Las etiquetas semánticas ofrecen una forma más clara de aplicar estilos CSS a partes específicas de tu contenido. Usar solo <div> puede requerir clases y ID adicionales para aplicar estilos de manera adecuada, lo que puede complicar innecesariamente tu hoja de estilos.

6. Compatibilidad con Navegadores: Aunque esto es menos problemático en los navegadores modernos, algunas etiquetas semánticas pueden tener diferentes comportamientos predeterminados en diferentes navegadores. Si bien esto se puede gestionar con CSS, es algo adicional a tener en cuenta.

En resumen, aunque las etiquetas <div> ofrecen una gran flexibilidad y son útiles en muchas situaciones, el uso excesivo de ellas a expensas de las etiquetas semánticas apropiadas puede llevar a problemas de accesibilidad, SEO, mantenimiento, y legibilidad del código. Utilizar las etiquetas adecuadas para cada caso contribuye a un código más limpio, comprensible, y eficiente.

Es preferible usar las etiquetas adecuadas para cada parte del código. (Es mejor evitar <div> cuando no sea necesaria). Los beneficios de etiquetar semánticamente: 1) sitio web accesible; 2) posicionamiento SEO; 3) código claro y legible.

HTML Semántico: los motores de los navegadores leeran nuestro codigo por medio de HTML semántico, por eso cada elemento tiene que tener su propia etiqueta que lo defina correctamente, esto ayudara a nuestro sitio web a ser accecible, codigo mas claro, mejorara tu posicionamiento SEO y ayuda a buscadores (como google) a encontrar tu página.

HTML Semántico: los motores de los navegadores leeran nuestro codigo por medio de HTML semántico, por eso cada elemento tiene que tener su propia etiqueta que lo defina correctamente, esto ayudara a nuestro sitio web a ser accecible, codigo mas claro, mejorara tu posicionamiento SEO y ayuda a buscadores (como google) a encontrar tu página.

excelente explicación, gracias

Tamaño de la letra de manera semántica

<h1> Letra mas grande </h1>
<h2> Letra </h2>
<h3> Letra </h3>
<h4> Letra </h4>
<h5> Letra </h5>
<h6> Letra mas pequeña </h6>

Etiquetas de contenido

Encabezado:

<header> </header>

Navegador:

<nav> </nav>

Cuerpo:

<body> </body>

Sección:

<section> </section>

Articulo:

<article> </article>

Párrafo:

<p> </p>

Pie de pagina:

<footer> </footer>

Aside:

<aside> </aside>

Online editor

https://codepen.io/pen

Hay alguna diferencia entre colocar un elemento semántico como <nav> dentro de un elemento <div> o un <div> dentro de un <nav>?

En términos de SEO no hay una diferencia directa. Los motores de búsqueda como Google son capaces de interpretar la estructura del contenido y comprender el contexto de acuerdo con los elementos semánticos utilizados.

<nav>
	<div>
		Navegación
	</div>
</nav>

<div>
	<nav>
		Navegación
	</nav>
</div>

Los <div> pueden ser muy útiles para dar organización a la estructura del sitio web al utilizar estilos css.

🤗🤗

• HTML semántico se refiere a utilizar las etiquetas HTML de una manera que refleje correctamente la estructura y el significado del contenido de una página web. En lugar de simplemente utilizar etiquetas de presentación para definir el estilo visual de los elementos, el enfoque semántico busca utilizar etiquetas que describan el propósito y la función de cada elemento en el contenido.

• El uso de HTML semántico tiene varios beneficios:

• Accesibilidad: Al utilizar etiquetas apropiadas para el contenido, se mejora la accesibilidad de la página web para personas con discapacidades visuales o que utilizan tecnologías de asistencia. Los lectores de pantalla y otros dispositivos pueden interpretar correctamente la estructura y el significado del contenido.

• SEO (Optimización para motores de búsqueda): Los motores de búsqueda pueden comprender mejor el contenido de una página web cuando se utiliza HTML semántico. Al tener una estructura clara y etiquetas descriptivas, los motores de búsqueda pueden indexar el contenido de manera más precisa y relevante.

• Mantenibilidad: El uso de etiquetas semánticas facilita la comprensión del código por parte de los desarrolladores y mejora la legibilidad y mantenibilidad del sitio web a largo plazo. El código se vuelve más intuitivo y fácil de actualizar o modificar.

• Algunas etiquetas semánticas comunes en HTML incluyen:

• <header>: Representa la sección de encabezado de un documento o una sección.

• <nav>: Representa una sección de navegación.

• <main>: Representa el contenido principal de un documento.

• <article>: Representa un contenido independiente y autónomo que se puede reutilizar en diferentes contextos.

• <section>: Representa una sección temática de contenido.

• <aside>: Representa contenido relacionado o complementario al contenido principal.

• <footer>: Representa la sección de pie de página de un documento o una sección.

• Es importante tener en cuenta que el uso de HTML semántico no implica que los estilos visuales deban definirse en el HTML. Los estilos se deben gestionar en una hoja de estilos separada (CSS), mientras que el HTML se utiliza para describir la estructura y el significado del contenido.

La etiqueta div es una etiqueta general que no tiene un significado exacto. No es bueno utilizar mucho esta etiqueta porque los motores de búsqueda ignoran estas etiquetas, lo cual, provoca que el navegador no entienda cómo está estructurada tu página web y no muestre tu página en los resultados de búsqueda. Esto también puede ser ineficiente para los programadores porque si alguien más (o incluso tú mismo) lee el código HTML y ve que esta lleno de divs no sabrá exactamente a qué corresponde cada etiqueta.
.
Sin embargo, la etiqueta div puede ser muy útil para el diseño de la página. Por ejemplo, si tenemos un bloque de código en el que hay varias etiquetas distintas y queremos diseñar de cierto modo ese bloque, podemos meterlo dentro de un div y modificarlo con CSS.

Ahora se que solo fui un div en su vida 😦.

Actualmente estoy haciendo la ruta profesional de diseño UX/UI y creo que hacer estos cursos son excelente complemento. Espero aprender bien, siempre he pensado que es difícil, pero aquí vamos.

HTML semántico se refiere al uso de etiquetas HTML que transmiten el significado de la información contenida en ellas, no solo su presentación. Cada etiqueta HTML tiene un propósito semántico o significado que describe su contenido.

Por ejemplo, la etiqueta <p> indica un párrafo, <h1> a <h6> son utilizadas para encabezados, <table> para tablas, etc. Estas etiquetas transmiten información sobre el tipo de contenido que contienen.

El HTML semántico tiene muchas ventajas:

Accesibilidad: Las tecnologías asistivas como los lectores de pantalla pueden interpretar mejor la página y ayudar a los usuarios con discapacidades a entender el contenido.

SEO: Los motores de búsqueda también interpretan estas etiquetas para entender mejor el contenido de la página, lo que puede mejorar la clasificación de la página en los resultados de búsqueda.

Mantenibilidad: El uso de HTML semántico hace que el código sea más fácil de leer y mantener, ya que las etiquetas describen claramente su contenido.

Además de las etiquetas HTML básicas, HTML5 introdujo muchas nuevas etiquetas semánticas, como <header>, <footer>, <article>, <section>, <nav>, <aside>, y otras. Estas etiquetas proporcionan aún más información sobre el contenido de la página, lo que permite una mejor accesibilidad, SEO y mantenibilidad.

Desafío completado 🐱👩‍💻!

Cuando organizamos el contenido de nuestra página no se debe usar el <div> , porque cuando Google lee la página lo va a ignorar . Para evitar que lo ignore y reconozca que esta pagina tiene un menu de navegación debemos usar <nav>