¿Por qué deberíamos usar etiquetas como p, span, hx cuando podemos usar CSS en su lugar?

¿Por qué deberíamos usar etiquetas como p, span, hx cuando podemos usar CSS en su lugar? ¿Es importante desde el punto de vista de SEO?

La versión corta es que las diferentes etiquetas y CSS tienen diferentes propósitos.

<h1>Whatever</h1>, por ejemplo, tiene una cierta cantidad de significado junto con su uso: "Este es un encabezado, uno importante de primer nivel", etc. Algunos analizadores también usan las etiquetas hx (y otras) para crear un esquema de la estructura del documento que se puede usar para cualquier cosa, desde el procesamiento de datos hasta la accesibilidad (por ejemplo, los lectores de pantalla saltan a la siguiente pregunta en la página de inicio de los webmasters pasando a la siguiente h3) .

No puede descartar las etiquetas semánticas en función de lo que puede hacer con CSS, y viceversa.
Puede aplicar CSS a otra etiqueta para que se vea igual que el h1, por ejemplo: <span style="font-weight:bold;font-size:2em">Whatever</span>pero eso aún no hace que la etiqueta span sea un encabezado real en términos de función y semántica. En este caso, ese esquema que he vinculado anteriormente sería prácticamente imposible porque esos tramos no son encabezados, sino solo un texto que arbitrariamente hizo grande y en negrita.

El marcado y la presentación son diferentes.

Esto es un poco como preguntar "¿por qué deberíamos tener paredes cuando tenemos pintura?" :)

Las etiquetas HTML indican cuál es su contenido : este es un titular, esta es una lista, etc.

CSS denota el aspecto que debería tener su contenido : los encabezados deben ser azules, las listas deben tener sangría tanto, el menú debe estar a la izquierda, etc.

Javsascript le dice cómo debe comportarse su página : animaciones, etc.

Entonces, sin contenido HTML, CSS y Javascript realmente no tienen nada en qué trabajar.

Estas categorías no son 100% en blanco y negro, por ejemplo, CSS puede especificar "transiciones" ahora, que son animaciones, pero son la idea básica.

Consulte las discusiones anteriores sobre este tema en StackOverflow aquí y aquí .

Un buen marcado ahorra mucho esfuerzo y funciona mejor

Si desea que algo se comporte como un enlace, puede usar <span class="mylink">y usar un montón de CSS y JS para que se vea y se sienta bien. O simplemente puede usar un <a>elemento y obtener todo eso de forma gratuita, sin necesidad de descargar ningún código adicional, porque los navegadores ya saben qué hacer y tienen la lógica implementada en un código rápido y nativo. Además , es mucho más probable que funcione correctamente para lectores de pantalla, navegadores móviles, motores de búsqueda, agregadores y otros casos de uso en los que no pensó.

Esta es también la razón por la que debe usar un <button>para hacer clic en acciones, un <label>para etiquetar un <input>, y un <main>para la sección principal de su página.

Qué tan bueno es el marcado en el SEO

Básicamente, el SEO consiste en convencer a los motores de búsqueda de que su contenido es la mejor coincidencia para un término de búsqueda. Obviamente, nadie en Google lee personalmente cada página web y la clasifica.

Por lo tanto, para que los motores de búsqueda sepan cuál es su contenido, un programa debe analizarlo.

Y oye, mira! ¡Tenemos todo este lenguaje llamado HTML destinado a etiquetar su contenido de una manera que las máquinas puedan entender! :)

Entonces, sí, un marcado claro ayudará a los motores de búsqueda a indexar mejor sus páginas.

Para usar un ejemplo extremo, si el titular de su página fuera en realidad una fotografía que tomó de un titular de periódico, podría parecer interesante, y la gente podría leerlo bien, pero para un motor de búsqueda, sería una imagen sin significado . Mientras que <h1>Turtle Groomer 5000</h1>claramente le dice a los motores de búsqueda que tiene un producto que facilita la higiene testinal.

Piense también en las personas con algún tipo de discapacidad que (como ejemplo) tienen que usar un lector de braille. En tales casos, las etiquetas html son mucho más importantes que los estilos visuales CSS.

Su respondió la porción semántica. Con respecto al SEO, encontrará que los motores de búsqueda le dan más peso al elemento h1 que a otras etiquetas. Las etiquetas h2 / b / strong tienen un poco más de peso que el texto normal.

La mayoría de las otras etiquetas son más o menos iguales, pero siempre debe usar la etiqueta más adecuada para el trabajo. Google ha comenzado recientemente a analizar tablas cuando se usa para datos tabulares, y otro HTML utilizado adecuadamente puede dar señales de qué contenido es más importante que otros.

Para HTML5, consulte negrita y cursiva en HTML5 .

Resumen:

Úselo <b>cuando desee que el texto tenga un estilo diferente sin importancia contextual, pero úselo <strong>cuando desee que el texto tenga una importancia adicional desde una perspectiva de contenido o SEO.

Use <i>para compensar el estado de ánimo del texto, pero use <em>para enfatizar el texto.

Además: no olvide la importancia de la semántica para los usuarios con discapacidad. El software del lector de pantalla depende de esta semántica para presentar a las personas ciegas el contexto requerido que se están perdiendo debido a su discapacidad.

En primer lugar, <hx>es una etiqueta bastante importante, ya que define los títulos, como han mencionado otros. Los encabezados son muy útiles no solo para las apariencias, sino porque separan las secciones de una manera que un imitador no puede. Solo eche un vistazo a Wikipedia, por ejemplo. Algunos programas dependen de este tipo de etiquetas para "separar" documentos o incluso crear una tabla de contenido automática. Un motor de búsqueda presumiría que el texto dentro de una <h1>etiqueta sería más importante ya que es un título, un título.

A continuación, si bien las hojas de estilo son excelentes, algunos dispositivos ignorarán las hojas de estilo y se centrarán solo en el HTML, que es donde una etiqueta como <em>es útil. Si las hojas de estilo se deshabilitaron o hubo un problema al cargarlo (por ejemplo, problemas de conexión a Internet), el texto aún aparece formateado. <em>También podría decirse que se supone que hay un énfasis en la palabra, mientras que las cursivas por sí solas pueden ser cualquier cosa, desde el título de una película hasta hacer que el título de una imagen difiera del texto normal. Esto puede ser utilizado por aquellos que usan herramientas de discapacidad, que de otra manera no logran captar el énfasis en general.

<span>, por otro lado, es en gran medida una versión en línea de la <div>etiqueta y, en todo caso, puede evitar que tenga que escribir una clase adicional (dicho esto, ¿realmente querría usar en <span class="italic">lugar de <i>para cada instancia en cursiva?) ¿Tiene? Hace que el código sea más difícil de leer, menos estandarizado (bajo el supuesto general de que la mayoría de las personas usaría el último sobre el primero), y de ninguna manera mejora el documento.

<p>También es útil para las personas con discapacidad, ya que garantiza que el texto se puede dividir en párrafos manejables de una manera que <br />no se puede.

Claro, podemos decir que HTML no fue diseñado para el estilo, pero hay una línea delicada entre diseño y estilo; y francamente, yo diría que consideres que eso es preferencia del usuario. Ya sea que use <i>o <span class="italic">, depende de usted, y no hará una diferencia para el SEO. Después de todo, ¿por qué limitarnos a una sola forma de hacer las cosas? (como cómo podríamos elegir si usar o no los puntos y comas en los extremos de las líneas en JavaScript: siempre los uso, mientras que otros nunca los usan, y no hace ninguna diferencia para la funcionalidad).