Du trenger ikke bruke div-tagger hver gang. Bruk disse semantiske HTML-taggene for å gjøre nettstedet ditt mer strukturert og tilgjengelig.
Før introduksjonen av semantisk HTML brukte utviklere divs for å ordne innhold. Div-elementer har ingen mening alene. De gir bare en måte å bruke stiler og ordne innhold.
Ordet semantisk betyr knyttet til mening. Semantiske HTML-elementer beskriver formålet med innholdet. De gir mening til utvikleren, brukeren, søkemotorene og hjelpeteknologiene. Her er en liste over populære semantiske HTML-koder du kan bruke i ditt neste prosjekt.
Hva er Divs?
I HTML er div (divisjon)-elementet en beholder på blokknivå. Du bruker en div til å gruppere eller dele HTML-elementer inn i seksjoner på en nettside. Syntaksen er som vist nedenfor:
<div>
div>
Fordeler med å bruke semantiske HTML-elementer fremfor div
HTML5 introduserte semantiske HTML-elementer for å gjøre det lettere å lese kode. Semantiske elementer gir mening og struktur til nettinnhold.
De gjør koden din forståelig for andre utviklere. De gjør det også enklere for søkemotorer å finne innholdet ditt og lede trafikk til nettstedet ditt. Her er noen semantiske elementer du kan bruke i din
HTML- og CSS-prosjekter.1.
De taggen definerer overskriftsdelen på et dokument. Vanligvis inneholder den nettstedets logo, navigasjon og tittelen på siden. Det er delen som vises på toppen av en nettside. Du kan tilpasse overskriften etter ditt behov. Syntaksen er som følger:
<kropp><Overskrift>
<h1> Hei der!h1>
<s>Jeg er en headers>
Overskrift>
kropp>
2.
De taggen inneholder navigasjonslenker for nettstedet. Disse kan være menyer, innholdsfortegnelser eller indekser. Det er vanligvis plassert innenfor stikkord. Syntaksen er som følger:
<Overskrift><nav>
<ul>
<li>Min nettside linkerli>
<li><enhref="#"> Hjemen>li>
<li ><enhref="#"> Om oss en>li>
ul>
nav>
<h1>Ovennevnte er navigasjonsdelen av nettstedet mitt.h1>
Overskrift>
På nettleseren vil det se slik ut:
Du kan bruke CSS-layoutmodeller som f.eks CSS flexbox å justere
3.
De taggen inneholder hovedinnholdet på nettsiden. Den skiller innholdet fra toppteksten, sidefeltet og bunnteksten. Den viktigste representerer det dominerende innholdet i seksjon.
<kropp><Overskrift>
<tittel> Nettstedsfakta tittel>
Overskrift>
<hoved->
<s> Denne nettsiden er en kort demonstrasjon av hvordan hovedtaggen fungerer.s>
<s> Den omslutter den delen av nettstedet med nyttig innhold.s>
hoved->
<bunntekst>
<h3> Dette er en bunntekst h3>
bunntekst>
kropp>
Det ser slik ut:
4.
Bruke tag for å definere selvstendige deler i et dokument eller nettsted. Du kan for eksempel bruke dem til å strukturere blogginnlegg, magasiner eller produktkort. De element kan omslutte andre elementer, inkludert andre artikler, seksjoner og overskrifter. De vedlagte elementene skal relatere seg til artikkelens emne.
<artikkel>
<h1>Merkeligere enn fiksjonh1><artikkel>
<h3>Introduksjonh3>
<s>Hendelsene og personene som er omtalt i denne boken er fiktive.s>
artikkel>
<artikkel>
<h3>Kapittel enh3>
<s> Dagen var lys og solen smilte fra himmelens>
artikkel>
artikkel>
Det ser slik ut:
5.
De taggen inneholder innholdet relatert til hovedinnholdet. Bruk denne taggen til å lage sidefelt for sitater, kommentarer eller rop. fremhever informasjon som leseren kan gå glipp av. Det skiller seg ut fra resten av innholdet.
html><html>
<stil>
kropp{
bakgrunnsfarge:#abdbe3;
}
til side {
bredde: 30 %;
polstring-venstre: 0,5rem;
marg-venstre: 1rem;
flex: venstre;
box-shadow: innfelt 5px 0 5px -5px grønn;
skriftstil: kursiv;
fargen rød;
}
til side > p {
margin: 0,5 rem;
stil>
<kropp>
<hoved->
<h1> Veverfuglerh1>
<s>Ploceidae er en familie av små spurvefugler. Mange av dem kalles vevere, veverfugler, veverfinker og biskoper.s>
<til side>
<s>Rike: Animalia
Phylum: Chordatas>til side>
<s>I de siste klassifiseringene er Ploceidae en klede, utelukker noen fugler som historisk har blitt plassert i familien. Noen av spurvene, men inkluderer den monotypiske underfamilien Amblyospizinae.s>
hoved->
kropp>
html>
6.
De element inneholder en del av siden uten noe spesifikt semantisk element. Seksjoner kan ha en overskrift for å introdusere innholdet og omslutte andre HTML-elementer. representerer komponentene til en nettside som kapitler i en bok eller blogg.
html><html>
<kropp>
<h1>Bibelenh1>
<seksjon>
<h2>Introduksjonh2>
<s>Bibelen er en samling religiøse skrifter som er hellige i kristendommen, jødedommen, samaritanismen. Bibelen er en antologi – en samling av tekster av en rekke forskjellige former – opprinnelig skrevet på hebraisk, arameisk og koine-gresk.s>
seksjon>
<seksjon>
<h2>Kapittel én: 1. Mosebokh2>
<s>Første Mosebok er den første boken i den hebraiske bibelen og det kristne gamle testamente. Det hebraiske navnet er det samme som det første ordet, Bereshit. Første Mosebok er en beretning om skapelsen av verden, menneskehetens tidlige historie, og om Israels forfedre og opprinnelsen til det jødiske folkets>
seksjon>kropp>
html>
Det ser slik ut:
7.
De elementer lukket selvstendige illustrasjoner som bilder eller diagrammer. Disse illustrasjonene refererer til innholdet på hovedsiden. Figurene kommer med bildetekster spesifisert av element. De forklarer hva bildet handler om. De
html><html>
<kropp>
<hoved->
<seksjon>
<h1>Deler av en datamaskinh1>
<s> Det er flere deler som fungerer sammen for å lage en datamaskins>
<figur>
<imgsrc="some-url.jpg"alt="datamus">
<figcaption>Dette er en datamusfigcaption>
figur>
seksjon>
hoved->
kropp>
html>
Du kan gå lenger og lære hvordan lage responsive bilder i HTML.
De HTML-element omslutter informasjon nederst på nettsiden. Det er det motsatte av element. De kan inneholde informasjon om eieren av siden. Dette inkluderer opphavsrettsdata eller lenker til tilleggsinformasjon om nettstedet.
html><html>
<kropp>
<hoved->
<seksjon>
<h1>Deler av en datamaskinh1>
<figur>
<imgsrc="some-url.jpg"alt="datamus">
<figcaption>Dette er en datamusfigcaption>
figur>
seksjon>
hoved->
<bunntekst>
<s> Produsert av ComputerTech © 2023s>
bunntekst>
kropp>
html>
Koden ovenfor legger til en bunntekst til Deler av en datamaskin side som vist på bildet nedenfor.
Hvorfor bruke semantiske HTML-elementer?
Bruk av semantiske HTML-elementer gir kontekst til koden. Alle som ser på koden kan lett forstå den. Taggene gjør det enklere å style elementer og samarbeide om prosjekter.
Du kan bruke semantisk HTML med grensesnittbiblioteker og rammeverk. De fleste moderne nettlesere foretrekker semantiske HTML-elementer fremfor tradisjonelle elementer. Begynn å bruke semantisk HTML og se koden din se moderne, lesbar og presentabel ut.