Ni vam treba vsakič uporabiti oznak div. Uporabite te semantične oznake HTML, da bo vaše spletno mesto bolj strukturirano in dostopno.
Pred uvedbo semantičnega HTML-ja so razvijalci uporabljali dive za urejanje vsebine. Elementi Div sami po sebi nimajo pomena. Omogočajo samo uporabo slogov in urejanje vsebine.
Beseda pomensko pomeni v zvezi s pomenom. Semantični elementi HTML opisujejo namen svoje vsebine. Zagotavljajo pomen za razvijalca, uporabnika, iskalnike in podporne tehnologije. Tukaj je seznam priljubljenih semantičnih oznak HTML, ki jih lahko uporabite v svojem naslednjem projektu.
Kaj so Divs?
V HTML je element div (division) vsebnik na ravni bloka. Div uporabite za združevanje ali razdelitev elementov HTML v razdelke na spletni strani. Sintaksa je prikazana spodaj:
<div>
div>
Prednosti uporabe semantičnih elementov HTML pred Divs
HTML5 je uvedel semantične elemente HTML za lažje branje kode. Semantični elementi dajejo spletni vsebini pomen in strukturo.
Vašo kodo naredijo razumljivo drugim razvijalcem. Prav tako iskalnikom olajšajo iskanje vaše vsebine in pritegnejo promet na vaše spletno mesto. Tukaj je nekaj pomenskih elementov, ki jih lahko uporabite v svojem
Projekti HTML in CSS.1.
The Tag definira razdelek glave v dokumentu. Običajno vsebuje logotip spletnega mesta, navigacijo in naslov strani. To je razdelek, ki se pojavi na vrhu spletne strani. Glavo lahko prilagodite svojim potrebam. Sintaksa je naslednja:
<telo><glava>
<h1> Zdravo!h1>
<str>Jaz sem glavastr>
glava>
telo>
2.
The vsebuje navigacijske povezave za spletno mesto. To so lahko meniji, kazala ali kazala. Običajno je nameščen znotraj oznaka. Sintaksa je naslednja:
<glava><nav>
<ul>
<li>Povezave moje spletne stranili>
<li><ahref="#"> domova>li>
<li ><ahref="#"> O nas a>li>
ul>
nav>
<h1>Zgoraj je navigacijski del moje spletne strani.h1>
glava>
V brskalniku bo videti takole:
Uporabite lahko modele postavitve CSS, kot je npr CSS flexbox uskladiti
3.
The vsebuje glavno vsebino spletne strani. Ločuje vsebino od glave, stranske vrstice in noge. Glavni predstavlja prevladujočo vsebino razdelek.
<telo><glava>
<naslov> Dejstva o spletnem mestu naslov>
glava>
<glavni>
<str> To spletno mesto je kratka predstavitev delovanja glavne oznake.str>
<str> Obsega del spletne strani z uporabnimi vsebinami.str>
glavni>
<noga>
<h3> To je noga h3>
noga>
telo>
Videti je takole:
4.
Uporabi oznako za definiranje samostojnih razdelkov v dokumentu ali spletnem mestu. Uporabite jih lahko na primer za strukturiranje objav v spletnih dnevnikih, revij ali kartic izdelkov. The element lahko obdaja druge elemente, vključno z drugimi članki, razdelki in naslovi. Priloženi elementi naj se nanašajo na temo članka.
<Članek>
<h1>Stranger Than Fictionh1><Članek>
<h3>Uvodh3>
<str>Dogodki in osebe, ki jih pripoveduje ta knjiga, so izmišljeni.str>
Članek>
<Članek>
<h3>Prvo poglavjeh3>
<str> Dan je bil svetel in sonce se je smehljalo z nebastr>
Članek>
Članek>
Videti je takole:
5.
The vsebuje vsebino, povezano z glavno vsebino. S to oznako ustvarite stranske vrstice za citate, komentarje ali pohvale. poudarja informacije, ki bi jih bralec lahko spregledal. Izstopa od ostale vsebine.
html><html>
<stil>
telo{
barva ozadja:#abdbe3;
}
na stran {
širina: 30 %;
oblazinjenje-levo: 0,5 rem;
rob-levo: 1rem;
upogib: levo;
box-shadow: vložek 5px 0 5px -5px zelena;
slog pisave: ležeče;
barva: rdeča;
}
na stran > p {
rob: 0,5rem;
stil>
<telo>
<glavni>
<h1> Weaver Birdsh1>
<str>Ploceidae so družina majhnih ptic pevcev. Mnogi od njih se imenujejo tkalci, tkalci, ščinkavci in škofi.str>
<na stran>
<str>Kraljestvo: Animalia
Tip: Chordatastr>na stran>
<str>V najnovejših klasifikacijah je Ploceidae klas, izključuje pa nekatere ptice, ki so bile zgodovinsko uvrščene v družino. Nekaj vrabcev, vendar vključuje monotipsko poddružino Amblyospizinae.str>
glavni>
telo>
html>
6.
The vsebuje del strani brez posebnega pomenskega elementa. Razdelki imajo lahko naslov za predstavitev vsebine in obdajajo druge elemente HTML. predstavlja komponente spletne strani, kot so poglavja v knjigi ali blogu.
html><html>
<telo>
<h1>Biblijah1>
<razdelek>
<h2>Uvodh2>
<str>Sveto pismo je zbirka svetih verskih spisov v krščanstvu, judovstvu in samaritanstvu. Sveto pismo je antologija – zbirka besedil različnih oblik – prvotno napisan v hebrejščini, aramejščini in grščini koine.str>
razdelek>
<razdelek>
<h2>Prvo poglavje: Genezah2>
<str>Prva Mojzesova knjiga je prva knjiga hebrejske Biblije in krščanske Stare zaveze. Njegovo hebrejsko ime je enako prvi besedi Bereshit. Geneza je poročilo o stvarjenju sveta, zgodnji zgodovini človeštva ter o prednikih Izraela in izvoru judovskega ljudstvastr>
razdelek>telo>
html>
Videti je takole:
7.
The elementi zapirajo samostojne ilustracije, kot so slike ali diagrami. Te ilustracije se nanašajo na vsebino na glavni strani. Številke imajo napise, ki jih določa element. The razloži, o čem govori slika. The
html><html>
<telo>
<glavni>
<razdelek>
<h1>Deli računalnikah1>
<str> Obstaja več delov, ki skupaj sestavljajo računalnikstr>
<slika>
<imgsrc="neki-url.jpg"alt="Računalniška miška">
<figcaption>To je računalniška miškafigcaption>
slika>
razdelek>
glavni>
telo>
html>
Lahko greš dlje in se učiš kako ustvariti odzivne slike v HTML.
The HTML element zajema informacije na spodnjem delu spletne strani. Je nasprotje od element. The lahko vsebuje podatke o lastniku strani. To vključuje podatke o avtorskih pravicah ali povezave do dodatnih informacij na spletnem mestu.
html><html>
<telo>
<glavni>
<razdelek>
<h1>Deli računalnikah1>
<slika>
<imgsrc="neki-url.jpg"alt="Računalniška miška">
<figcaption>To je računalniška miškafigcaption>
slika>
razdelek>
glavni>
<noga>
<str> Proizvajalec ComputerTech © 2023str>
noga>
telo>
html>
Zgornja koda doda nogo v Deli računalnika strani, kot je prikazano na naslednji sliki.
Zakaj uporabljati semantične elemente HTML?
Uporaba semantičnih elementov HTML daje kodi kontekst. Kdor koli pogleda kodo, jo zlahka razume. Oznake olajšajo oblikovanje elementov in sodelovanje pri projektih.
Semantični HTML lahko uporabljate s čelnimi knjižnicami in ogrodji. Večina sodobnih spletnih brskalnikov daje prednost semantičnim elementom HTML kot tradicionalnim elementom. Začnite uporabljati semantični HTML in pazite, da bo vaša koda videti moderna, berljiva in predstavljiva.