Perché dovremmo usare tag come p, span, tag hx quando invece possiamo usare CSS?

Perché dovremmo usare tag come p, span, tag hx quando invece possiamo usare CSS? È importante dal punto di vista SEO?

La versione breve è che i vari tag e CSS hanno scopi diversi.

<h1>Whatever</h1>, per esempio, ha un certo significato insieme al suo uso: "Questa è un'intestazione, una importante di primo livello" e così via. Alcuni parser usano anche i tag hx (e altri) per creare uno schema della struttura del documento che può essere utilizzato per qualsiasi cosa, dall'elaborazione dei dati all'accessibilità (ad es. I lettori di schermo che passano alla domanda successiva nella homepage dei webmaster saltando alla prossima h3) .

Non puoi ignorare i tag semantici in base a ciò che puoi fare con i CSS e viceversa.
È possibile applicare i CSS per un altro tag per farlo sembrare uguale alla h1, ad esempio: <span style="font-weight:bold;font-size:2em">Whatever</span>ma che ancora non fa che tag span un vero e proprio colpo di testa in termini di funzione e la semantica. In questo caso, quel contorno che ho collegato sopra sarebbe praticamente impossibile perché quelle span non sono intestazioni, ma solo un testo che hai arbitrariamente reso grande e grassetto.

Il markup e la presentazione sono diversi

È un po 'come chiedere "perché dovremmo avere dei muri quando abbiamo la vernice?" :)

I tag HTML indicano qual è il tuo contenuto : questo è un titolo, questo è un elenco, ecc.

Il CSS indica l'aspetto del tuo contenuto : i titoli dovrebbero essere blu, gli elenchi dovrebbero essere rientrati così tanto, il menu dovrebbe essere a sinistra, ecc.

Javsascript spiega come dovrebbe comportarsi la tua pagina - animazioni, ecc.

Quindi, senza contenuto HTML, CSS e Javascript non hanno davvero nulla su cui lavorare.

Queste categorie non sono al 100% in bianco e nero - ad esempio, i CSS possono ora specificare "transizioni", che sono animazioni - ma sono l'idea di base.

Si prega di consultare le discussioni precedenti su questo argomento su StackOverflow qui e qui .

Un buon markup consente di risparmiare un sacco di sforzi e funziona meglio

Se vuoi che qualcosa si comporti come un link, puoi usare <span class="mylink">e usare un sacco di CSS e JS per farlo apparire e sentire bene. Oppure puoi semplicemente usare un <a>elemento e ottenere tutto ciò gratuitamente, senza alcun codice aggiuntivo da scaricare, perché i browser sanno già cosa fare e hanno la logica implementata in un codice nativo veloce. Inoltre è molto più probabile che funzioni correttamente per screen reader, browser mobili, motori di ricerca, aggregatori e altri casi d'uso a cui non hai pensato.

Questo è anche il motivo per cui dovresti usare a <button>per azioni cliccabili, a <label>per etichettare an <input>e a <main>per la sezione principale della tua pagina.

In che modo il buon markup influisce sul SEO

Fondamentalmente, la SEO si basa sul convincere i motori di ricerca che i tuoi contenuti sono la migliore corrispondenza per un termine di ricerca. Ovviamente, nessuno di Google legge personalmente ogni pagina web e la classifica.

Pertanto, affinché i motori di ricerca sappiano quali sono i tuoi contenuti, un programma deve analizzarli.

Ehi, guarda! Abbiamo tutto questo linguaggio chiamato HTML che ha lo scopo di etichettare i tuoi contenuti in un modo che le macchine possano capire! :)

Quindi sì, un markup chiaro aiuterà i motori di ricerca a indicizzare meglio le tue pagine.

Per fare un esempio estremo, se il titolo della tua pagina fosse in realtà una fotografia che hai scattato da un titolo di un giornale, potrebbe sembrare interessante e la gente potrebbe leggerlo bene, ma per un motore di ricerca, sarebbe solo un'immagine senza significato . Considerando <h1>Turtle Groomer 5000</h1>chiaramente dice ai motori di ricerca che hai un prodotto che facilita l'igiene testuale.

