Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

¿Qué es HTML semántico?

5/23
Recursos

Aportes 85

Preguntas 15

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

¿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

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.

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.

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.

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.

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 🇨🇱 ✌️

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

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

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

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:

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).

La importancia de usar las etiquetas correspondientes.

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

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…

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.

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

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

¡¡Genial!! La estructura básica.

Resumen de la clase:

HTML semántico = atacar a la etiqueta DV

En mi experiencia los divs no se dejarán de usar ya que el modelo de caja necesita, mas que un header para poder funcionar

¿Qué es HTML semántico?

Palabras clave:

Etiquetas: parte del HTML donde damos a entender que estructura queremos poner.

Semántico: hace referencia a significado.

HTML semántico: hace referencia a escribir etiquetas HTML que vaya acorde a lo que estamos escribiendo.

Apuntes de la Maestra:

Etiquetas con un significado.

-Ayuda a tu sitio a ser accesible.

-Mejora a tu posicionamiento SEO.

-Código más claro.

Leer sobre todas las etiquetas de HTML en:

https://htmlreference.io/

Apuntes míos:

Lo que nos quiere decir escribir de manera semántica es que no tiene sentido usar un montón de div, si ya tenemos etiquetas que cumplen esa función en específico, ejemplo es que para la parte de hasta abajo donde generalmente va información de la página, podríamos poner un div y ya, pero se entiende mejor usar un footer, que es una etiqueta específica para esa función y hace que el usuario y el navegador lo puedan entender mejor.

Notas 📒

✏️ HTML semántico

Se trata de ocupar las etiquetas adecuadas para cada parte de una página. Por ejemplo si vas hacer un menú de navegación ocupar la etiqueta <nav> o para el pie de página ocupar <footer> y no un <div> .

Hacer esto ayuda a:

  • Tener un sitio accesible
  • Mejorar el SEO
  • Tener un código más claro

💡 La etiqueta div es utilizada (desde mi punto de vista) como una etiqueta auxiliar que te ayuda a aplicar estilos al contenido.

.

gracias por el aporte

Mis apuntes


Gracias por el aporte

Ademas, hay otra ventaja de no usar solo divs

Algunas etiquetas tienen intrinsicamente propiedades que hacen parte de la etiqueta, solo usando div te pierdes de esas propiedades.
.
Por ejemplo.
.
La etiqueta <p> hace un salto de linea automatico.
Si usas div eso no pasa, debes hacer el salto de linea usando otra etiqueta lo que a la larga se transforma en más lineas que ensucian el codigo

Podriamos concretar esta clase en la idea de:
.
No uses div para estructurar el contenido de tu pagina.
Usalo para otras cosas como crear dos espacios uno al lado de otro, pero no para estructurar el contenido

Creo que ya entiendo.

DIv crea una caja vacia que no tiene ningun contexto para que luego otros desarrolladores vengan a ver nuestro codigo ni para el navegador que lo interpreta.

<br>

Aunque podemos usar el div para todo esto, no es la mejor practica

<br>

Así como es una buena practica en programacion hacer codigo autodesriptivo (Los que vieron el curso de programacion basica ya lo asben) es también una buena practicar en HTML usar la equiqueta correspondiente para cada cosa que quieres hacer

Increible lo que es el HTML semántico, hasta ahora yo era de los que abusaba de los divs, empezaré a darle un mejor sentido a las páginas que desarrollo.

Resumen en Notion
https://acortar.link/dFsHtH

Las bases, lo principal, a aprender de lo mejor.

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.

Conclusión:
HTML tiene etiquetas asignadas de acuerdo a cada uno de sus comportamientos o funciones con las que deba cumplir, por eso es muy importante conocer cada una de estas etiquetas que nos ofrece HTML, para que a la hora de estructurar o diseñar nuestro proyecto, el navegador entienda el flujo de nuestra página, y pueda tener una lectura o pueda hacer un recorrido a través de nuestra nuestro código más fluido y pueda entender la función que tiene cada una de estas etiquetas.

Buena introduccion

súper esta sección me encantó ver todo bien definido

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>

Si quieres que tu página aparezca en los primeros lugares al momento de buscar algo referente a tu sector en los buscadores, debes sí o sí implementar HTML semántico. Platzi cuenta con un curso e Introducción a SEO que en verdad es de lo más sencillo para empezar en este tema

div es un comodin

Muy buena clase

profa grabeme unos cuentos con su voz para escuchar antes de irme a dormir, que bonita voz :'3

Notes:

  • Una etiqueta muy usada en HTML es <div> pero a su vez no tiene ningun peso verdadero a nivel semantico en una pagina
  • El HTML semantico indica que debemos usar etiquetas apropiadas segun el contenido que queramos estructurar
  • El HTML semantico nos sirve para accesibilidad y posicionamiento SEO
  • Podemos usar <div> para ayudarnos a organizar como mostraremos cierta informacion en nuesta pagina, sin embargo no deberiamos usarlo para estructurar completamente nuestras paginas.

Felicitaciones a la profe despues de 15 años haciendo paginas me acaban de dar una catedra

el polivalente div

La importancia del HTML semántico es vital para la publicación{on de nuestro sitio web, en la industria es un arma de dos filos para quienes no lo usan, puede estar muy bonita la p{agina, pero google no sabe que queremos transmitir

<DIV>

Es una mala práctica usarlo para todo.

El elemento <div>es una etiqueta comodin, nos puede ayudar a darle estructura a nuestro documento HTML para aplicarle estilos, debe usarse solo si no encontramos una etiqueta que describa semánticamente la parte de nuestro HTML que estamos maquetando.

Genial 😄

HTML semantico es el uso de aquellas etiquetas representativas a cada una de las secciones del sitio web, para que puedan ser reconocidas por Google principalmente

Siempre se me hace más fácil colocarle “div” a todo y acabo de darme cuenta de todo lo que estoy perdiendo con eso. Graaaciaas ♥

Me parece súper interesante el manejo de terminal que tiene Estefany, en lo que aprendes de frontend te llevas de ñapa el manejo de terminal con este curso

Creo que la etiqueta Aside también es importante

Qué importante es crear un código semántico, pienso que para llegar a ser un excelente developer esto es primordial💚

Ventajas de usar HTML semantico:

  • Mejora la accesibilidad
    Pues las herramientas para que las personas de poca o nula vision puedan usar la web utilizan las etiquetas para saber donde se encuentran.
  • mejora el posicionamiento SEO
    Pues los buscadores bonifican a los sitios donde se utiliza el concepto de HTML semantico y penaliza a los sitios donde no se usan
  • Nos permite tener un código mucho más claro, ligero y fácil de leer.
    Pues al tener cada seccion con su respecitiva etiqueta facilida el desarrollo y mantenimiento

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>

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.

excelente clase

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>