Lektioner

Taggarna <div> och <span>

Ett mer flexibelt sätt att arbeta med CSS kan uppnås med ett par nya HTML-taggar, och två nya HTML-attribut. Taggarna heter <div> och <span>, attributen heter class och id.

<div>och span är taggar som egentligen inte gör något ensamma i sig själva, men som kan användas för att haka på attribut, vilka sedan kan påverka vad som än befinner sig mellan <div> och </div> eller mellan <span> och </span>. De absolut vanligaste attributen till <div> och <span> är id och class.

<div> (division=delning) och <span> skiljer båda ut delar av din HTML-kod så att den kan få särskilda egenskaper, men medan <div> bryter texten, så låter <span> texten prydligt flöda vidare. Man säger att <div> är en tagg på blocknivå (block-level), medan <span> är ett inline-element.

Det går alldeles utmärkt att placera en <div> i en annan <div>, en <span> i en <span>, eller en <span> i en <div>

<div> Hela den här texten är en del av samma div, <span>men bara den här delen ingår i en span</span> vilket inte detta gör </div>

<div> lägger alltså till en styckebrytning, vilket inte <span> gör. Vill du alltså lägga in någon av de två inuti ett stycke som inte skall brytas, skall du använda <span>, snarare än <div>.

Begreppen inline och block level

Vi kommer ofta stöta på begreppen inline och block level, blocknivå, när vi talar om olika HTML-element (taggar).

Alla HTML-element som kan visas på en webbsida har någon av dessa grundläggande egenskaper, med vissa variationer.

Om vi börjar med block level-, eller blocknivå-element så är detta taggar som ger ett nytt stycke.

Ett blocknivåelement kan användas till att göra en egen ruta eller block, med hjälp av CSS. <div> är block level, liksom <p>, eller <h1>.

Ett inlineelement, däremot bryter inte stycket (eller ens raden), och kommer alltså bete sig annorlunda när man använder det med CSS.

Man kan med CSS dessutom ändra på blocknivåelement, så att de visas som inline eller tvärt om, göra om ett inline-element till block. Detta utnyttjas till exempel när man vill byga en liggande meny av en lista.

Listpunkter (<li>) visas normalt som egna block, men genom att skriva CSS som säger att display: inline; kommer de att visas utan radbrytningar, efter varandra på samma rad tills raden tar slut.