Ne morate svaki put koristiti div oznake. Upotrijebite ove semantičke HTML oznake kako biste svoju web stranicu učinili strukturiranijom i pristupačnijom.
Prije uvođenja semantičkog HTML-a, programeri su koristili divove za raspoređivanje sadržaja. Div elementi sami po sebi nemaju značenje. Oni samo pružaju način primjene stilova i rasporeda sadržaja.
Riječ semantički znači koji se odnosi na značenje. Semantički HTML elementi opisuju svrhu svog sadržaja. Oni daju značenje programeru, korisniku, tražilicama i pomoćnim tehnologijama. Ovdje je popis popularnih semantičkih HTML oznaka koje možete koristiti u svom sljedećem projektu.
Što su divovi?
U HTML-u, element div (division) je spremnik na razini bloka. Div koristite za grupiranje ili dijeljenje HTML elemenata u odjeljke na web stranici. Sintaksa je kao što je prikazano u nastavku:
<div>
div>
Prednosti korištenja semantičkih HTML elemenata u odnosu na Divs
HTML5 je uveo semantičke HTML elemente kako bi olakšao čitanje koda. Semantički elementi daju značenje i strukturu web sadržaju.
Oni vaš kod čine razumljivim drugim programerima. Oni također olakšavaju tražilicama pronalaženje vašeg sadržaja i privlače promet na vašu stranicu. Evo nekih semantičkih elemenata koje možete koristiti u svom HTML i CSS projekti.
1.
The oznaka definira odjeljak zaglavlja na dokumentu. Obično sadrži logo stranice, navigaciju i naslov stranice. To je odjeljak koji se pojavljuje na vrhu web stranice. Zaglavlje možete prilagoditi svojim potrebama. Sintaksa je sljedeća:
<tijelo><Zaglavlje>
<h1> Bok tamo!h1>
<str>Ja sam zaglavljestr>
Zaglavlje>
tijelo>
2.
The oznaka sadrži navigacijske veze za web mjesto. To mogu biti izbornici, tablice sadržaja ili indeksi. Obično se postavlja unutar označiti. Sintaksa je sljedeća:
<Zaglavlje><nav>
<ul>
<li>Linkovi moje web straniceli>
<li><ahref="#"> Doma>li>
<li ><ahref="#"> O nama a>li>
ul>
nav>
<h1>Gore navedeno je navigacijski dio moje web stranice.h1>
Zaglavlje>
U pregledniku će izgledati ovako:
Možete koristiti CSS modele izgleda kao što su CSS flexbox uskladiti
3.
The oznaka sadrži glavni sadržaj web stranice. Odvaja sadržaj od zaglavlja, bočne trake i podnožja. Glavni predstavlja dominantni sadržaj odjeljak.
<tijelo><Zaglavlje>
<titula> Činjenice o web stranici titula>
Zaglavlje>
<glavni>
<str> Ova web stranica je kratka demonstracija rada glavne oznake.str>
<str> Okružuje dio web stranice s korisnim sadržajem.str>
glavni>
<podnožje>
<h3> Ovo je podnožje h3>
podnožje>
tijelo>
Čini se ovako:
4.
Koristiti oznaku za definiranje samostalnih odjeljaka u dokumentu ili web stranici. Na primjer, možete ih koristiti za strukturiranje postova na blogu, časopisa ili kartica proizvoda. The element može obuhvatiti druge elemente uključujući druge članke, odjeljke i naslove. Priloženi elementi trebaju se odnositi na temu članka.
<članak>
<h1>Čudnije od fikcijeh1><članak>
<h3>Uvodh3>
<str>Događaji i osobe o kojima se govori u ovoj knjizi su izmišljeni.str>
članak>
<članak>
<h3>Prvo poglavljeh3>
<str> Dan je bio vedar i sunce se smiješilo s nebastr>
članak>
članak>
Čini se ovako:
5.
The sadrži sadržaj povezan s glavnim sadržajem. Koristite ovu oznaku za stvaranje bočnih traka za citate, komentare ili pohvale. ističe informacije koje bi čitatelju mogle promaknuti. Ističe se od ostatka sadržaja.
html><html>
<stil>
tijelo{
boja pozadine:#abdbe3;
}
na stranu {
širina: 30%;
padding-lijevo: 0.5rem;
margina-lijevo: 1rem;
savijanje: lijevo;
box-shadow: umetak 5px 0 5px -5px zelena;
font-style: kurziv;
boja: crvena;
}
na stranu > p {
margina: 0,5rem;
stil>
<tijelo>
<glavni>
<h1> Weaver Birdsh1>
<str>Ploceidae je porodica malih ptica vrapčica. Mnogi od njih se nazivaju tkalci, ptice tkalje, zebe tkalje i biskupi.str>
<na stranu>
<str>Kraljevstvo: Animalia
Tip: Chordatastr>na stranu>
<str>U najnovijim klasifikacijama, Ploceidae je skupina, isključujući neke ptice koje su povijesno bile smještene u obitelj. Neki od vrabaca, ali uključuju monotipsku potporodicu Amblyospizinae.str>
glavni>
tijelo>
html>
6.
The element sadrži dio stranice bez specifičnog semantičkog elementa. Odjeljci mogu imati naslov za predstavljanje sadržaja i prilaganje drugih HTML elemenata. predstavlja komponente web stranice poput poglavlja u knjizi ili blogu.
html><html>
<tijelo>
<h1>Biblijah1>
<odjeljak>
<h2>Uvodh2>
<str>Biblija je zbirka vjerskih spisa svetih u kršćanstvu, judaizmu, samaritanstvu. Biblija je antologija – kompilacija tekstova različitih oblika – izvorno napisan na hebrejskom, aramejskom i koine grčkom.str>
odjeljak>
<odjeljak>
<h2>Prvo poglavlje: Postanakh2>
<str>Knjiga Postanka je prva knjiga hebrejske Biblije i kršćanskog Starog zavjeta. Hebrejski naziv mu je isti kao i prva riječ, Bereshit. Postanak je izvještaj o stvaranju svijeta, ranoj povijesti čovječanstva, te o precima Izraela i podrijetlu židovskog narodastr>
odjeljak>tijelo>
html>
Čini se ovako:
7.
The elementi zatvaraju samostalne ilustracije poput slika ili dijagrama. Ove ilustracije upućuju na sadržaj na glavnoj stranici. Slike dolaze s natpisima koje je odredio element. The objašnjava o čemu se radi na slici. The
html><html>
<tijelo>
<glavni>
<odjeljak>
<h1>Dijelovi računalah1>
<str> Nekoliko je dijelova koji zajedno čine računalostr>
<lik>
<imgsrc="neki-url.jpg"alt="kompjuterski miš">
<figcaption>Ovo je računalni mišfigcaption>
lik>
odjeljak>
glavni>
tijelo>
html>
Možete ići dalje i učiti kako stvoriti responzivne slike u HTML-u.
The HTML element obuhvaća informacije u donjem dijelu web stranice. To je suprotno od element. The može sadržavati podatke o vlasniku stranice. To uključuje podatke o autorskim pravima ili poveznice na dodatne informacije na stranici.
html><html>
<tijelo>
<glavni>
<odjeljak>
<h1>Dijelovi računalah1>
<lik>
<imgsrc="neki-url.jpg"alt="kompjuterski miš">
<figcaption>Ovo je računalni mišfigcaption>
lik>
odjeljak>
glavni>
<podnožje>
<str> Proizvođač ComputerTech © 2023str>
podnožje>
tijelo>
html>
Gornji kod dodaje podnožje u Dijelovi računala stranici kao što je prikazano na sljedećoj slici.
Zašto koristiti semantičke HTML elemente?
Korištenje semantičkih HTML elemenata daje kontekst kodu. Svatko tko pogleda kod mogao bi ga lako razumjeti. Oznake olakšavaju stiliziranje elemenata i suradnju na projektima.
Možete koristiti semantički HTML s bibliotekama i okvirima sučelja. Većina modernih web preglednika preferira semantičke HTML elemente u odnosu na tradicionalne elemente. Počnite koristiti semantički HTML i gledajte kako vaš kod izgleda moderno, čitljivo i prezentirano.