Elementtyper - inline och block
Rent generellt kan man dela in de flesta element i två olika typer; inline- och block-element. I HTML5 har man visserligen delat upp elementen i flera kategorier än dessa. Dock är dessa två kategorierna de viktigaste att lära sig, då de är grunden till förståelse för hur webbläsaren behandlar de olika elementen.
Inline-element
Inline-element är element som inte bryter layout-flödet. Element av denna typ kan ligga inuti andra element. De förorsakar inte någon brytning, utan de lägger sig efter föreliggande inline-element.
Exempel på taggar som skapar inline-element är; <em>, <a>, osv. Om du vill visa att en textsnutt är extra viktigt kan du markera att det ska vara extra emfas på snutten. Detta kan du göra genom att använda em-taggen. Allt innehåll i det em-element som skapas kommer att visas lite annorlunda, för att särskilja det ifrån den vanliga texten. Ofta visas det som fet- eller kursivstil. Återigen så är denna tagg inte till för att styra utseende, utan för att markera att något är extra viktigt. Ett exempel på användningen:
Vi lägger alltså extra emfas på ”knyta skosnörena”. Detta är exempel på ett inline-element. Det påverkar varken layout eller textflödet på löptexten, utan ändrar bara lite på textens utseende.
Inline-element kan innehålla andra inline-element, de kan dock inte innehålla rena block-element.
Block-element
Den andra element-typen som är viktig är block-element. Dessa element bryter layout-flödet och presenterar element-innehållet som ett eget, separat block särskiljt ifrån övrigt innehåll. Ett exempel på detta kan vara ett p-element. Dessa startar på ny rad, fyller upp hela den tillgängliga bredden och lägger till en radbrytning efter sig (det är i alla fall default-beteendet, du kan påverka det så det beter sig annorlunda med hjälp av CSS). På så vis skapas ett block som markant skiljer sig ifrån kringliggande material. Denna typ av element är ett av de vanligast förekommande när vi skapar layout på våra sidor. Genom att styra block-elements egenskaper med CSS, kan vi åstadkomma alla möjliga typer av layout, såsom; kolumner, sidomaterial, flytande sidfötter, osv...
Bland de viktigaste egenskaperna vi kan styra i ett block-element är deras bredd och höjd. Vilket är en egenskap som skiljer dem ifrån inline-elementen.
Block-element kan innehålla såväl andra block-element som inline-element.
inline-block
Det finns faktiskt element som är både inline- och block-element samtidigt. Ett exempel på det är img-elementet, som vi använde oss av tidigare för att lägga till en bild. Dessa element ligger med i flödet och bryter det inte, samtidigt som elementet har en bredd och en höjd. Dessa så kallade ”inline-block”-element är väldigt användbara i vissa fall, som t.ex. när vi ska centrera något på ett enkelt vis.