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


43

¿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?


2
Veo cómo podría usar CSS con etiquetas span o p para pretender ser etiquetas hx, pero ¿cómo usaría CSS para diseñar texto sin siquiera etiquetas p o span?
Joshuahedlund

Una respuesta medio sarcástica y medio seria es: intente prescindir de ellos. Úselo <span>para todo y vea si puede lograr lo que quiere con CSS solo. Probablemente aprenderá mucho al tratar de apuntar a los tramos correctos y hacer que se comporten como otros elementos. (Aunque la lección más probable es "no hagas eso")
Nathan Long

Respuestas:


67

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.


41

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.


2
"¿Por qué deberíamos tener paredes cuando tenemos pintura?" ~ Esa es una pregunta maravillosa? ¡Gracias!
Evik James

Creo que los nombres de las etiquetas son la parte confusa del marcado: H1, H2, etc. pueden ser utilizados por los lectores de pantalla, así como por las personas que lo ven. Una vez dicho esto, el 99% del mundo verá una página y, por lo tanto, tanto como molesta a los amantes del SEO, las etiquetas H son marcadores visuales, al igual que <b>significan negrita una vez.
Chris S

@ChrisS - No creo que sea confuso. Las etiquetas siempre deben ser leídas por máquinas; eso incluye navegadores tanto como lectores de pantalla. Y no, an <h1>no es un marcador visual, realmente. La mayoría de los navegadores lo mostrarán grande y en negrita si no se les dice lo contrario, pero los estilos de la página, o las propias preferencias del usuario, podrían anular eso. <h1>es un indicador de significado: "este es mi título principal". Si el sitio o el usuario quiere que los titulares principales sean pequeños y anaranjados, eso es lo que verán.
Nathan Long

1
"al igual que <b> significaba negrita una vez": ¿alguien cambió el significado de <b>sin decirme? Es todavía significa negrita no es cierto? Por supuesto, prefiero las etiquetas semánticas <em>y <strong>...
ghoppe

13

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.


10

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.


Esto es interesante. ¿Tienes una fuente para esto?
user606723

3
@ user606723 qué parte? El primer párrafo es conocimiento básico de SEO, y se menciona en la propia guía de SEO de Google (PDF). No sé si lo de las tablas está documentado en alguna parte, pero lo he visto varias veces en los resultados de búsqueda: enumeran 2-4 filas de una tabla en la página de destino.
DisgruntledGoat

1
Actualización: aquí hay una publicación que menciona tablas en SERPs: googlesystem.blogspot.com/2011/11/…
DisgruntledGoat

1

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.


3
No. <b> y <i> están en desuso. Si desea que su texto se vea en negrita / cursiva, use CSS. Si desea transmitir el significado del texto en negrita / cursiva, use <strong> y <em>.
Mircea Chirea

44
@iconiK ¿En desuso por quién? También entendí que estaba "en desuso" en el estándar HTML5. Y por una buena razón, hay muchos usos tradicionales de cursiva además del énfasis [por ejemplo, títulos de libros o palabras extranjeras], tener una etiqueta para "cursiva" explícitamente [en lugar de una etiqueta semántica] no es diferente de poner directamente en mayúsculas y puntuación. Si quieres usar <span class="proper-name"> <span class="question-sentence">, sin embargo ...
Random832

1
está en desuso porque HTML no debe definir ningún formato de presentación. Esa es la razón por la que escribimos CSS en archivos CSS (y no en línea) por lo que tenemos estilos distintos para humanos, impresora, lector de pantalla, lector móvil, ect libro electrónico, lector de Safari, etc.
SOD

3
@sod No estaba preguntando por qué está en desuso, estaba cuestionando la afirmación de que está en desuso en absoluto. Y no está claro por qué la cursiva es más "formato de presentación" que las letras mayúsculas y la puntuación. Es parte del contenido.
Random832

2
@iconiK, "prácticamente en desuso" no tiene relación con la declaración de si algo está en desuso o no. Teniendo en cuenta que se proporcionan en la especificación HTML5 y de ninguna manera aparece como obsoletos , me <strong> Estado Ly que son no obsoleta.
zzzzBov

1

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.


1

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.