Html, elementformat grundkurs

Tillbaka till artiklar

Innehållsförteckning

En grundkurs i geometriska egenskaper hos html-element

I denna artikel kommer vi bara presentera grunderna i hur formaten fungerar och kort om hur de används.

Hur objekten bör användas och hur de fungerar hierarkiskt kommer vi presentera i en uppföljning till denna kurs vid ett senare tillfälle.

De olika formatens geometriska egenskaper

Flera modeller

Det finns ungefär 10 olika format som ett element kan ha, förutom de tre vi kommer behandla i denna artikel finns inline-block, list-item, run-in, compact och table.

De flesta av dessa är i princip totalt okända och flera av dem fungerar i princip inte i mer än en eller två webbläsare - så dessa bör användas sparsamt till dess att alla webbstandarder och webbläsare fungerar bättre ihop.

Block och inline

De enda som är intressanta i denna artikel är de två i särklass vanligaste, och det är block och inline.

display: block

h1-h6, p, div, form, fieldset, pre, ul m.fl.

Ett blockelement är som namnet får dig att gissa - ett block.
Om man inte har angett annat i sina stilmallar tar ett block upp 100% av den tillgängliga bredden - vilket gör att blocket hamnar under den html som finns innan blocket och ovanför den html som finns efter. Tumregeln är alltså att blockelement normalt hamnar på ny rad (mha lite stilmallstrolleri kan man dock ändra reglerna).

Det går därför inte att ha två blockelement bredvid varandra om man inte definierar om dem i en stilmall.

Många undrar t.ex. varför deras rubriker hamnar på egna rader. Det är alltså för att rubriker (h1-6-element) är blockelement och att de i standardutförande använder 100% bredd - vilket tvingar rubriken att bli ensam på sin rad.

Vad gör man då för att lösa det? Jo - man byter renderingsformat vilket vi beskriver senare i artikeln.

display: inline

a, span, br, em, input, select m.fl.

Inlineelement är faktiskt också fyrkantiga boxar, även om man för pedagogikens skull inte riktigt borde se dem på det sättet.

Om du skriver kod för tre inlineelement i en följd så kommer de hamna på samma rad förutsatt att de får plats i den ruta de befinner sig i. Om de inte får plats så fortsätter dessa element på rad två - precis som vi är vana med att text gör.

Den stora skillnaden mellan block och inline är alltså att inlineelementen försöker hamna i den miljö de har i koden. Gärna t.ex. mitt i texter. För oss alla är det naturligt med texter med länkar inuti - som inte på något sätt bryter textflödet. Detta är möjligt på grund av att länkarna är inlineobjekt - de hamnar i linje med texten.

Om länkarna hade haft display: block så hade varje länk hamnat på en egen rad, och hela textflödet hade vart förstört. Även bilder är inline trots att de oftast används som om de vore block. Bilder försöker hamna i den miljön koden finns i, t.ex. mitt i en text. Ibland blir det bra, ibland inte, därför får man ofta blanda in lite css.

display: none

Detta format är inte speciellt spännande egentligen, det gömmer helt enkelt ett element. Oavsett vilket format ditt element hade innan så försvinner det om du sätter display: none.

Till skillnad från visibility-attributet så blir elementet inte bara osynligt - utan den ytan som elementet tog upp blir nu tillgängligt för nästkommande element. Visiblity skapar endast ett visuellt tomrum där objektet befann sig.

Hur byter man format?

Formatet sätts med hjälp av displayattributet, vilket kan anges både inuti en stilmallsfil som direkt bland htmlkoden.

Alltså såhär



och att man sedan har en cssfil där man specificerar klassen:

Vad bestämmer formatet?

Det är dokumenttypen (DTD) som bestämmer vilket format htmlobjekten har. Denna artikel förutsätter att man använder ett strict-format vilket i regel passar in bra på HTML 4.01 Strict, XHTML 1.0 Strict och XHTML 1.1 Strict.

Vilka dokumenttyper som finns, hur man anger vilken man ska använda samt vilka som bestämmer över dem är för mycket för denna artikel vilket gör att vi tills vidare hänvisar till DTD-tutorial hos W3schools som i vanlig ordning har bra svar på alla webbrelaterade frågor.

Ps, om länken ovan hade varit ett block-element så hade stycket sett ut såhär:

Vilka dokumenttyper som finns, hur man anger vilken man ska använda samt vilka som bestämmer över dem är för mycket för denna artikel vilket gör att vi tills vidare hänvisar till
DTD-tutorial hos W3schools
som i vanlig ordning har bra svar på alla webbrelaterade frågor.

- Förutom den enda skillnaden att länken hade vart klickbar hela vägen ut till högerkanten. Just nu är inte länken ett blockelement, utan jag la det på en egen rad bara för att demonstrera den visuella effekten - inte den praktiska.
Get it? ;)

---

Gå till toppen