HTML semantico: best practice per il 2019
Pubblicato: 2019-08-31L'HTML semantico è più importante che mai, soprattutto perché Google cambia costantemente gli algoritmi di pagerank. I primi posti in ogni query stanno diventando sempre più competitivi. Hai bisogno di un'arma segreta e l'HTML semantico è buono da avere nel tuo arsenale. È possibile utilizzare un codice semantico sui vostri siti web, ma il più è possibile inserire per il contenuto importante, i migliori motori di ricerca possono scansione del tuo sito e sapere che cosa offrite potenziali visitatori.
Che cos'è l'HTML semantico?
In poche parole, l'HTML semantico è HTML che gli esseri umani possono leggere e comprendere. Qualsiasi essere umano, non solo programmatori e sviluppatori, e se gli umani possono leggerlo più facilmente, anche i robot possono farlo. Se i robot possono leggere più facilmente la struttura del tuo sito, possono prendere una decisione più informata su come il tuo sito resiste a varie query di ricerca.
Fondamentalmente, stai dicendo ai crawler dei motori di ricerca "questo è un post di blog" o "questo è un menu di navigazione" o
Ma come lo fa? Bene, usa una sfilza di tag HTML5 speciali che sono molto specifici. Scaviamo in alcuni esempi e puoi vedere di persona.
Formattazione del testo
La formattazione del testo è l'HTML semantico più comune in circolazione e lo vedi ogni giorno. In precedenza, le singole lettere venivano utilizzate per indicare la formattazione, indicando grassetto , corsivo , sottolineato e così via.
<p>This is <b>bold text</b></p> <p>While <i>this is italics</i>, and this is <u>underlined</u>.</p>
Con l'HTML semantico, usi il testo da forte a grassetto e mostri la sua forte importanza o em per mettere in corsivo (o enfatizzare) il testo. È interessante notare che U è ancora usato per sottolineare il testo; tuttavia, l'MDN suggerisce lo stile tramite CSS con la decorazione del testo: sottolineato; per differenziarlo.
<p>This is <strong>bold text</strong>, while <em>this is italics</em>.</p> <p>This would be <u style=text-decoration: #222000 wavy underline;">underlined</u>.</p>
Ci piace anche del mostrare barrato testo cancellato.
<p>We are also fond of <em>del</em> to show <del>strikethrough</del> deleted text.</p>
E abbiamo pensato di concludere il nostro sguardo alla formattazione del testo HTML semantico con un'evidenziazione. Letteralmente. Se usi il segno intorno al testo, evidenzierai tutto ciò che alleghi.
<p>Make sure that you remember <strong>this term for your test</strong>. <p>But you should remember <mark>this information about how to use it in context</mark>.</p> <p>If you do that, you will be fine.</p>
L'MDN dice che questo non deve essere usato nello stesso modo in cui usi strong . Si usa forte per indicare qualcosa di importante nel testo e si usa mark per evidenziare qualcosa che è rilevante per la sua comprensione.
Sezioni, intestazioni e menu
Forse il modo migliore per iniziare è usare intestazioni e piè di pagina. Sai, le parti preferite dei siti Web da costruire e gestire. Con l'HTML tradizionale, potresti avere un'intestazione codificata in questo modo:
<div>
<h1>Page Title Goes here</h1>
<p>Tagline!</p>
<div>
<ul>
<li><a href="example.com">Home Page Link</a></li>
<li><a href="example.com">Blog Page Link</a></li>
<li><a href="example.com">Podcast Page Link</a></li>
</ul>
</div>
</div>
Guardando quel codice, puoi vedere di cosa si tratta. Tuttavia, questo è solo se sai cosa stai guardando. Hai un paio di div nidificati (contenitori) che separano il titolo, lo slogan e il menu (incredibilmente di base). Non c'è niente di sbagliato in questa configurazione, ma di certo non c'è nemmeno niente di veramente giusto . Se fai un ulteriore passo avanti, puoi utilizzare l'ID CSS e il markup della classe per mantenere le cose un po' più leggibili.
<div class="header" id="hero-section">
<h1 class="page-title">Page Title Goes here</h1>
<p>Tagline!</p>
<div class="header-menu">
<ul>
<li><a href="example.com">Home Page Link</a></li>
<li><a href="example.com">Blog Page Link</a></li>
<li><a href="example.com">Podcast Page Link</a></li>
</ul>
</div>
</div>
Con l'HTML semantico, le cose sembrano molto più pulite e facili da leggere, non devi fare affidamento sui div e le classi e gli ID che scegli possono essere solo per lo stile.
<header>
<h1>Page Title Goes Here</h1>
<p>Tagline!</p>
<nav>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
</nav>
</header>
Non è molto più facile leggere e dire cosa sta succedendo? Hai un tag di intestazione che ti consente di sapere che questa è l'intestazione della pagina e un tag di navigazione che indica un menu di navigazione. (È anche abbastanza intelligente da non aver bisogno di uno stile extra per elencare le voci orizzontalmente.)
Tecnicamente potresti anche usare il seguente codice, se vuoi assicurarti che i tuoi stili siano applicati correttamente, oltre ad avere un modo per collegarti a una particolare sezione del sito web. In questo caso, il tag di sezione funziona in modo simile a come funziona il tag div negli esempi precedenti. Tranne, ovviamente, che è leggibile e ha senso per gli occhi umani.
<section id="hero-section">
<header>
<h1>Page Title Goes Here</h1>
<p>Tagline!</p>
<nav>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
</nav>
</header>
</section>
Inoltre, nota l'uso di id="hero-section" , che è un passaggio facoltativo al passaggio facoltativo, ma puoi applicare uno stile alla sezione come selettore CSS da solo.
Asporto
- Usa la sezione in luoghi in cui potresti essere tentato di usare un div esterno.
- Usa può usare l' intestazione per indicare quale parte della pagina è la tua intestazione. Puoi anche usarlo in un articolo o post per indicare l'intestazione di quel post, che è separato dal sito web stesso.
- Usa nav quando imposti un menu di navigazione principale per il sito. Nav non è un modo per i motori di ricerca di trovare collegamenti, ma per trovare il modo principale in cui gli utenti possono navigare nel tuo sito. Qualsiasi raccolta di collegamenti (come breadcrumb, ecc.) può essere inclusa anche in nav
piè di pagina
Non c'è molto da dire sul footer, ma dobbiamo menzionarlo. In molti modi, è un analogo diretto dell'intestazione. Un piè di pagina tradizionale e di base potrebbe assomigliare a questo:
<div class="site-footer>
<p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
<a href="example.com/contact">Contact Us!</a>
<img src="/logo.png">
</div>
Considerando che un piè di pagina semantico può assomigliare a questo:
<footer>
<p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
<a href="example.com/contact">Contact Us!</a>
<img src="/logo.png">
</footer>
Certo, non c'è molta differenza qui nella configurazione di base, ma i robot che vedono il tuo sito apprezzeranno il chiarimento. Inoltre, tieni presente che puoi utilizzare il piè di pagina per pagina, post o piè di pagina.
Principale, articoli e digressioni
Un altro componente principale dell'HTML semantico è il tag dell'articolo . Accanto a questo, anche il lato . Entrambi ti consentono di strutturare il contenuto effettivo del tuo sito in modo che i motori di ricerca sappiano qual è il testo principale, il che a sua volta consente loro di concentrarsi sul problema che stai risolvendo e sull'argomento su cui ti concentri.
Normalmente, un post o una pagina di un blog è un semplice documento HTML, ma l'intestazione, il piè di pagina, il contenuto, le barre laterali, gli inserti, ecc. possono essere tutti raggruppati insieme.
<body>
<div class="post-header>
<h1>Article title</h1>
</div>
<div class="post-content>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div class="article-aside">
<p>Text block</p>
</div>
</div>
<div class="post-footer">
<img src="/subscribe.png">
</div>
</body>
Ora, non è un bel codice, ma funziona. Tuttavia, non è carino e richiede una quantità abbastanza decente di CSS per rendere l'aspetto quasi leggibile durante il rendering. Usando main , article e side , puoi facilmente strutturare la pagina in modo che sia più leggibile.
<main>
<article>
<header>
<h1>Article title</h1>
</header>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<aside>
<p>Text block</p>
</aside>
<footer>
<img src="/subscribe.png">
</footer>
</article>
</main>
Tieni presente, tuttavia, che puoi indicare il contenuto principale della pagina solo una volta. Ciò significa che puoi utilizzare solo una pagina principale per pagina. È possibile nidificare più articoli in un unico main per indicare un sommario o una directory di contenuti autonomi (puoi persino utilizzare più tag H1 in questo modo per mostrare ai motori di ricerca che i post sono autonomi.
Asporto
- Usa un singolo tag principale per pagina
- È possibile utilizzare più tag di articoli per pagina per identificare contenuti separati e autonomi (inclusi più H1 per pagina)
- Aside può essere utilizzato come barra laterale o inserito all'interno di un post o di una pagina
Altri elementi meno utilizzati
Certo, gli elementi e i tag di cui discutiamo sopra sono le parti più utilizzate dell'HTML semantico. Dopotutto, quasi tutti i siti Web su Internet ne contengono una combinazione, mentre i restanti tag semantici supportati sono più specifici e limitati. Tuttavia, non sono meno utili quando servono al loro scopo e aiutano immensamente con l'interazione e l'indicizzazione delle ricerche.
Dettagli e riepilogo
I dettagli e gli elementi di riepilogo creano un livello di contenuto in espansione che può essere nascosto agli utenti a meno che non lo attivino specificamente (come un modulo a fisarmonica in Divi o altri costruttori di pagine).
<details>
<summary>Headline that will be shown and clicked on</summary>
<p>Content that will be hidden</p>
<a href="example.com">Link that will be hidden</a>
</details>
Eventuali elementi figlio del riepilogo verranno nascosti ed espandibili e sarà possibile aggiungere ulteriore testo chiudendo l'elemento dei dettagli .
Figura e didascalia Fig
Questi sono abbastanza auto-esplicativi. La figura è un aiuto visivo di qualche tipo nel tuo post. Foto, grafico, un video di YouTube incorporato, forse. La figcaption , quindi, è la didascalia che aggiungi per spiegare l'uso della figura sopra. Sebbene siano di natura tecnica per l'uso della semantica, puoi utilizzarli per qualsiasi contenuto che desideri indicizzare in modo specifico come aiuto nel post o nella pagina principale.
<figure>
<img src="/chart.jpg">
<figcaption>Explanation of this chart in short text</figcaption>
</figure>
Questi tag sono un ottimo modo per ottenere uno snippet in primo piano su Google, ad esempio, poiché indichi specificamente la soluzione o la spiegazione di un problema. Ti consigliamo di usarli perché non solo riduce il codice che usi per aggiungere una didascalia e lo stile, ma mantiene anche la figura e la didascalia come un singolo elemento della pagina, non separati.
Tempo
Il tempo è uno dei tag usati più raramente, ma quando hai un evento o un'occasione speciale in cui hai specificamente bisogno che il motore di ricerca sappia che c'è un'ora o una data coinvolta, usa questo invece di mettere semplicemente in grassetto o enfatizzare il testo.
<article> <h1>Title</h1> <p>The event will begin on <time datetime="2019-12-25">December 25th</time> and last for <time datetime="PT12H30M0S">12 and a half hours</time>.</p> </article>
L'uso di datetime con l'elemento time offre al tuo sviluppo un aggancio molto migliore al tempo, che ti consentirà quindi di integrarti con i calendari e varie altre API. Sarai in grado di inviare promemoria dal tuo sito e le persone torneranno più spesso.
Conclusione
Anche se non è sbagliato utilizzare HTML non semantico, se prendi l'abitudine mentre lavori, scoprirai che il tuo posizionamento nei motori di ricerca migliorerà. Questo è importante, ma ciò che potrebbe essere ancora più importante, tuttavia, è che risparmierai tempo nella struttura e nello stile del tuo sito, oltre a prevenire molti grattacapi e debiti tecnici per le persone che vengono dopo di te nel progetto .
Quali best practice per l'HTML semantico segui?
Immagine in primo piano dell'articolo di whiteMocca / shutterstock.com