Jums nav katru reizi jāizmanto div tagi. Izmantojiet šos semantiskos HTML tagus, lai padarītu savu vietni strukturētāku un pieejamāku.
Pirms semantiskā HTML ieviešanas izstrādātāji satura sakārtošanai izmantoja div. Div elementiem pašiem nav nozīmes. Tie nodrošina tikai veidu, kā piemērot stilus un sakārtot saturu.
Vārds semantiskais nozīmē kas attiecas uz nozīmi. Semantiskie HTML elementi apraksta to satura mērķi. Tie sniedz nozīmi izstrādātājam, lietotājam, meklētājprogrammām un palīgtehnoloģijām. Šeit ir saraksts ar populāriem semantiskiem HTML tagiem, kurus varat izmantot savā nākamajā projektā.
Kas ir Divi?
HTML valodā div (dalīšanas) elements ir bloka līmeņa konteiners. Jūs izmantojat div, lai grupētu vai sadalītu HTML elementus tīmekļa lapas sadaļās. Sintakse ir šāda:
<div>
div>
Semantisko HTML elementu izmantošanas priekšrocības salīdzinājumā ar Divs
HTML5 ieviesa semantiskos HTML elementus, lai atvieglotu koda lasīšanu. Semantiskie elementi nodrošina tīmekļa satura nozīmi un struktūru.
Tie padara jūsu kodu saprotamu citiem izstrādātājiem. Tie arī atvieglo meklētājprogrammām jūsu satura atrašanu un datplūsmas virzīšanu uz jūsu vietni. Šeit ir daži semantiski elementi, kurus varat izmantot savā HTML un CSS projekti.
1.
The tags nosaka dokumenta galvenes sadaļu. Parasti tajā ir vietnes logotips, navigācija un lapas nosaukums. Tā ir sadaļa, kas parādās tīmekļa lapas augšpusē. Jūs varat pielāgot galveni atbilstoši savām vajadzībām. Sintakse ir šāda:
<ķermeni><galvene>
<h1> Sveiki!h1>
<lpp>Es esmu virsrakstslpp>
galvene>
ķermeni>
2.
The tagā ir vietnes navigācijas saites. Tās var būt izvēlnes, satura rādītāji vai indeksi. Tas parasti tiek novietots iekšpusē tagu. Sintakse ir šāda:
<galvene><nav>
<ul>
<li>Manas vietnes saitesli>
<li><ahref="#"> Mājasa>li>
<li ><ahref="#"> Par mums a>li>
ul>
nav>
<h1>Iepriekš minētā ir manas vietnes navigācijas daļa.h1>
galvene>
Pārlūkprogrammā tas izskatīsies šādi:
Varat izmantot CSS izkārtojuma modeļus, piemēram CSS flexbox lai izlīdzinātu
3.
The tags satur tīmekļa lapas galveno saturu. Tas atdala saturu no galvenes, sānjoslas un kājenes. Galvenais attēlo dominējošo saturu sadaļā.
<ķermeni><galvene>
<virsraksts> Vietnes fakti virsraksts>
galvene>
<galvenais>
<lpp> Šī vietne ir īss galvenā taga darbības demonstrācija.lpp>
<lpp> Tas aptver vietnes daļu ar noderīgu saturu.lpp>
galvenais>
<kājene>
<h3> Šī ir kājene h3>
kājene>
ķermeni>
Tas izskatās šādi:
4.
Izmantojiet tagu, lai dokumentā vai vietnē definētu atsevišķas sadaļas. Piemēram, varat tos izmantot, lai strukturētu emuāra ziņas, žurnālus vai produktu kartes. The elements var ietvert citus elementus, tostarp citus rakstus, sadaļas un virsrakstus. Pievienotajiem elementiem jāattiecas uz raksta tēmu.
<rakstu>
<h1>Svešāks nekā daiļliteratūrah1><rakstu>
<h3>Ievadsh3>
<lpp>Šajā grāmatā aprakstītie notikumi un personas ir fiktīvas.lpp>
rakstu>
<rakstu>
<h3>Pirmā nodaļah3>
<lpp> Diena bija gaiša un no debesīm smaidīja saulelpp>
rakstu>
rakstu>
Tas izskatās šādi:
5.
The tagā ir saturs, kas saistīts ar galveno saturu. Izmantojiet šo tagu, lai izveidotu sānjoslas citātiem, komentāriem vai izsaucieniem. izceļ informāciju, ko lasītājs var palaist garām. Tas izceļas no pārējā satura.
html><html>
<stils>
ķermenis{
fona krāsa:#abdbe3;
}
malā {
platums: 30%;
polsterējums-kreisais: 0,5rem;
mala-kreisais: 1rem;
flex: pa kreisi;
box-shadow: ielaidums 5px 0 5px -5px zaļš;
fonta stils: slīpraksts;
krāsa: sarkana;
}
malā > p {
piemale: 0,5rem;
stils>
<ķermeni>
<galvenais>
<h1> Audēja putnih1>
<lpp>Ploceidae ir mazu garāmgājēju putnu dzimta. Daudzas no tām sauc par audējām, audējām, audējām žubītēm un bīskapiem.lpp>
<malā>
<lpp>Karaliste: Animalia
Raksturs: Chordatalpp>malā>
<lpp>Jaunākajā klasifikācijā Ploceidae ir klade, neietver dažus putnus, kas vēsturiski ir iekļauti ģimenē. Daži no zvirbuļiem, bet ietver monotipisku apakšdzimtu Amblyospizinae.lpp>
galvenais>
ķermeni>
html>
6.
The elements satur lapas daļu bez noteikta semantiska elementa. Sadaļās var būt virsraksts, lai iepazīstinātu ar saturu un pievienotu citus HTML elementus. apzīmē tīmekļa lapas sastāvdaļas, piemēram, nodaļas grāmatā vai emuārā.
html><html>
<ķermeni>
<h1>Bībeleh1>
<sadaļā>
<h2>Ievadsh2>
<lpp>Bībele ir reliģisko rakstu krājums, kas ir svēts kristietībā, jūdaismā, samaritismā. Bībele ir antoloģija – dažādu formu tekstu apkopojums – sākotnēji rakstīts ebreju, aramiešu un koine grieķu valodā.lpp>
sadaļā>
<sadaļā>
<h2>Pirmā nodaļa: Genesish2>
<lpp>Genesis grāmata ir pirmā ebreju Bībeles un kristiešu Vecās Derības grāmata. Tā ebreju nosaukums ir tāds pats kā pirmais vārds Bereshit. Genesis ir stāsts par pasaules radīšanu, cilvēces agrīno vēsturi, Izraēlas senčiem un ebreju tautas izcelsmi.lpp>
sadaļā>ķermeni>
html>
Tas izskatās šādi:
7.
The elementiem ir pievienotas atsevišķas ilustrācijas, piemēram, attēli vai diagrammas. Šīs ilustrācijas atsaucas uz galvenās lapas saturu. Attēliem ir pievienoti paraksti, kas norādīti elements. The paskaidro, kas ir attēlā. The
html><html>
<ķermeni>
<galvenais>
<sadaļā>
<h1>Datora daļash1>
<lpp> Ir vairākas daļas, kas darbojas kopā, lai izveidotu datorulpp>
<figūra>
<imgsrc="daži-url.jpg"alt="Datorpele">
<attēlu paraksts>Šī ir datora peleattēlu paraksts>
figūra>
sadaļā>
galvenais>
ķermeni>
html>
Jūs varat iet tālāk un mācīties kā izveidot atsaucīgus attēlus HTML.
The HTML elements ietver informāciju tīmekļa lapas apakšējā daļā. Tas ir pretējs elements. The var saturēt informāciju par lapas īpašnieku. Tas ietver autortiesību datus vai saites uz vietnes papildu informāciju.
html><html>
<ķermeni>
<galvenais>
<sadaļā>
<h1>Datora daļash1>
<figūra>
<imgsrc="daži-url.jpg"alt="Datorpele">
<attēlu paraksts>Šī ir datora peleattēlu paraksts>
figūra>
sadaļā>
galvenais>
<kājene>
<lpp> Ražotājs ComputerTech © 2023lpp>
kājene>
ķermeni>
html>
Iepriekš minētais kods pievieno kājeni Datora daļas lapu, kā parādīts nākamajā attēlā.
Kāpēc izmantot semantiskos HTML elementus?
Izmantojot semantiskos HTML elementus, kodam tiek piešķirts konteksts. Ikviens, kurš aplūko kodu, to var viegli saprast. Atzīmes atvieglo elementu stilu veidošanu un sadarbību projektos.
Varat izmantot semantisko HTML ar priekšgala bibliotēkām un ietvariem. Lielākā daļa mūsdienu tīmekļa pārlūkprogrammu dod priekšroku semantiskiem HTML elementiem, nevis tradicionālajiem elementiem. Sāciet izmantot semantisko HTML un skatieties, kā jūsu kods izskatās moderns, lasāms un reprezentabls.
