Nu trebuie să utilizați etichete div de fiecare dată. Utilizați aceste etichete HTML semantice pentru a vă face site-ul mai structurat și mai accesibil.
Înainte de introducerea HTML-ului semantic, dezvoltatorii foloseau div-urile pentru a aranja conținutul. Elementele Div nu au nici un sens în sine. Ele oferă doar o modalitate de a aplica stiluri și de a aranja conținutul.
Cuvântul semantic înseamnă referitoare la sens. Elementele HTML semantice descriu scopul conținutului lor. Ele oferă sens dezvoltatorului, utilizatorului, motoarelor de căutare și tehnologiilor de asistență. Iată o listă de etichete HTML semantice populare pe care le puteți utiliza în următorul proiect.
Ce sunt Div-urile?
În HTML, elementul div (diviziune) este un container la nivel de bloc. Utilizați un div pentru a grupa sau împărți elementele HTML în secțiuni pe o pagină web. Sintaxa este așa cum se arată mai jos:
<div>
div>
Beneficiile utilizării elementelor HTML semantice față de Div
HTML5 a introdus elemente HTML semantice pentru a facilita citirea codului. Elementele semantice oferă sens și structură conținutului web.
Ele fac codul tău ușor de înțeles pentru alți dezvoltatori. De asemenea, facilitează ca motoarele de căutare să vă găsească conținutul și să conducă trafic către site-ul dvs. Iată câteva elemente semantice pe care le puteți folosi în dvs Proiecte HTML și CSS.
1.
The eticheta definește secțiunea antetului unui document. De obicei, conține sigla site-ului, navigarea și titlul paginii. Este secțiunea care apare deasupra unei pagini web. Puteți personaliza antetul în funcție de nevoile dvs. Sintaxa este următoarea:
<corp><antet>
<h1> Bună!h1>
<p>Sunt un antetp>
antet>
corp>
2.
The eticheta conține link-urile de navigare pentru site-ul web. Acestea pot fi meniuri, cuprinsuri sau indexuri. De obicei este plasat în etichetă. Sintaxa este următoarea:
<antet><nav>
<ul>
<li>Link-uri pe site-ul meuli>
<li><Ahref="#"> AcasăA>li>
<li ><Ahref="#"> Despre noi A>li>
ul>
nav>
<h1>Cele de mai sus este o parte de navigare a site-ului meu.h1>
antet>
Pe browser va arăta astfel:
Puteți utiliza modele de aspect CSS, cum ar fi Flexbox CSS pentru a alinia
3.
The eticheta conține conținutul principal al paginii web. Separă conținutul de antet, bara laterală și subsol. Principalul reprezintă conținutul dominant al secțiune.
<corp><antet>
<titlu> Faptele site-ului titlu>
antet>
<principal>
<p> Acest site web este o scurtă demonstrație a modului în care funcționează eticheta principală.p>
<p> Acesta include partea site-ului cu conținut util.p>
principal>
<subsol>
<h3> Acesta este un subsol h3>
subsol>
corp>
Arata asa:
4.
Folosește etichetă pentru a defini secțiuni autonome dintr-un document sau site web. De exemplu, le puteți folosi pentru a structura postări de blog, reviste sau carduri de produse. The elementul poate include alte elemente, inclusiv alte articole, secțiuni și titluri. Elementele anexate trebuie să se refere la subiectul articolului.
<articol>
<h1>Stranger than Fictionh1><articol>
<h3>Introducereh3>
<p>Evenimentele și persoanele relatate în această carte sunt fictive.p>
articol>
<articol>
<h3>Capitol unulh3>
<p> Ziua era strălucitoare și soarele zâmbea din cerp>
articol>
articol>
Arata asa:
5.
The eticheta conține conținutul legat de conținutul principal. Utilizați această etichetă pentru a crea bare laterale pentru citate, comentarii sau strigări. evidențiază informații pe care cititorul le-ar putea rata. Se evidențiază de restul conținutului.
html><html>
<stil>
corp{
culoare de fundal:#abdbe3;
}
deoparte {
latime: 30%;
captuseala-stânga: 0.5rem;
margine-stânga: 1rem;
flex: stânga;
box-shadow: inset 5px 0 5px -5px verde;
font-style: italic;
culoarea rosie;
}
deoparte > p {
marja: 0,5 rem;
stil>
<corp>
<principal>
<h1> Păsări țesătoareh1>
<p>Ploceidae este o familie de pasari mici. Mulți dintre care sunt numiți țesători, păsări țesătoare, cinteze țesătoare și episcopi.p>
<deoparte>
<p>Regatul: Animalia
Filum: Chordatap>deoparte>
<p>În cele mai recente clasificări, Ploceidae este o cladă, excluzând unele păsări care au fost plasate istoric în familie. Unele dintre vrăbii, dar include subfamilia monotipică Amblyospizinae.p>
principal>
corp>
html>
6.
The elementul conține o parte a paginii fără un element semantic specific. Secțiunile pot avea un titlu pentru a introduce conținutul și pentru a include alte elemente HTML. reprezintă componentele unei pagini web, cum ar fi capitolele dintr-o carte sau blog.
html><html>
<corp>
<h1>Bibliah1>
<secțiune>
<h2>Introducereh2>
<p>Biblia este o colecție de scripturi religioase sacre în creștinism, iudaism, samaritanism. Biblia este o antologie – o compilație de texte de diferite forme – scris inițial în ebraică, aramaică și greacă koine.p>
secțiune>
<secțiune>
<h2>Capitolul unu: Genezah2>
<p>Cartea Genezei este prima carte a Bibliei ebraice și a Vechiului Testament creștin. Numele său ebraic este același cu primul cuvânt, Bereshit. Geneza este o relatare a creării lumii, a istoriei timpurii a umanității și a strămoșilor lui Israel și a originilor poporului evreu.p>
secțiune>corp>
html>
Arata asa:
7.
The elementele închide ilustrații autonome, cum ar fi imagini sau diagrame. Aceste ilustrații fac referire la conținutul paginii principale. Cifrele vin cu legendele specificate de element. The explică despre ce este vorba în imagine. The
html><html>
<corp>
<principal>
<secțiune>
<h1>Părți ale unui computerh1>
<p> Există mai multe părți care lucrează împreună pentru a alcătui un computerp>
<figura>
<imgsrc=„unele-url.jpg”alt="mouse de calculator">
<figcaption>Acesta este un mouse de computerfigcaption>
figura>
secțiune>
principal>
corp>
html>
Puteți merge mai departe și puteți învăța cum să creați imagini receptive în HTML.
The Elementul HTML include informații în partea de jos a paginii web. Este opusul element. The poate conține informații despre proprietarul paginii. Acestea includ date privind drepturile de autor sau link-uri către informații suplimentare ale site-ului.
html><html>
<corp>
<principal>
<secțiune>
<h1>Părți ale unui computerh1>
<figura>
<imgsrc=„unele-url.jpg”alt="mouse de calculator">
<figcaption>Acesta este un mouse de computerfigcaption>
figura>
secțiune>
principal>
<subsol>
<p> Fabricat de ComputerTech © 2023p>
subsol>
corp>
html>
Codul de mai sus adaugă un subsol la Părți ale unui computer pagină așa cum se arată în imaginea următoare.
De ce să folosiți elemente semantice HTML?
Folosirea elementelor semantice HTML oferă context codului. Oricine se uită la cod l-ar putea înțelege cu ușurință. Etichetele facilitează stilarea elementelor și colaborarea la proiecte.
Puteți utiliza HTML semantic cu biblioteci și cadre frontend. Majoritatea browserelor web moderne preferă elementele HTML semantice în detrimentul elementelor tradiționale. Începeți să utilizați HTML semantic și urmăriți-vă codul să arate modern, lizibil și prezentabil.
