HTML semantic: cele mai bune practici pentru 2019
Publicat: 2019-08-31HTML semantic este mai important acum ca niciodată, mai ales că Google modifică algoritmii de rang de pagină în mod constant. Punctele de top din fiecare interogare devin din ce în ce mai competitive. Ai nevoie de o armă secretă, iar HTML-ul semantic este unul bun pentru a avea în arsenalul tău. Puteți utiliza un anumit cod semantic pe site-urile dvs., dar cu cât puteți introduce mai mult conținutul important, cu atât motoarele de căutare mai bune vă pot accesa site-ul și pot ști ce oferiți potențialilor vizitatori.
Ce este HTML semantic?
Pe scurt, HTML semantic este HTML pe care oamenii îl pot citi și înțelege. Orice om, nu doar programatorii și dezvoltatorii, și dacă oamenii pot să-l citească mai ușor, și roboții. Dacă roboții pot citi structura site-ului dvs. mai ușor, atunci pot lua o decizie mai informată cu privire la gradul în care site-ul dvs. suportă diverse interogări de căutare.
Practic, le spuneți crawlerelor motorului de căutare „acesta este un post pe blog” sau „acesta este un meniu de navigare” sau
Dar cum se face asta? Ei bine, folosește o serie de etichete HTML5 speciale care sunt foarte specifice. Să cercetăm câteva exemple și puteți vedea singur.
Formatarea textului
Formatarea textului este cel mai comun HTML semantic existent și îl vedeți în fiecare zi. În trecut, literele simple erau folosite pentru a indica formatarea, reprezentând caractere aldine , italice , subliniate și așa mai departe.
<p>This is <b>bold text</b></p> <p>While <i>this is italics</i>, and this is <u>underlined</u>.</p>
Cu HTML semantic, utilizați textul puternic până la îndrăzneț și arătați importanța sa puternică sau em pentru a cursiva (sau a sublinia) textul. Interesant este că U este încă folosit pentru a sublinia textul; cu toate acestea, MDN sugerează stilizarea acestuia prin CSS cu text-decor: subliniere; pentru a-l diferenția.
<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>
De asemenea, ne place să arătăm del tăiat text șters.
<p>We are also fond of <em>del</em> to show <del>strikethrough</del> deleted text.</p>
Și ne-am gândit că vom încheia privirea la formatarea textului semantic HTML cu un punct culminant. Literalmente. Dacă utilizați marca în jurul textului, atunci veți evidenția orice ați inclus.
<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>
MDN spune că acest lucru nu trebuie utilizat în același mod în care utilizați puternic . Folosiți puternic pentru a indica ceva important în text și folosiți marca pentru a evidenția ceva care este relevant pentru înțelegerea acestuia.
Secțiuni, anteturi și meniuri
Poate cel mai bun mod de a începe este să folosiți anteturi și subsoluri. Știi, părțile preferate ale tuturor site-urilor web pe care să le construiești și să le gestionezi. Cu HTML tradițional, este posibil să aveți un antet codat astfel:
<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>
Privind acest cod, puteți vedea ce este totul. Cu toate acestea, acest lucru este doar dacă știi la ce te uiți. Aveți câteva divs (containere) imbricate care separă titlul, sloganul și meniul (incredibil de simplu). Nu este nimic în neregulă cu această configurație, dar nici cu siguranță nu este nimic cu adevărat corect . Dacă faceți un pas mai departe, puteți utiliza codul CSS și marcarea clasei pentru a menține lucrurile puțin mai lizibile.
<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>
Cu HTML semantic, lucrurile arată mult mai curate și mai ușor de citit, nu trebuie să vă bazați pe divs, iar clasele și ID-urile pe care le alegeți pot fi doar pentru stil.
<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>
Nu este mult mai ușor să citești și să spui ce se întâmplă? Aveți o etichetă antet care vă permite să știți că aceasta este antetul paginii și o etichetă nav care indică un meniu de navigare. (Este chiar suficient de inteligent pentru a nu avea nevoie de un stil suplimentar pentru a lista intrările pe orizontală.)
Din punct de vedere tehnic, puteți utiliza și următorul cod, dacă doriți să vă asigurați că stilurile dvs. s-au aplicat corect, precum și să aveți o modalitate de a vă conecta la o anumită secțiune a site-ului web. În acest caz, eticheta de secțiune funcționează similar cu modul în care funcționează eticheta div în exemplele anterioare. Cu excepția, desigur, este lizibilă și are sens pentru ochii omului.
<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>
În plus, rețineți utilizarea id = ”hero-section” , care este un pas opțional pentru pasul opțional, dar puteți stiliza secțiunea ca selector CSS pe cont propriu.
Concluzii
- Utilizați secțiunea în locuri în care ați putea fi tentați să utilizați un div.
- Utilizați poate utiliza antetul pentru a indica ce parte a paginii este antetul dvs. Puteți utiliza acest lucru și într-un articol sau într-o postare pentru a indica antetul postării respective, care este separat de site-ul web.
- Utilizați nav atunci când setați un meniu principal de navigare pentru site. Navigarea nu este o modalitate prin care motoarele de căutare găsesc linkuri, ci găsesc modalitatea principală prin care utilizatorii pot naviga pe site-ul dvs. Orice colecție de link-uri (cum ar fi pesmet etc.) poate fi, de asemenea, inclusă în nav
Subsol
Nu trebuie spus multe despre subsol, dar trebuie să menționăm acest lucru. În multe feluri, este un analog direct la antet. Un subsol de bază tradițional ar putea arăta astfel:
<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>
Întrucât un subsol semantic poate arăta astfel:
<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>
Desigur, nu există o mare diferență aici în setarea de bază, dar roboții care vă văd site-ul vor aprecia clarificarea. Rețineți, de asemenea, că puteți utiliza subsol pentru pagini, postări sau subsoluri pentru site.
Principal, articole și în afară
O altă componentă principală a HTML-ului semantic este eticheta articolului . Pe lângă asta, și deoparte . Ambele vă permit să structurați conținutul real al site-ului dvs., astfel încât motoarele de căutare să știe care este textul principal, ceea ce le permite, la rândul lor, să se concentreze pe problema pe care o rezolvați și pe tema pe care vă concentrați.
În mod normal, o postare sau o pagină de blog este un document HTML simplu, dar antetul, subsolul, conținutul, barele laterale, inserțiile etc. pot fi combinate.
<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>
Acum, acesta nu este un cod destul de bun, dar funcționează. Cu toate acestea, nu este frumos și necesită o cantitate destul de decentă de CSS pentru a face să arate oriunde aproape lizibil atunci când este redat. Folosind main , article și deoparte , puteți structura cu ușurință pagina pentru a fi mai ușor de citit.
<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>
Cu toate acestea, trebuie să rețineți că puteți indica conținutul principal al paginii doar o singură dată. Însemnând că puteți utiliza o singură pagină principală . Puteți adăuga mai multe articole sub o singură pagină principală pentru a indica un cuprins sau un director de conținut independent (puteți utiliza chiar și mai multe etichete H1 în acest fel pentru a arăta motoarelor de căutare care postările sunt independente.
Concluzii
- Folosiți o singură etichetă principală pe pagină
- Mai multe etichete de articol pot fi utilizate pe pagină pentru a identifica conținut separat, independent (inclusiv mai multe H1 pe pagină)
- Aside poate fi folosit ca bară laterală sau inserare într-o postare sau pagină
Alte elemente mai puțin utilizate
Desigur, elementele și etichetele pe care le discutăm mai sus sunt cele mai utilizate părți ale HTML-ului semantic. La urma urmei, aproape fiecare site de pe internet conține o combinație a acestora, în timp ce restul de etichete semantice acceptate sunt mai specifice și mai limitate. Cu toate acestea, acestea nu sunt mai puțin utile atunci când își îndeplinesc scopul și ajută enorm la interacțiune și indexarea căutării.
Detalii și rezumat
Detaliile și elementele de rezumat creează un strat de conținut în expansiune care poate fi ascuns utilizatorilor, cu excepția cazului în care îl activează în mod specific (cum ar fi un modul de acordeon în Divi sau în alți constructori de pagini).
<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>
Orice copil al rezumatului va fi ascuns și extensibil și puteți adăuga text suplimentar închizând elementul de detalii .
Figura și Figcaption
Acestea sunt destul de auto-explicative. Figura este un fel de ajutor vizual în postarea dvs. Poate fotografie, grafic, un videoclip YouTube încorporat. Figcaption , deci, este legenda pe care o adăugați pentru a explica utilizarea figurii de mai sus. Deși sunt de natură tehnică pentru utilizarea semanticii, puteți utiliza acest lucru pentru orice conținut pe care doriți să îl indexați în mod special ca ajutor în postarea sau pagina principală.
<figure>
<img src="/chart.jpg">
<figcaption>Explanation of this chart in short text</figcaption>
</figure>
Aceste etichete sunt o modalitate excelentă de a obține un fragment prezentat pe Google, de exemplu, deoarece indicați în mod specific soluția sau explicația unei probleme. Vă sfătuim să le utilizați, deoarece nu numai că reduce codul pe care îl utilizați pentru a adăuga o legendă și stilizați-l, dar păstrează și figura și subtitrarea ca un singur element al paginii, nu ca pe unul separat.
Timp
Ora este una dintre etichetele mai rar folosite, dar atunci când aveți un eveniment sau o ocazie specială în care aveți nevoie în mod specific de motorul de căutare pentru a ști că există o oră sau o dată implicată, utilizați acest lucru în loc să purtați îndrăzneala sau să accentuați textul.
<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>
Utilizarea datetime cu elementul de timp oferă dezvoltării dvs. un cârlig mult mai bun în timp, care vă va permite apoi să vă integrați cu calendare și alte API-uri. Veți putea trimite mementouri de pe site-ul dvs., iar oamenii vor reveni mai des.
Concluzie
Deși nu este greșit să folosiți HTML non-semantic, dacă vă deprindeți în timp ce lucrați, veți găsi îmbunătățirea clasamentului motorului dvs. de căutare. Acest lucru este important, dar ceea ce ar putea fi și mai important, este că vă veți economisi timp în modul în care vă structurați și amenajați site-ul, precum și în prevenirea multor dureri de cap și datorii tehnice pentru oamenii care vin după voi în proiect .
Ce bune practici pentru HTML semantic urmați?
Imagine prezentată de articol de către whiteMocca / shutterstock.com