Te ei pea iga kord div-märgendeid kasutama. Kasutage neid semantilisi HTML-märgendeid oma saidi struktureeritumaks ja juurdepääsetavamaks muutmiseks.
Enne semantilise HTML-i kasutuselevõttu kasutasid arendajad sisu korraldamiseks dive. Div-elementidel pole iseenesest tähendust. Need pakuvad ainult viisi stiilide rakendamiseks ja sisu korraldamiseks.
Sõna semantiline tähendab tähendusega seotud. Semantilised HTML-i elemendid kirjeldavad nende sisu eesmärki. Need annavad arendajale, kasutajale, otsingumootoritele ja abitehnoloogiatele tähenduse. Siin on loend populaarsetest semantilistest HTML-märgenditest, mida saate oma järgmises projektis kasutada.
Mis on Divid?
HTML-is on div (jaotus) element plokitasemel konteiner. Kasutate HTML-elementide rühmitamiseks või jagamiseks veebilehe jaotisteks div. Süntaks on järgmine:
<div>
div>
Semantiliste HTML-elementide kasutamise eelised võrreldes Dividega
HTML5 võttis koodi lugemise hõlbustamiseks kasutusele semantilised HTML-elemendid. Semantilised elemendid annavad veebisisule tähenduse ja struktuuri.
Need muudavad teie koodi teistele arendajatele arusaadavaks. Samuti hõlbustavad need otsingumootoritel teie sisu leidmist ja suunavad liiklust teie saidile. Siin on mõned semantilised elemendid, mida saate oma töös kasutada HTML ja CSS projektid.
1.
The silt määrab dokumendi päise osa. Tavaliselt sisaldab see saidi logo, navigeerimist ja lehe pealkirja. See on jaotis, mis kuvatakse veebilehe ülaosas. Saate päist vastavalt oma vajadustele kohandada. Süntaks on järgmine:
<keha><päis>
<h1> Tere!h1>
<lk>Olen päislk>
päis>
keha>
2.
The silt sisaldab veebisaidi navigeerimislinke. Need võivad olla menüüd, sisukorrad või registrid. Tavaliselt asetatakse see sisse tag. Süntaks on järgmine:
<päis><nav>
<ul>
<li>Minu veebisaidi lingidli>
<li><ahref="#"> Kodua>li>
<li ><ahref="#"> Meist a>li>
ul>
nav>
<h1>Ülaltoodud on minu veebisaidi navigeerimisosa.h1>
päis>
Brauseris näeb see välja järgmine:
Saate kasutada CSS-i paigutusmudeleid, näiteks CSS flexbox joondamiseks
3.
The silt sisaldab veebilehe põhisisu. See eraldab sisu päisest, külgribast ja jalusest. Peamine esindab domineerivat sisu osa.
<keha><päis>
<pealkiri> Veebisaidi faktid pealkiri>
päis>
<peamine>
<lk> See veebisait tutvustab lühidalt, kuidas peamine silt töötab.lk>
<lk> See ümbritseb veebisaidi osa kasuliku sisuga.lk>
peamine>
<jalus>
<h3> See on jalus h3>
jalus>
keha>
See näeb välja selline:
4.
Kasuta märgend, et määratleda dokumendis või veebisaidil iseseisvad jaotised. Näiteks saate neid kasutada ajaveebipostituste, ajakirjade või tootekaartide struktureerimiseks. The element võib hõlmata muid elemente, sealhulgas muid artikleid, jaotisi ja pealkirju. Lisatud elemendid peaksid olema seotud artikli teemaga.
<artiklit>
<h1>Võõras kui väljamõeldish1><artiklit>
<h3>Sissejuhatush3>
<lk>Selles raamatus jutustavad sündmused ja isikud on fiktiivsed.lk>
artiklit>
<artiklit>
<h3>Esimene peatükkh3>
<lk> Päev oli helge ja päike naeratas taevastlk>
artiklit>
artiklit>
See näeb välja selline:
5.
The silt sisaldab põhisisuga seotud sisu. Kasutage seda silti tsitaatide, kommentaaride või hüüdlausete jaoks külgribade loomiseks. tõstab esile teabe, mida lugeja võib kahe silma vahele jätta. See paistab muust sisust silma.
html><html>
<stiilis>
keha{
taustavärv:#abdbe3;
}
kõrvale {
laius: 30%;
polster-vasak: 0,5rem;
veeris-vasak: 1rem;
paindumine: vasak;
kast-vari: sisestus 5px 0 5px -5px roheline;
fondi stiil: kaldkiri;
värv: punane;
}
kõrvale > p {
marginaal: 0,5rem;
stiilis>
<keha>
<peamine>
<h1> Weaver Linnudh1>
<lk>Ploceidae on väikeste pääsulindude perekond. Paljusid neist nimetatakse kudujateks, kudumislindudeks, kudumisvindideks ja piiskoppideks.lk>
<kõrvale>
<lk>Kuningriik: Animalia
Perekond: Chordatalk>kõrvale>
<lk>Enamikes viimastes klassifikatsioonides on Ploceidae klaad, välja arvatud mõned linnud, kes on ajalooliselt perekonda paigutatud. Mõned varblased, kuid hõlmab monotüüpset alamperekonda Amblyospizinae.lk>
peamine>
keha>
html>
6.
The element sisaldab lehe osa, millel pole konkreetset semantilist elementi. Jaotistel võib olla pealkiri sisu tutvustamiseks ja muude HTML-elementide lisamiseks. esindab veebilehe komponente, näiteks peatükke raamatus või ajaveebis.
html><html>
<keha>
<h1>Piibelh1>
<osa>
<h2>Sissejuhatush2>
<lk>Piibel on kristluses, judaismis ja samaritismis püha pühakirjade kogum. Piibel on antoloogia – mitmesuguse vormiga tekstide kogum – algselt kirjutatud heebrea, aramea ja koine kreeka keeles.lk>
osa>
<osa>
<h2>Esimene peatükk: Genesish2>
<lk>Genesise raamat on heebrea piibli ja kristliku Vana Testamendi esimene raamat. Selle heebrea nimi on sama, mis selle esimene sõna Bereshit. Genesis on ülevaade maailma loomisest, inimkonna varasest ajaloost ning Iisraeli esivanematest ja juudi rahva päritolustlk>
osa>keha>
html>
See näeb välja selline:
7.
The elemendid sisaldavad iseseisvaid illustratsioone, nagu pildid või diagrammid. Need illustratsioonid viitavad avalehe sisule. Joonistel on pealkirjad, mille on täpsustanud element. The selgitab, millest pilt räägib. The
html><html>
<keha>
<peamine>
<osa>
<h1>Arvuti osadh1>
<lk> Arvuti koostamiseks on mitu osa, mis töötavad kooslk>
<kujund>
<imgsrc="some-url.jpg"alt="arvutihiir">
<pildiallkiri>See on arvutihiirpildiallkiri>
kujund>
osa>
peamine>
keha>
html>
Võite minna kaugemale ja õppida kuidas luua reageerivaid pilte HTML-is.
The HTML-element sisaldab teavet veebilehe allosas. See on vastupidine element. The võib sisaldada teavet lehe omaniku kohta. See hõlmab autoriõiguse andmeid või linke saidi lisateabele.
html><html>
<keha>
<peamine>
<osa>
<h1>Arvuti osadh1>
<kujund>
<imgsrc="some-url.jpg"alt="arvutihiir">
<pildiallkiri>See on arvutihiirpildiallkiri>
kujund>
osa>
peamine>
<jalus>
<lk> Tootja ComputerTech © 2023lk>
jalus>
keha>
html>
Ülaltoodud kood lisab jaluse Arvuti osad leht, nagu on näidatud järgmisel pildil.
Miks kasutada semantilisi HTML-elemente?
Semantiliste HTML-elementide kasutamine annab koodile konteksti. Igaüks, kes koodi vaatab, saab sellest hõlpsasti aru. Sildid hõlbustavad elementide stiilimist ja projektide kallal koostööd.
Semantilist HTML-i saate kasutada esiotsa teekide ja raamistikega. Enamik kaasaegseid veebibrausereid eelistab semantilisi HTML-i elemente traditsioonilistele elementidele. Alustage semantilise HTML-i kasutamist ja vaadake, et teie kood näeks välja kaasaegne, loetav ja esinduslik.
