Elementele HTML semantice sunt cele care descriu în mod clar semnificația lor într-un mod care poate fi citit de om și de mașină.

Elemente precum <header>, <footer> și <article> sunt considerate toate semantice deoarece descriu cu exactitate scopul elementului și tipul de conținut care se află în interiorul lor.

Ce sunt elementele semantice?

HTML a fost creat inițial ca limbaj de marcare pentru a descrie documentele de pe internetul timpuriu. Pe măsură ce internetul a crescut și a fost adoptat de mai mulți oameni, nevoile sale s-au schimbat.

Acolo unde internetul a fost inițial destinat schimbului de documente științifice, acum oamenii doreau să împărtășească și alte lucruri. Foarte repede, oamenii au început să își dorească să facă web-ul să arate mai frumos.

Deoarece web-ul nu a fost inițial construit pentru a fi proiectat, programatorii au folosit diferite hack-uri pentru a face lucrurile aranjate în moduri diferite. Mai degrabă decât să folosiți <table></table> pentru a descrie informații folosind un tabel, programatorii le-ar folosi pentru a poziționa alte elemente pe o pagină.

Pe măsură ce utilizarea aspectelor concepute vizual a progresat, programatorii au început să utilizeze o etichetă generică „non-semantică”, de exemplu <div>. Ele ar da adesea acestor elemente un class sau id atribut pentru a descrie scopul lor. De exemplu, în loc de <header> acest lucru a fost scris adesea ca <div class="header">.

Deoarece HTML5 este încă relativ nou, această utilizare a elementelor non-semantice este încă foarte frecventă pe site-urile web de astăzi.

Lista noilor elemente semantice

Elementele semantice adăugate în HTML5 sunt:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

Elemente precum <header>, <nav>, <section>, <article>, <aside>, și <footer> acționează mai mult sau mai puțin ca <div> elemente. Ele grupează alte elemente împreună în secțiuni de pagină. Cu toate acestea, unde a <div> eticheta ar putea conține orice tip de informație, este ușor de identificat ce fel de informații ar merge într-o semantică <header> regiune.

ad-banner

Un exemplu de aspect semantic al elementului de către w3schools

Elemente semantice care prezintă o pagină de către w3schools

De ce să folosim elemente semantice?

Pentru a analiza beneficiile elementelor semantice, iată două bucăți de cod HTML. Acest prim bloc de cod folosește elemente semantice:

<header></header>
<section>
	<article>
		<figure>
			<img>
			<figcaption></figcaption>
		</figure>
	</article>
</section>
<footer></footer>

În timp ce acest al doilea bloc de cod folosește elemente non-semantice:

<div id="header"></div>
<div class="section">
	<div class="article">
		<div class="figure">
			<img>
			<div class="figcaption"></div>
		</div>
	</div>
</div>
<div id="footer"></div>

În primul rând, este mult mai ușor de citit. Acesta este probabil primul lucru pe care îl veți observa când vă uitați la primul bloc de cod folosind elemente semantice. Acesta este un mic exemplu, dar, ca programator, puteți citi sute sau mii de linii de cod. Cu cât este mai ușor să citești și să înțelegi acel cod, cu atât îți ușurează treaba.

Are accesibilitate mai mare. Nu ești singurul care găsește elemente semantice mai ușor de înțeles. Motoarele de căutare și tehnologiile de asistență (cum ar fi cititoarele de ecran pentru utilizatorii cu deficiențe de vedere) pot, de asemenea, să înțeleagă mai bine contextul și conținutul site-ului dvs. web, ceea ce înseamnă o experiență mai bună pentru utilizatorii dvs.

În general, elementele semantice conduc, de asemenea, la mai multe cod consecvent. Când creați un antet folosind elemente non-semantice, diferiți programatori ar putea scrie acest lucru ca <div class="header">, <div id="header">, <div class="head">, sau pur și simplu <div>. Există atât de multe moduri în care puteți crea un element de antet și toate depind de preferința personală a programatorului. Prin crearea unui element semantic standard, îl face mai ușor pentru toată lumea.

Din octombrie 2014, HTML4 a fost actualizat la HTML5, împreună cu câteva elemente noi „semantice”. Până în prezent, unii dintre noi s-ar putea să fie în continuare confuzi cu privire la motivele pentru care atât de multe elemente diferite care nu par să arate nicio schimbare majoră.

<section> și <article>

