Ved at bruge denne side acceptere du samtidig Brugbarts og vores partneres brug af cookies.

Læs mere

Brugen af div og span

Hvordan man bruger span og div til at strukturere sider.

Redigeret: 2015-05-10 08:26

HTML living stadard logo anden orange udgave.

div og span elementerne, bruges blandt andet til at strukturere sider, ofte for at gøre dem nemmere at styre med CSS.

div står for division, oversat til Dansk vil det betyde "opdeling", fordi den opdeler en side i små sektioner der er nemme at stile.

span bruges steder hvor der ikke er andre elementer der giver mening, eksempelvis for at skifte farve på dele af en tekst, uden at du skifter farve på hele teksten.

Brugen af div

I følge standarden skal div kun bruges, hvor der ikke er andre elementer lavet specifikt til formålet. I praksis kan man anvende div til mange forskellige formål, men man bør altså ikke erstatte brugen af andre elementer, eksempelvis Paragraffer og Overskrifter.

div bliver hovedsaligt brugt til at strukturere sider, eksempelvis til at opdele en side i flere kolonner. Et eksempel der gør nettop det, vises nedenfor:

<!DOCTYPE html>
<html lang="da">

  <head>
    <title>Hvordan man bruger div til design</title>
  </head>

  <body>
   <div id="Indhold">
    <p>Sådan anvendes div til at designe sider med</p>
   </div>

   <div id="Menu">
    <ol>
     <li><a href="/">Privat Poltik</li>
     <li><a href="/">Om Brugbart</li>
    </ol>
   </div>
  </body>

</html>

Design af hjemmeside med div

Når man bruger div som vist ovenfor - uden at tilføje nogle CSS angivelser - vil der ikke ske noget med udseendet af siden. For at placere vores div bokse ved siden af hinanden skal vi bruge CSS.

Som nævnt i vores berømte Introduktion Til CSS, kan det gøres på flere måder. I det her eksempel vil vi bruge Embedded Styles, som er sat ind direkte i head sektionen af siden - ved brug af et style element.

<!DOCTYPE html>
<html lang="da">

  <head>
    <title>Hvordan man bruger div til design</title>  
    <style type="text/css">
     #Indhold {
      width: 50%;
      float: left;
     }
     #Menu {
      width: 48%;
      float: left;
     }
    </style>

  </head>

  <body>
   <div id="Indhold">
    <p>Sådan anvendes div til at designe sider med</p>
   </div>

   <div id="Menu">
    <ol>
     <li><a href="/">Privat Poltik</li>
     <li><a href="/">Om Brugbart</li>
    </ol>
   </div>
  </body>

</html>

I ovenstående eksempel bruger vi nummer symbolet (#) til at henvise til, eller "vælge" elementerne med et unikt id på siden.

det er ikke påkrævet at bruge id'er, men det kan gøre det noget nemmere at designe en side.

De egenskaber vi benytter er width og float. Width angiver bredden på elementerne, imens float får dem til at "flyde", til venstre eller højre i stedet for at blive placeret under hinanden som normalt.

Brugen af span

Span bliver som sagt brugt til at ændre dele af tekst - eksempelvis: skrifttype, skrift-størrelse, farve, osv - stort set alle de karaktertræk der kan ændres i CSS. Et eksempel kan ses nedenfor, hvor ordet CSS er fremhævet med en fed skrift.

<!DOCTYPE html>
<html lang="da">

  <head>
    <title>Hvordan man bruger span til design</title>
    <style type="text/css">
    .FedSkrift {
     font-weight: bold;
    }
    </style>  
  </head>

  <body>

    <p>Udsendet af span kan styres med <span class="FedSkrift">CSS</span></p>

  </body>

</html>

I ovenstående eksempel brugte vi en klasse "class" i stedet for et id. Forskellen på klasser og ids, er at id'er ikke må optræde flere steder på samme side.

ID og Klasser i HTML og CSS - Farver og Design