No necesita usar etiquetas div cada vez. Utilice estas etiquetas HTML semánticas para que su sitio sea más estructurado y accesible.
Antes de la introducción del HTML semántico, los desarrolladores usaban divs para organizar el contenido. Los elementos div no tienen significado por sí mismos. Solo proporcionan una forma de aplicar estilos y organizar el contenido.
La palabra semántica significa relacionado con el significado. Los elementos HTML semánticos describen el propósito de su contenido. Proporcionan significado para el desarrollador, el usuario, los motores de búsqueda y las tecnologías de asistencia. Aquí hay una lista de etiquetas HTML semánticas populares que puede usar en su próximo proyecto.
¿Qué son las divisiones?
En HTML, el elemento div (división) es un contenedor a nivel de bloque. Utiliza un div para agrupar o dividir elementos HTML en secciones en una página web. La sintaxis es como se muestra a continuación:
<división>
división>
Beneficios de usar elementos HTML semánticos sobre divisiones
HTML5 introdujo elementos HTML semánticos para facilitar la lectura del código. Los elementos semánticos proporcionan significado y estructura al contenido web.
Hacen que su código sea comprensible para otros desarrolladores. También facilitan que los motores de búsqueda encuentren su contenido y dirijan el tráfico a su sitio. Aquí hay algunos elementos semánticos que puede usar en su Proyectos HTML y CSS.
1.
El etiqueta define la sección de encabezado en un documento. Por lo general, contiene el logotipo del sitio, la navegación y el título de la página. Es la sección que aparece en la parte superior de una página web. Puede personalizar el encabezado según sus necesidades. La sintaxis es la siguiente:
<cuerpo><encabezamiento>
<h1> ¡Hola!h1>
<pag>soy un encabezadopag>
encabezamiento>
cuerpo>
2.
El La etiqueta contiene los enlaces de navegación para el sitio web. Estos pueden ser menús, tablas de contenido o índices. Por lo general, se coloca dentro de la etiqueta. La sintaxis es la siguiente:
<encabezamiento><navegación>
<ul>
<li>Los enlaces de mi sitio webli>
<li><ahref="#"> Hogara>li>
<li ><ahref="#"> Sobre nosotros a>li>
ul>
navegación>
<h1>Lo anterior es parte de la navegación de mi sitio web.h1>
encabezamiento>
En el navegador se verá así:
Puede utilizar modelos de diseño CSS como Caja flexible de CSS para alinear el
3.
El La etiqueta contiene el contenido principal de la página web. Separa el contenido del encabezado, la barra lateral y el pie de página. El principal representa el contenido dominante de la sección.
<cuerpo><encabezamiento>
<título> Datos del sitio web título>
encabezamiento>
<principal>
<pag> Este sitio web es una breve demostración de cómo funciona la etiqueta principal.pag>
<pag> Encierra la parte del sitio web con contenido útil.pag>
principal>
<pie de página>
<h3> Este es un pie de página h3>
pie de página>
cuerpo>
Aparece así:
4.
Utilizar el etiqueta para definir secciones independientes en un documento o sitio web. Por ejemplo, puede usarlos para estructurar publicaciones de blog, revistas o tarjetas de productos. El El elemento puede incluir otros elementos, incluidos otros artículos, secciones y encabezados. Los elementos adjuntos deben estar relacionados con el tema del artículo.
<artículo>
<h1>Más extraño que la ficciónh1><artículo>
<h3>Introducciónh3>
<pag>Los hechos y personajes narrados en este libro son ficticios.pag>
artículo>
<artículo>
<h3>Capítulo unoh3>
<pag> El día era brillante y el sol sonreía desde el cielo.pag>
artículo>
artículo>
Aparece así:
5.
El La etiqueta contiene el contenido relacionado con el contenido principal. Use esta etiqueta para crear barras laterales para citas, comentarios o agradecimientos. destaca información que el lector podría perderse. Se destaca del resto del contenido.
html><html>
<estilo>
cuerpo{
color de fondo:#abdbe3;
}
aparte {
ancho: 30%;
relleno izquierdo: 0,5 rem;
margen izquierdo: 1rem;
flexión: izquierda;
box-shadow: recuadro 5px 0 5px -5px verde;
estilo de fuente: cursiva;
color rojo;
}
aparte > pag {
margen: 0,5 rem;
estilo>
<cuerpo>
<principal>
<h1> pájaros tejedoresh1>
<pag>Ploceidae es una familia de pequeñas aves paseriformes. Muchos de los cuales se llaman tejedores, pájaros tejedores, pinzones tejedores y obispos.pag>
<aparte>
<pag>Reino Animal
Filo: Chordatapag>aparte>
<pag>En las clasificaciones más recientes, Ploceidae es un clado, excluye algunas aves que históricamente se han colocado en la familia. Algunos de los gorriones, pero incluye la subfamilia monotípica Amblyospizinae.pag>
principal>
cuerpo>
html>
6.
El El elemento contiene una parte de la página sin ningún elemento semántico específico. Las secciones pueden tener un encabezado para presentar el contenido y encerrar otros elementos HTML. representa los componentes de una página web como los capítulos de un libro o blog.
html><html>
<cuerpo>
<h1>La bibliah1>
<sección>
<h2>Introducciónh2>
<pag>La Biblia es una colección de escrituras religiosas sagradas en el cristianismo, judaísmo, samaritanismo. La Biblia es una antología. – una compilación de textos de una variedad de formas – escrito originalmente en hebreo, arameo y griego koiné.pag>
sección>
<sección>
<h2>Capítulo uno: Génesish2>
<pag>El Libro del Génesis es el primer libro de la Biblia hebrea y del Antiguo Testamento cristiano. Su nombre hebreo es el mismo que su primera palabra, Bereshit. Génesis es un relato de la creación del mundo, la historia temprana de la humanidad y de los antepasados de Israel y los orígenes del pueblo judío.pag>
sección>cuerpo>
html>
Aparece así:
7.
El El elemento encierra ilustraciones independientes como imágenes o diagramas. Estas ilustraciones hacen referencia al contenido de la página principal. Las figuras vienen con leyendas especificadas por el elemento. El explica de qué se trata la imagen. El
html><html>
<cuerpo>
<principal>
<sección>
<h1>partes de una computadorah1>
<pag> Hay varias partes que trabajan juntas para formar una computadora.pag>
<cifra>
<imagenorigen="alguna-url.jpg"alternativa="ratón de computadora">
<figcaption>Este es un mouse de computadorafigcaption>
cifra>
sección>
principal>
cuerpo>
html>
Puedes ir más allá y aprender cómo crear imágenes receptivas en HTML.
El El elemento HTML encierra información en la parte inferior de la página web. es lo opuesto a la elemento. El puede contener información sobre el titular de la página. Esto incluye datos de derechos de autor o enlaces a información adicional del sitio.
html><html>
<cuerpo>
<principal>
<sección>
<h1>partes de una computadorah1>
<cifra>
<imagenorigen="alguna-url.jpg"alternativa="ratón de computadora">
<figcaption>Este es un mouse de computadorafigcaption>
cifra>
sección>
principal>
<pie de página>
<pag> Fabricado por Computer Tech © 2023pag>
pie de página>
cuerpo>
html>
El código anterior agrega un pie de página al partes de una computadora página como se muestra en la siguiente imagen.
¿Por qué usar elementos HTML semánticos?
El uso de elementos HTML semánticos da contexto al código. Cualquiera que mirara el código podría entenderlo fácilmente. Las etiquetas facilitan el diseño de elementos y la colaboración en proyectos.
Puede usar HTML semántico con bibliotecas y marcos frontend. La mayoría de los navegadores web modernos prefieren los elementos HTML semánticos a los elementos tradicionales. Comience a usar HTML semántico y observe cómo su código se ve moderno, legible y presentable.