„Care este diferența?”, Puteți întreba. Ambele elemente sunt utilizate pentru secționarea unui conținut și, da, pot fi utilizate cu siguranță în mod interschimbabil. Este o problemă în ce situație. HTML4 a oferit un singur tip de element container, care este <div>. Deși acest lucru este încă folosit în HTML5, HTML5 ne-a furnizat <section> și <article> într-un fel de a înlocui <div>.

<section> și <article> elementele sunt similare din punct de vedere conceptual și interschimbabile. Pentru a decide care dintre acestea ar trebui să alegeți, luați notă de următoarele:

  1. Un articol este destinat să poată fi distribuit în mod independent sau reutilizat.
  2. O secțiune este un grup tematic de conținut.
<section>
  <p>Top Stories</p>
  <section>
    <p>News</p>
    <article>Story 1</article>
    <article>Story 2</article>
    <article>Story 3</article>
  </section>
  <section>
    <p>Sport</p>
    <article>Story 1</article>
    <article>Story 2</article>
    <article>Story 3</article>
  </section>
</section>

<header> și <hgroup>

<header> elementul se găsește, în general, în partea de sus a unui document, a unei secțiuni sau a unui articol și conține de obicei titlul principal și câteva instrumente de navigare și căutare.

<header>
  <h1>Company A</h1>
  <ul>
    <li><a href="https://www.freecodecamp.org/home">Home</a></li>
    <li><a href="http://www.freecodecamp.org/about">About</a></li>
    <li><a href="http://www.freecodecamp.org/contact">Contact us</a></li>
  </ul>
  <form target="/search">
    <input name="q" type="search" />
    <input type="submit" />
  </form>
</header>

<hgroup> elementul trebuie utilizat acolo unde doriți un titlu principal cu unul sau mai multe subtitluri.

<hgroup>
  <h1>Heading 1</h1>
  <h2>Subheading 1</h2>
  <h2>Subheading 2</h2>
</hgroup>

REȚINEȚI-VĂ faptul că <header> elementul poate conține orice conținut, dar <hgroup> elementul poate conține doar alte anteturi, adică <h1> la <h6> și inclusiv <hgroup>.

<aside>

<aside> elementul este destinat conținutului care nu face parte din fluxul textului în care apare, totuși totuși legat într-un fel. Aceasta de <aside> ca o bară laterală a conținutului principal.

<aside>
  <p>This is a sidebar, for example a terminology definition or a short background to a historical figure.</p>
</aside>

Înainte de HTML5, meniurile noastre erau create cu <ul>și <li>‘s. Acum, împreună cu acestea, putem separa elementele de meniu cu un <nav>, pentru navigare între paginile dvs. Puteți avea orice număr de <nav> elementele de pe o pagină, de exemplu, este comun să aibă o navigație globală în partea de sus (în <header>) și navigare locală într-o bară laterală (într-un <aside> element).

<nav>
  <ul>
    <li><a href="https://www.freecodecamp.org/home">Home</a></li>
    <li><a href="http://www.freecodecamp.org/about">About</a></li>
    <li><a href="http://www.freecodecamp.org/contact">Contact us</a></li>
  </ul>
</nav>

Daca este o <header> trebuie să existe o <footer>. A <footer> se găsește, în general, în partea de jos a unui document, a unei secțiuni sau a unui articol. La fel ca <header> conținutul este în general metainformație, cum ar fi detalii despre autor, informații juridice și / sau linkuri către informații conexe. De asemenea, este valabil să se includă <section> elemente dintr-un subsol.

<footer>&copy;Company A</footer>

<small>

<small> element apare adesea în cadrul unui <footer> sau <aside> element care ar conține, de obicei, informații privind drepturile de autor sau renunțări legale și alte astfel de tipărituri mici. Cu toate acestea, acest lucru nu este destinat să micșoreze textul. Este doar descrierea conținutului său, nu prescrierea prezentării.

<footer><small>&copy;Company A</small> Date</footer>

<time>

<time> elementul permite atașarea unei date fără echivoc ISO 8601 la o versiune citită de om a acelei date.

<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>

De ce să te deranjezi <time>? În timp ce oamenii pot citi timpul care poate dezambigua prin context în mod normal, computerele pot citi data ISO 8601 și pot vedea data, ora și fusul orar.

<figure> și <figcaption>

<figure> este pentru a înfășura conținutul imaginii în jurul său și <figcaption> este de a legenda imaginea ta.

<figure>
  <img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" />
  <figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption>
</figure>

Aflați mai multe despre noile elemente HTML5:

  • w3schools oferă descrieri simple și clare ale multor elemente de știri și cum / unde ar trebui utilizate.
  • MDN oferă, de asemenea, o referință excelentă pentru toate elementele HTML și merge mai adânc în fiecare.