Referens
HTML div

HTML div

HTML div taggen anger en del av ett dokument.

Exempel:

Bakgrunden är grön.

HTML:

<div style="background-color:#009900">
Bakgrunden är grön.
</div>

Läs mer om HTML div i HTML grunder

HTML div
Elementtyp Sluttagg Utfasat Doctype
Blockelement Ja Nej Strict, Transitional, Frameset
Elementet får innehålla
Blockelement, inlineelement
Elementet får finnas i
applet, blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins, li, map, noframes, noscript, object, td, th
Skillnad mellan HTML och XHTML
Ingen

Tips för HTML div

Elementet div har vanligtvis en radbrytning före och efter elementet utan något inbyggt vertikalt utrymme. En div element utan innehåll visas alltså inte av webbläsaren.

En vanligt användningsområde för detta element är att bygga upp en sidas layout. Detta sätt att skapa en layout kallas boxmodellen.

Exempel:

Här är en division som är röd
Här är en division som är vit med bredden 50% som flyter till vänster
Här är en division som är gul med bredden 40% som också flyter till vänster
Här är division som är blå med bredden 150px som flyter till höger

HTML:

<div style="background:green; height:250px; width:200px;">
   <div style=" background:red;">
   Här är en division som är röd
   </div>
   <div style=" background:white; float:left; width:50%">
   Här är en division som är vit med bredden 50% som flyter till vänster
   </div>
   <div style="background:yellow; float:left; width:40%">
   Här är en division som är gul med bredden 40% som också flyter till vänster
   </div>
   <div style="background:blue; float:right; width:150px">
   Här är division som är blå med bredden 150px som flyter till höger
   </div>
</div>

Genom att ange höjd och bredd med hjälp av CSS så skapas sidans layout. Detta sätt ger fler möjligheter och är ett enklare sätt att bygga upp en webbsida än att använda sig av tabeller.

Läs mer om boxmodellen

HTML div attribut

Specifika attribut
Attribut Beskrivning Värde
align Anger horisontell justering av elementets innehåll. Utfasat attribut right, left, center, justify, char

Universella attribut
Attribut Beskrivning Värde
id Anger att elements unika identitet text
class Anger vilken klass eller vilka klasser ett element tillhör text
style Tilldelar elementet en egen visuell stil CSS attribut och värden
title Anger en titel för eller kort beskrivning av elementet text
dir Anger textriktning för innehållet rtl, ltr
lang Anger språk på elementets innehåll språkkod
xml:lang Används istället för "lang" när koden skrivs i XHTML 1.0 språkkod

Händelse attribut
Attribut Utlösande händelse Värde
onclick Enkelklick med musen på elementet javascript
ondblclick Dubbelklick med musen på elementet javascript
onkeydown En tangent trycks ned javascript
onkeyup En tangent släpps upp javascript
onkeypress En tangent trycks ned eller hålls nedtryckt javascript
onmousedown En musknapp trycks ned över elementet javascript
onmouseup En musknapp släpps upp över elementet javascript
onmouseover Muspekaren flyttas in över elementet javascript
onmousemove Muspekaren flyttas inom elementet javascript
onmouseout Muspekaren flyttas ut från elementet javascript
| Mer