Skillnaden mellan block och inline-element

2024 Författare: Alex Aldridge | [email protected]. Senast ändrad: 2023-12-17 13:50

Key Difference – Block vs Inline Elements

HTML står för Hyper Text Markup Language. Det används för att skapa webbsidor. Varje webbsida är kopplad till andra webbsidor med hjälp av hyperlänkar. Detta språk består av taggar. En tagg är innesluten i vinkelhängslen. Syntaxen liknar. De flesta taggar har också en avslutande tagg. När är en tagg, är den avslutande taggen. Vissa taggar har ingen avslutande tagg. Exempel på en sådan tagg är

och

De är kända som void-taggar. Ett HTML-element är en komponent i HTML-dokumentet eller webbsidan efter att det har analyserats till Document Object Model (DOM). DOM är en intern representation i webbläsaren. Den representerar varje dokument i en trädstruktur. I webbläsaren kan de visningsbara elementen antingen vara ett blockelement eller ett inlineelement. Blockelement har en rektangulär struktur. Inline-elementen kan bäddas in i blockelement. Den viktigaste skillnaden mellan blocket och inline-elementet är att blockelementen tar upp hela den tillgängliga bredden medan de inline-elementen tar den nödvändiga bredden för att visa innehållet i elementen.

Vad är blockelement?

Blockelement tar den tillgängliga fulla bredden. Dessa element börjar alltid med en ny rad. Några exempel på blockelement är följande.

används för att definiera ett stycke. t.ex.

Detta är ett stycke

. Det finns sex taggar för att definiera rubriker. De är

,

,

…

. Programmeraren kan använda rubriken i enlighet därmed.

Den beställda listan definieras av

medan den oordnade listan definieras av

. Den används för att visa en horisontell linje över webbsidan.

används för att ordna data i ett tabellformat. För varje webbplats krävs att man samlar in data från besökarna. HTML-formulär används för att hämta data från användaren. Det är också ett element på blocknivå. Det är några exempel på blockelement i HTML.

Vad är inline-element?

Inline-element tar bara den önskade bredden. Dessa element börjar inte med en ny rad. Några exempel på inline-element är följande. används för att skapa länkar från en sida till en annan. Hyperlänkar är ett av de viktigaste delarna i HTML. Den kan innehålla href-attributet för att skapa en länk till destinationen. t.ex. Besök Google. Målattributet är tomt. Därför kommer det nya dokumentet att öppnas i ett nytt fönster. Om målattributet är "_self", kommer det länkade dokumentet att öppnas i samma fönster.

Figur 01: Exempel på block- och inlineelement

används för att feta ett avsnitt av text. Taggen ska göra texten kursiv. En webbsida ska vara presentabel. Därför består varje webbsida av flera bilder.

används för att visa en bild på sidan. Den här taggen kräver två attribut. De är src och alt. "Src" beskriver platsen för bilden och " alt" beskriver vad bilden handlar om. t.ex.. Det här är några exempel på inline-element.

Vad är likheten mellan block- och inline-element?

Block- och inline-element används som behållare i HTML

Vad är skillnaden mellan block- och inline-element?

Block vs Inline Elements
Blockelementen är de element som spänner över hela bredden av det överordnade elementet och tillåter inte något annat element att uppta samma horisontella utrymme som det är placerat på.	De inline-elementen är de element som inte kan placeras direkt inuti body-elementet och som är kapslade i blockelement.
New Line
Blockelement börjar med en ny rad.	Inline-element börjar inte med en ny rad.
Nödvändigt utrymme
Blockelementen tar hela bredden.	De inline-elementen tar bara den önskade bredden.

Sammanfattning – Block vs Inline Elements

HTML står för Hyper Text Markup language. Det är ett språk som består av taggar. Varje tagg har en specifik uppgift och definierar hur webbsidan ska struktureras. Vissa taggar har starttaggen och sluttaggen. Vissa taggar har ingen sluttagg. De kallas void-taggar. Parsing är processen för syntaxanalys. Efter analyssteget blir dessa taggar element. Element kan vara element på blocknivå eller inline-element. Skillnaden mellan block och inline-element är att blockelementen tar upp hela den tillgängliga bredden medan de inline-elementen tar den nödvändiga bredden för att visa innehållet i elementen.

Ladda ner PDF-versionen av Block vs Inline Elements

Du kan ladda ner PDF-versionen av den här artikeln och använda den för offlineändamål enligt citat. Ladda ner PDF-versionen här: Difference Between Block and Inline elements