Du behöver inte använda div-taggar varje gång. Använd dessa semantiska HTML-taggar för att göra din webbplats mer strukturerad och tillgänglig.
Innan introduktionen av semantisk HTML använde utvecklare divs för att ordna innehåll. Div-element har ingen betydelse i sig. De ger bara ett sätt att tillämpa stilar och ordna innehåll.
Ordet semantisk betyder relaterar till mening. Semantiska HTML-element beskriver syftet med deras innehåll. De ger mening åt utvecklaren, användaren, sökmotorerna och hjälpmedelsteknikerna. Här är en lista över populära semantiska HTML-taggar som du kan använda i ditt nästa projekt.
Vad är Divs?
I HTML är elementet div (division) en behållare på blocknivå. Du använder en div för att gruppera eller dela upp HTML-element i sektioner på en webbsida. Syntaxen är som visas nedan:
<div>
div>
Fördelar med att använda semantiska HTML-element över Divs
HTML5 introducerade semantiska HTML-element för att göra det lättare att läsa kod. Semantiska element ger mening och struktur åt webbinnehåll.
De gör din kod begriplig för andra utvecklare. De gör det också lättare för sökmotorer att hitta ditt innehåll och leda trafik till din webbplats. Här är några semantiska element du kan använda i din HTML och CSS-projekt.
1.
De taggen definierar rubriken i ett dokument. Vanligtvis innehåller den webbplatsens logotyp, navigering och sidans titel. Det är avsnittet som visas överst på en webbsida. Du kan anpassa rubriken efter dina behov. Syntaxen är som följer:
<kropp><rubrik>
<h1> Hallå där!h1>
<sid>Jag är en headersid>
rubrik>
kropp>
2.
De taggen innehåller navigeringslänkarna för webbplatsen. Dessa kan vara menyer, innehållsförteckningar eller index. Det är vanligtvis placerat inom märka. Syntaxen är som följer:
<rubrik><nav>
<ul>
<li>Min hemsida länkarli>
<li><ahref="#"> Hema>li>
<li ><ahref="#"> Om oss a>li>
ul>
nav>
<h1>Ovanstående är navigeringsdelen av min hemsida.h1>
rubrik>
I webbläsaren kommer det att se ut så här:
Du kan använda CSS-layoutmodeller som t.ex CSS flexbox för att anpassa
3.
De taggen innehåller huvudinnehållet på webbsidan. Den separerar innehållet från sidhuvudet, sidofältet och sidfoten. Den huvudsakliga representerar det dominerande innehållet i sektion.
<kropp><rubrik>
<titel> Webbplats fakta titel>
rubrik>
<huvud>
<sid> Denna webbplats är en kort demonstration av hur huvudtaggen fungerar.sid>
<sid> Den omsluter den del av webbplatsen med användbart innehåll.sid>
huvud>
<sidfot>
<h3> Det här är en sidfot h3>
sidfot>
kropp>
Det ser ut så här:
4.
Använd tagg för att definiera fristående avsnitt i ett dokument eller en webbplats. Du kan till exempel använda dem för att strukturera blogginlägg, tidningar eller produktkort. De element kan innehålla andra element inklusive andra artiklar, avsnitt och rubriker. De bifogade delarna bör relatera till artikelns ämne.
<artikel>
<h1>Underligare än fiktionh1><artikel>
<h3>Introduktionh3>
<sid>Händelserna och personerna i den här boken är fiktiva.sid>
artikel>
<artikel>
<h3>Kapitel etth3>
<sid> Dagen var ljus och solen log från himlensid>
artikel>
artikel>
Det ser ut så här:
5.
De taggen innehåller innehållet relaterat till huvudinnehållet. Använd den här taggen för att skapa sidofält för citat, kommentarer eller shout-outs. lyfter fram information som läsaren kan missa. Det sticker ut från resten av innehållet.
html><html>
<stil>
kropp{
bakgrundsfärg:#abdbe3;
}
åt sidan {
bredd: 30%;
stoppning-vänster: 0,5rem;
marginal-vänster: 1rem;
flex: vänster;
box-shadow: infälld 5px 0 5px -5px grön;
teckensnittsstil: kursiv;
färgen röd;
}
åt sidan > p {
marginal: 0,5 rem;
stil>
<kropp>
<huvud>
<h1> Weaver Birdsh1>
<sid>Ploceidae är en familj av små passerinfåglar. Många av dem kallas vävare, vävfåglar, vävfinkar och biskopar.sid>
<åt sidan>
<sid>Kungariket: Animalia
Filum: Chordatasid>åt sidan>
<sid>I de senaste klassificeringarna är Ploceidae en clade, utesluter vissa fåglar som historiskt har placerats i familjen. Några av sparvarna, men inkluderar den monotypiska underfamiljen Amblyospizinae.sid>
huvud>
kropp>
html>
6.
De element innehåller en del av sidan utan något specifikt semantiskt element. Avsnitt kan ha en rubrik för att introducera innehållet och omsluta andra HTML-element. representerar komponenterna i en webbsida som kapitel i en bok eller blogg.
html><html>
<kropp>
<h1>Bibelnh1>
<sektion>
<h2>Introduktionh2>
<sid>Bibeln är en samling religiösa skrifter som är heliga inom kristendomen, judendomen, samaritanismen. Bibeln är en antologi – en sammanställning av texter i olika former – ursprungligen skriven på hebreiska, arameiska och koine-grekiska.sid>
sektion>
<sektion>
<h2>Kapitel ett: Genesish2>
<sid>Första Moseboken är den första boken i den hebreiska bibeln och det kristna Gamla testamentet. Dess hebreiska namn är detsamma som dess första ord, Bereshit. Genesis är en redogörelse för världens skapelse, mänsklighetens tidiga historia och Israels förfäder och det judiska folkets ursprungsid>
sektion>kropp>
html>
Det ser ut så här:
7.
De element slutna illustrationer som bilder eller diagram. Dessa illustrationer refererar till innehållet på huvudsidan. Figurerna kommer med bildtexter specificerade av element. De förklarar vad bilden handlar om. De
html><html>
<kropp>
<huvud>
<sektion>
<h1>Delar av en datorh1>
<sid> Det finns flera delar som samverkar för att skapa en datorsid>
<figur>
<imgsrc="some-url.jpg"alt="data mus">
<figcaption>Detta är en datormusfigcaption>
figur>
sektion>
huvud>
kropp>
html>
Du kan gå längre och lära dig hur man skapar responsiva bilder i HTML.
De HTML-element omsluter information längst ned på webbsidan. Det är motsatsen till element. De kan innehålla information om sidans ägare. Detta inkluderar upphovsrättsinformation eller länkar till ytterligare information om webbplatsen.
html><html>
<kropp>
<huvud>
<sektion>
<h1>Delar av en datorh1>
<figur>
<imgsrc="some-url.jpg"alt="data mus">
<figcaption>Detta är en datormusfigcaption>
figur>
sektion>
huvud>
<sidfot>
<sid> Tillverkad av ComputerTech © 2023sid>
sidfot>
kropp>
html>
Ovanstående kod lägger till en sidfot till Delar av en dator sida som visas i följande bild.
Varför använda semantiska HTML-element?
Att använda semantiska HTML-element ger kontext till koden. Den som tittar på koden kan lätt förstå den. Taggarna gör det lättare att styla element och samarbeta i projekt.
Du kan använda semantisk HTML med frontendbibliotek och ramverk. De flesta moderna webbläsare föredrar semantiska HTML-element framför traditionella element. Börja använda semantisk HTML och se hur din kod ser modern, läsbar och presentabel ut.
