homefinance blog
La semántica HTML es más importante ahora que nunca, especialmente porque Google cambia los algoritmos de página constantemente. Los puntos principales en cada consulta se vuelven cada vez más competitivos. Necesitas un arma secreta, y el HTML semántico es bueno tener en tu arsenal. Puede usar un determinado código semántico en sus sitios, pero cuanto más pueda ingresar el contenido importante, mejores motores de búsqueda podrán acceder a su sitio y saber lo que ofrece a los posibles visitantes. ¿Qué es HTML semántico? En resumen, HTML semántico es HTML que las personas pueden leer y comprender. Cualquier hombre, no solo programadores y desarrolladores, y si las personas pueden leerlo más fácilmente y robots. Si los robots pueden leer la estructura de su sitio más fácilmente, entonces pueden tomar una decisión más informada sobre el grado en que su sitio admite varias consultas de búsqueda.
Básicamente, dígale a los rastreadores del motor de búsqueda “Esta es una publicación de blog” o “Este es un menú de navegación” o “Hola, este es solo el sótano, por lo que no me hace daño por contenido duplicado, por favor”. Pero, ¿cómo se hace eso? Bueno, use una serie de etiquetas HTML5 especiales que son muy específicas. Investigamos algunos ejemplos y puede verse a sí mismo. Formateo del texto El formato del texto es el HTML semántico más común y lo ves todos los días. En el pasado, se usaron letras simples para indicar el formato, que representa en negrita, italiana, subrayada, etc.
Este es texto en negrita
mientras esto es cursiva , y esto está subrayado .
Con HTML semántico, use el texto fuerte para la audacia y muestre su importancia fuerte o Em para cursiva (o subrayar) el texto. Interesante es que todavía se usa para enfatizar el texto; Sin embargo, MDN sugiere su estilización a través de CSS con decoración de texto: subrayado; Para diferenciarlo.
Este es texto en negrita , mientras que esto es cursiva . 222000 ondulante; “> subrayado .
También nos gusta mostrar el texto del corte eliminado.
Tenemos el fondo también de del para mostrar strikethrough texto eliminado.
Y pensamos que terminaríamos el formato del texto semántico HTML con un clímax. Literalmente. Si usa la marca alrededor del texto, resaltará lo que haya incluido.
Pero debe recordar esta información sobre cómo usarla en contexto .
Si haces eso, estarás bien.
MDN dice que esto no debe usarse de la misma manera que usa con fuerza. Use fuertemente para indicar algo importante en el texto y use la marca para resaltar algo que sea relevante para su comprensión.
Las secciones, encabezados y menús pueden ser la mejor manera de comenzar es usar la sede y los sótanos. Ya sabes, las partes favoritas de todos los sitios web para construir y administrar. Con HTML tradicional, es posible que tenga un encabezado codificado de la siguiente manera:
El título de la página va aquí
lema!
enlace de la página de inicio
enlace de página de blog
enlace de página de podcast
Mirando este código, puede ver qué es todo. Sin embargo, esto es solo si sabes lo que miras. Tienes algunos vestidos (contenedores) que separan el título, el eslogan y el menú (increíblemente simple). No hay nada de malo en esta configuración, pero ciertamente no hay nada realmente correcto. Si da un paso más, puede usar el código CSS y marcar la clase para mantener las cosas un poco más legibles.
El título de la página va aquí
lema!
enlace de la página de inicio
enlace de página de blog
enlace de página de podcast
Con HTML semántico, las cosas se ven mucho más limpias y más fáciles de leer, no tiene que confiar en Divs, y las clases e IDS que elige solo pueden ser por estilo.
El título de la página va aquí
lema!
enlace de la página de inicio
enlace de la página de inicio
Enlace de la página de inicio
¿No es mucho más fácil leer y decir qué está pasando? Tiene una etiqueta de encabezado que le permite saber que este es el encabezado de la página y una etiqueta de NAV que indica un menú de navegación. (Incluso es lo suficientemente inteligente como para no necesitar un estilo adicional para enumerar entradas horizontales).
Desde un punto de vista técnico, puede usar el siguiente código, si desea asegurarse de que sus estilos se hayan aplicado correctamente, así como tener una forma de conectarse a una determinada sección del sitio web. En este caso, la etiqueta de la sección funciona de manera similar a cómo funciona la etiqueta DIT en ejemplos anteriores. Excepto, por supuesto, es legible y tiene sentido para los ojos humanos.
El título de la página va aquí
lema!
enlace de la página de inicio
enlace de la página de inicio
enlace de la página de inicio
Además, recuerde el uso de id = “Sección de héroe”, que es un paso opcional para el paso opcional, pero puede estilizar la sección como selector CSS.
conclusiones
Use la sección en lugares donde podría sentirse tentado a usar un DIV.
Uso puede usar el encabezado para indicar qué parte de la página es su encabezado. También puede usarlo en un artículo o publicación para indicar el encabezado de publicación, que está separado del sitio web.
Use NAV al configurar un menú de navegación principal para el sitio. La navegación no es una forma en que los motores de búsqueda encuentran enlaces, pero encontrar la forma principal en que los usuarios pueden navegar en su sitio cualquier colección de enlaces (como Pesmet, etc.) también puede incluirse en Navsubsol no tiene que decir mucho. sobre el sótano, pero debemos mencionar esto. En muchos sentidos, es un análogo directo en el encabezado. Un sótano de base tradicional podría verse así:
Diseño de <a href="elegantthemes.com temas elegantes
contáctenos!
Mientras que un sótano semántico puede verse así:
Por supuesto, no hay una gran diferencia aquí en la configuración básica, pero los robots que ven su sitio apreciarán la aclaración. También tenga en cuenta que puede usar el sótano para páginas, publicaciones o sótanos para el sitio.
Principalmente, los artículos y fuera de otro componente principal del HTML semántico es la etiqueta del artículo. Además, y aparte. Ambos le permiten estructurar el contenido real de su sitio para que los motores de búsqueda sepan cuál es el texto principal, lo que les permite, a su vez, concentrarse en el problema que resuelve y en el tema que se enfoca. Normalmente, una publicación de publicación o blog es un documento HTML simple, pero el encabezado, el sótano, el contenido, las barras laterales, las inserciones, etc. se puede combinar.
Artículo de título
Párrafo 1
párrafo 2
párrafo 3
Bloque de texto
Ahora, este no es un código bastante bueno, pero funciona. Sin embargo, no es hermoso y requiere una cantidad bastante decente de CSS para que parezca casi legible cuando se juegue. Usando los artículos principales y, aparte, puede estructurar fácilmente la página para que sea más fácil de leer.
Artículo de título
Párrafo 1
párrafo 2
párrafo 3
Bloque de texto
Sin embargo, debe tener en cuenta que puede indicar el contenido principal de la página solo una vez. Lo que significa que puede usar una sola página principal. Puede agregar más artículos en una sola página principal para indicar un contenido o director de contenido independiente (puede usar aún más etiquetas H1 para mostrar motores de búsqueda que son independientes. Concluye una sola etiqueta principal en la página
Se pueden usar más etiquetas de elementos en la página para identificar contenido independiente e independiente (incluido múltiples H1 por página)
Aparte se puede usar como barra lateral o insertar en una publicación o página
Otros elementos menos utilizados, por supuesto, los elementos y las etiquetas que discutimos anteriormente son las partes más utilizadas del HTML semántico. Después de todo, casi todos los sitios en Internet contienen una combinación de ellos, mientras que el resto de las etiquetas semánticas aceptadas son más específicas y limitadas. Sin embargo, no son menos útiles cuando cumplen su objetivo y ayudan enormemente en la interacción e indexación. Detalles y resumen Los detalles y los elementos de resumen crean una capa de contenido de expansión que puede ocultarse a los usuarios, a menos que lo active específicamente (como un módulo de acordeón en div u otras páginas).
Contenido que estará oculto
enlace que estará oculto
Cualquier hijo del resumen estará oculto y extensible y puede agregar texto adicional cerrando el elemento de detalles. La figura y la tensión de la figura son bastante autoexplicitas. La figura es una especie de ayuda visual en su publicación puede fotografiar gráficamente, un video construido en YouTube. Fig -Caption, por lo tanto, es la leyenda que agrega para explicar el uso de la figura anterior. Aunque son técnicos para el uso de la semántica, puede usar esto para cualquier contenido que desee especificar, especialmente como ayuda para publicar o la página principal.
Estas etiquetas son una excelente manera de presentar un fragmento en Google, por ejemplo, porque usted indica específicamente la solución o la explicación de un problema. Le recomendamos que los use, porque no solo reduce el código que usa para agregar una leyenda y estilizarlo, sino que también mantiene la figura y el subtítulo como un solo elemento de la página, no como uno separado. El tiempo de tiempo es una de las etiquetas que rara vez se usa, pero cuando tiene un evento especial u ocasión, necesita específicamente que el motor de búsqueda sepa que hay una hora o una fecha involucrada, use esto en lugar de usar en negrita o acentuar el texto.
Título
El evento comenzará en 25 de diciembre y durará 12 y media>.
.