Du behøver ikke bruge div-tags hver gang. Brug disse semantiske HTML-tags til at gøre dit websted mere struktureret og tilgængeligt.
Før introduktionen af semantisk HTML brugte udviklere divs til at arrangere indhold. Div-elementer har ingen betydning i sig selv. De giver kun en måde at anvende stilarter og arrangere indhold på.
Ordet semantisk betyder forholder sig til mening. Semantiske HTML-elementer beskriver formålet med deres indhold. De giver mening til udvikleren, brugeren, søgemaskinerne og hjælpeteknologierne. Her er en liste over populære semantiske HTML-tags, du kan bruge i dit næste projekt.
Hvad er Divs?
I HTML er div-elementet (division) en beholder på blokniveau. Du bruger en div til at gruppere eller opdele HTML-elementer i sektioner på en webside. Syntaksen er som vist nedenfor:
<div>
div>
Fordele ved at bruge semantiske HTML-elementer i forhold til Divs
HTML5 introducerede semantiske HTML-elementer for at gøre det nemmere at læse kode. Semantiske elementer giver mening og struktur til webindhold.
De gør din kode forståelig for andre udviklere. De gør det også nemmere for søgemaskiner at finde dit indhold og drive trafik til dit websted. Her er nogle semantiske elementer, du kan bruge i din HTML og CSS projekter.
1.
Det tag definerer overskriftssektionen på et dokument. Typisk indeholder det webstedets logo, navigation og titlen på siden. Det er den sektion, der vises øverst på en webside. Du kan tilpasse headeren efter dit behov. Syntaksen er som følger:
<legeme><header>
<h1> Hej!h1>
<s>Jeg er en headers>
header>
legeme>
2.
Det tag indeholder navigationslinks til webstedet. Disse kan være menuer, indholdsfortegnelser eller indekser. Det er normalt placeret inden for tag. Syntaksen er som følger:
<header><nav>
<ul>
<li>Min hjemmeside linksli>
<li><-enhref="#"> Hjem-en>li>
<li ><-enhref="#"> Om os -en>li>
ul>
nav>
<h1>Ovenstående er navigationsdel af min hjemmeside.h1>
header>
På browseren vil det se sådan ud:
Du kan bruge CSS layout modeller som f.eks CSS flexbox at justere
3.
Det tag indeholder hovedindholdet på websiden. Det adskiller indholdet fra sidehovedet, sidebjælken og sidefoden. Den vigtigste repræsenterer det dominerende indhold af afsnit.
<legeme><header>
<titel> Hjemmeside fakta titel>
header>
<vigtigste>
<s> Denne hjemmeside er en kort demonstration af, hvordan hovedtagget fungerer.s>
<s> Den omslutter den del af hjemmesiden med nyttigt indhold.s>
vigtigste>
<sidefod>
<h3> Dette er en sidefod h3>
sidefod>
legeme>
Det ser sådan ud:
4.
Brug tag til at definere selvstændige sektioner i et dokument eller websted. Du kan for eksempel bruge dem til at strukturere blogindlæg, magasiner eller produktkort. Det element kan omfatte andre elementer inklusive andre artikler, sektioner og overskrifter. De vedlagte elementer skal relatere til artiklens emne.
<artikel>
<h1>Fremmed end fiktionh1><artikel>
<h3>Introduktionh3>
<s>Begivenhederne og personerne i denne bog er fiktive.s>
artikel>
<artikel>
<h3>Kapitel eth3>
<s> Dagen var lys og solen smilede fra himlens>
artikel>
artikel>
Det ser sådan ud:
5.
Det tag indeholder indholdet relateret til hovedindholdet. Brug dette tag til at oprette sidebjælker til citater, kommentarer eller shout-outs. fremhæver information, som læseren kan gå glip af. Det skiller sig ud fra resten af indholdet.
html><html>
<stil>
legeme{
baggrundsfarve:#abdbe3;
}
til side {
bredde: 30%;
polstring-venstre: 0,5rem;
margin-venstre: 1rem;
flex: venstre;
box-shadow: indsat 5px 0 5px -5px grøn;
skrifttype: kursiv;
farve: rød;
}
til side > p {
margin: 0,5 rem;
stil>
<legeme>
<vigtigste>
<h1> Væver fugleh1>
<s>Ploceidae er en familie af små spurvefugle. Mange af dem kaldes vævere, væverfugle, vævfinker og biskopper.s>
<til side>
<s>Kongerige: Animalia
Fylde: Chordatas>til side>
<s>I de seneste klassifikationer er Ploceidae en klade, udelukker nogle fugle, der historisk har været placeret i familien. Nogle af spurvene, men omfatter den monotypiske underfamilie Amblyospizinae.s>
vigtigste>
legeme>
html>
6.
Det element indeholder en del af siden uden noget specifikt semantisk element. Sektioner kan have en overskrift for at introducere indholdet og omslutte andre HTML-elementer. repræsenterer komponenterne på en webside som kapitler i en bog eller blog.
html><html>
<legeme>
<h1>Biblenh1>
<afsnit>
<h2>Introduktionh2>
<s>Bibelen er en samling af religiøse skrifter, der er hellige i kristendommen, jødedommen, samaritanismen. Bibelen er en antologi – en samling af tekster i forskellige former – oprindeligt skrevet på hebraisk, aramæisk og koine-græsk.s>
afsnit>
<afsnit>
<h2>Kapitel 1: Første Mosebogh2>
<s>Første Mosebog er den første bog i den hebraiske bibel og det kristne Gamle Testamente. Dets hebraiske navn er det samme som dets første ord, Bereshit. Første Mosebog er en beretning om skabelsen af verden, menneskehedens tidlige historie og om Israels forfædre og det jødiske folks oprindelses>
afsnit>legeme>
html>
Det ser sådan ud:
7.
Det elementer lukker selvstændige illustrationer som billeder eller diagrammer. Disse illustrationer henviser til indholdet på hovedsiden. Figurerne kommer med billedtekster specificeret af element. Det forklarer, hvad billedet handler om. Det
html><html>
<legeme>
<vigtigste>
<afsnit>
<h1>Dele af en computerh1>
<s> Der er flere dele, der arbejder sammen for at udgøre en computers>
<figur>
<imgsrc="some-url.jpg"alt="computermus">
<figcaption>Dette er en computermusfigcaption>
figur>
afsnit>
vigtigste>
legeme>
html>
Du kan gå videre og lære hvordan man laver responsive billeder i HTML.
Det HTML-element omslutter information nederst på websiden. Det er det modsatte af element. Det kan indeholde oplysninger om ejeren af siden. Dette inkluderer ophavsretlige data eller links til yderligere oplysninger om webstedet.
html><html>
<legeme>
<vigtigste>
<afsnit>
<h1>Dele af en computerh1>
<figur>
<imgsrc="some-url.jpg"alt="computermus">
<figcaption>Dette er en computermusfigcaption>
figur>
afsnit>
vigtigste>
<sidefod>
<s> Fremstillet af ComputerTech © 2023s>
sidefod>
legeme>
html>
Ovenstående kode tilføjer en sidefod til Dele af en computer side som vist på det følgende billede.
Hvorfor bruge semantiske HTML-elementer?
Brug af semantiske HTML-elementer giver kontekst til koden. Enhver, der kigger på koden, kan nemt forstå den. Mærkerne gør det nemmere at style elementer og samarbejde om projekter.
Du kan bruge semantisk HTML med frontend-biblioteker og rammer. De fleste moderne webbrowsere foretrækker semantiske HTML-elementer frem for traditionelle elementer. Begynd at bruge semantisk HTML, og se din kode se moderne, læsbar og præsentabel ud.