Pensa anche alle persone con qualche tipo di menomazione che (come esempio) devono usare un lettore braille. In questi casi i tag html sono di importanza molto maggiore rispetto agli stili di visual css.

Su ha risposto alla parte semantica. Per quanto riguarda la SEO, scoprirai che l'elemento h1 ha un peso maggiore nei motori di ricerca rispetto ad altri tag. I tag h2 / b / strong hanno un peso leggermente maggiore rispetto al testo normale.

La maggior parte degli altri tag è praticamente uguale, ma dovresti sempre usare il tag più appropriato per il lavoro. Google ha recentemente iniziato a analizzare le tabelle quando viene utilizzato per i dati tabulari e altri HTML utilizzati in modo appropriato possono fornire segnali su quali contenuti sono più importanti di altri.

Per HTML5, controlla grassetto e corsivo in HTML5 .

Sommario:

Utilizzare <b>quando si desidera che il testo abbia uno stile diverso senza importanza contestuale, ma utilizzare <strong>quando si desidera che il testo abbia una maggiore importanza dal punto di vista del contenuto o SEO.

Utilizzare <i>per compensare l'umore del testo, ma utilizzare <em>per rendere enfatico il testo.

Inoltre: non dimenticare l'importanza della semantica per gli utenti con disabilità. Il software dello screen reader dipende da queste semantiche per presentare ai non vedenti il ​​contesto richiesto a cui si stanno perdendo a causa della loro disabilità.

Innanzitutto, <hx>è un tag piuttosto importante, in quanto definisce i titoli, come altri hanno già detto. I titoli sono molto utili non solo per l'aspetto, ma perché separano le sezioni in un modo che un look-like non può. Dai un'occhiata a Wikipedia per esempio. Alcuni programmi dipendono da questo tipo di tag per "dividere" i documenti o persino creare un sommario automatico. Un motore di ricerca presumerebbe che il testo all'interno di un <h1>tag sarebbe più importante poiché è un'intestazione, un titolo.

Successivamente, mentre i fogli di stile sono fantastici, alcuni dispositivi ignoreranno i fogli di stile e si concentreranno solo sull'HTML, che è dove un tag come <em>è utile. Se i fogli di stile sono stati disabilitati o si è verificato un problema durante il caricamento (ad es. Problemi di connessione a Internet), il testo appare ancora formattato. <em>potrebbe anche dire che si suppone che ci sia un'enfasi sulla parola, mentre il corsivo da solo potrebbe essere qualsiasi cosa, dal titolo di un film al solo rendere una didascalia dell'immagine diversa dal testo normale. Questo può essere utilizzato da coloro che utilizzano strumenti per la disabilità, che altrimenti non riescono a catturare l'enfasi in generale.

<span>d'altra parte, è in gran parte una versione incorporata del <div>tag e, semmai, può semplicemente salvarti dal dover digitare una classe aggiuntiva (detto ciò, vorresti davvero usare <span class="italic">invece che <i>per ogni istanza corsiva hai? Rende il codice più difficile da leggere, meno standardizzato (in base al presupposto generale che la maggior parte delle persone userebbe il secondo rispetto al primo) e non migliora in alcun modo il documento.

<p>è utile anche per le persone con disabilità, poiché garantisce che il testo possa essere suddiviso in paragrafi gestibili in un modo che <br />non è possibile.

Certo, possiamo dire che HTML non era pensato per lo stile, ma esiste una linea delicata tra design e stile; e francamente, direi che è una preferenza dell'utente. Se lo usi <i>o <span class="italic">, dipende da te e non farà alcuna differenza per il SEO. Dopo tutto, perché limitarci a un solo modo di fare le cose? (ad esempio come scegliere se usare o meno i punti e virgola alle estremità delle righe in JavaScript: li uso sempre, mentre altri non li usano mai, e non fa alcuna differenza per la funzionalità.)