Elementos semánticos = elementos con significado.
¿Qué son los elementos semánticos?
Un elemento semántico describe claramente su significado tanto para el navegador como para el desarrollador.
Ejemplos de no semántico elementos: <div> y <span> – No dice nada sobre su contenido.
Ejemplos de semántico elementos: <form>, <table>, y <article> – Define claramente su contenido.
Elementos semánticos en HTML
Muchos sitios web contienen código HTML como:
En HTML hay algunos elementos semánticos que se pueden usar para definir diferentes partes de una página web:
Elemento
HTML
los <section> elemento define una sección en un documento.
Según la documentación HTML del W3C: «Una sección es una agrupación temática de contenido, normalmente con un encabezado».
Ejemplos de donde un <section> El elemento se puede utilizar:
- Capítulos
- Introducción
- Artículos de noticias
- Información del contacto
Una página web normalmente se puede dividir en secciones para la introducción, el contenido y la información de contacto.
Ejemplo
Dos secciones en un documento:
WWF
El Fondo Mundial para la Naturaleza (WWF) es una organización internacional que trabaja en temas relacionados con la conservación, investigación y restauración del medio ambiente, anteriormente llamado Fondo Mundial para la Naturaleza. WWF se fundó en 1961.
Símbolo del panda de WWF
El Panda se ha convertido en el símbolo de WWF. El conocido logo panda de WWF se originó a partir de un panda llamado Chi Chi que fue transferido del Zoológico de Beijing al Zoológico de Londres en el mismo año del establecimiento de WWF.
Inténtalo tú mismo »
Elemento
HTML
los <article> elemento especifica contenido independiente y autónomo.
Un artículo debe tener sentido por sí solo y debe ser posible distribuirlo independientemente del resto del sitio web.
Ejemplos de donde el <article> El elemento se puede utilizar:
- Publicaciones del foro
- Publicaciones de blog
- Comentarios del usuario
- Tarjetas de productos
- Artículos del periódico
Ejemplo
Tres artículos con contenido autónomo e independiente:
Google Chrome
Google Chrome es un navegador web desarrollado por Google, lanzado en 2008. ¡Chrome es el navegador web más popular del mundo en la actualidad!
Mozilla Firefox
Mozilla Firefox es un navegador web de código abierto desarrollado por Mozilla. Firefox ha sido el segundo navegador web más popular desde enero de 2018.
Microsoft Edge
Microsoft Edge es un navegador web desarrollado por Microsoft, lanzado en 2015. Microsoft Edge reemplazó a Internet Explorer.
Inténtalo tú mismo »
Ejemplo 2
Use CSS para diseñar el elemento
.todos los navegadores {
margen: 0;
relleno: 5px;
color de fondo: gris claro;
}
.todos los navegadores> h1, .browser {
margen: 10px;
relleno: 5px;
}
.navegador {
fondo: blanco;
}
.browser> h2, p {
margen: 4px;
tamaño de fuente: 90%;
}
Navegadores más populares
Google Chrome
Google Chrome es un navegador web desarrollado por Google, lanzado en 2008. ¡Chrome es el navegador web más popular del mundo en la actualidad!
Mozilla Firefox
Mozilla Firefox es un navegador web de código abierto desarrollado por Mozilla. Firefox ha sido el segundo navegador web más popular desde enero de 2018.
Microsoft Edge
Microsoft Edge es un navegador web desarrollado por Microsoft, lanzado en 2015. Microsoft Edge reemplazó a Internet Explorer.