Gå til innhold

Hva er forskjellen mellom <div> og <span>

Mr. President™

Anbefalte innlegg

Videoannonse

Videoannonse
Annonse
Skagen

Skagen

Skrevet
Skrevet

Div er et generelt objekt/tag du kan putte så si hva som helst inni. Span derimot er kun en liten seksjon av en tekstlinje.

 

Eksempelvis kan du putte hele nettsiden din inni flere div-tagger for å få plassert den riktig. Men ønsker du eksempelvis at enkelte ord i en setning skal ha en spesiell skrifteffekt kan du bruke span.

 

Eksempel:

<html>
  <head>
  </head>
  <body>
     <div id="banner">
        Banner
     <div>
     <div id="content">
        Innholdet på nettsiden
     </div>
  </body>
</html>

 

<div class="tekst">
  <p>Her er litt tekst, og <span class="hidden">disse ordene</span> er skjult.</p>
</div>

Lenke til kommentar
Mr. President™

Mr. President™

Skrevet
  • Forfatter
Skrevet (endret)

Div er et generelt objekt/tag du kan putte så si hva som helst inni. Span derimot er kun en liten seksjon av en tekstlinje.

 

Eksempelvis kan du putte hele nettsiden din inni flere div-tagger for å få plassert den riktig. Men ønsker du eksempelvis at enkelte ord i en setning skal ha en spesiell skrifteffekt kan du bruke span.

 

Forstår ikke helt. Om jeg putter masse tekst i <div>, hva er forskjellen? Kan jeg ikke bare ha den åpen i <body>? Hvis jeg vil ha en spesiell skrifttekst kan jeg ikke bare bruke en direkte tag? Når du brukte den span tagen. Ble tekksten du skrev inne skjult?

Endret av xDestiny10x
Lenke til kommentar
Skagen

Skagen

Skrevet
Skrevet

La til noen eksempler i innlegget mitt over. Men HTML ønsker man å holde noenlunde semantisk, det vil si at taggene sier nettleseren din noe om hva innholdet i dem er. Lar du teksten bare flyte rett i body-taggen uten å bruke tagger, har du ingen semantikk i innholdet på nettsiden, og du vil fort støte på problemer når nettleserne skal vise siden korrekt.

 

Alle taggene i HTML er ment til sine bruk, og dermed er de semantisk (i varierende grad). A-taggen er anker/lenker, P-taggen er paragraf, osv. I HTML4 er div-taggen spesifisert som et blokk-element. Det vil si at den er ment å brukes til å stykke opp nettsiden din i seksjoner, slik som eksempelvis et banner på toppen, en meny på høyreside, og resten av innholdet på midten. Span derimot er spesifisert som et såkalt "inline"-element, et element som "ligger og flyter" der hvor det plasseres. Slike inline-elementer brukes vanligvis til å plassere elementer innimellom tekst, slik som A-taggen for lenker. Span ligner litt på A-taggen, men den produserer ikke en lenke. Den bare "strekker seg over" en mindre tekstbit.

  • Liker 1
Lenke til kommentar
Gjest

Gjest

Skrevet
Skrevet

Når du setter en attribute som ID til en DIV så kan du bruke denne ID-en for å få tilgang til denne div-en fra Javascript, jQuery eller CSS :)

Eksempel på dette med jQuery:

<!DOCTYPE html>
<html>
<head>
 <style>
 div {
   width: 90px;
   height: 90px;
   float:left;
   padding: 5px;
   margin: 5px;
   background-color: #EEEEEE;
 }
 </style>
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="notMe"><p>id="notMe"</p></div>

 <div id="myDiv">id="myDiv"</div>
<script>$("#myDiv").css("border","3px solid red");</script>
</body>
</html>

Det som skjer her er at jQuery får tilgang til myDiv via ID i DIV og kan endre CSS-en på den.

Lenke til kommentar
Skagen

Skagen

Skrevet
Skrevet

Det var et kjapt eksempel jeg fant på i farta, og heller ikke gyldig HTML engang.

 

Men tagger/elementer kan man gi en unik ID, og en eller flere klassenavn. IDen og klassenavnene du gir taggene/elementene kan du bruke til å eksempelvis gi dem bestemte stiler som du definerer i CSSen, eller å finne igjen bestemte elementer på nettsiden din med JavaScript. Grunnen til at du ikke så noen forskjell når du fjernet IDen er fordi det ikke er noe stilsett/CSS i eksemplet mitt. Da utgjør hverken IDen eller klassenavnene noen forskjell for utseende. Men det kan være lurt å gi viktige seksjoner på nettsiden din IDer slik at du lettere finner dem igjen i koden din, selv om de ikke brukes av CSS/stildeklarasjonen.

  • Liker 2
Lenke til kommentar
Skagen

Skagen

Skrevet
Skrevet

IDen er uten betydning for hvilken tag det er. IDen bare fungerer som en unik ID for elementet, hva det enn måtte være. I CSSen kan du putte f.eks:

 

#content {
  background-color: #a08080;
  color: #0040ff;
}

 

Så vil du kunne bestemme bakgrunnsfarge og tekstfarge på hvilket som helst element med ID "content". Alle andre elementer vil ikke få disse fargene, siden det kun kan eksistere ett element med "content" som ID. Vil du gi flere elementer samme utseende kan du bruke klassenavnene:

 

<div id="tag1" class="minKlasse">abc123</div>
<div id="tag2" class="minKlasse">qwerty</div>

Og så i CSSen:

.minKlasse {
  background-color: #a08080;
  color: #0040ff;
}

 

Merk at det her ikke tas hensyn til hvilket element det er. Vil du spesifisere at det skal være både en div-tag, og den må ha IDen "content", kan du skrive CSSen slik:

div#content { ... }

 

Eller om du har en paragraf som heter "paragraf1":

 

p#paragraf1 { ... }

Lenke til kommentar
Skagen

Skagen

Skrevet
Skrevet

Du kan bruke begge deler samtidig, om du har behov for det. Kunne like godt droppet IDene i det eksemplet, siden det ikke er noen stildeklarasjoner for de IDene i eksemplet. Men om HTML-koden hadde vært stor og komplisert kunne det vært hensiktmessig å ha ID i tillegg til klassenavnene slik at du enkelt finner igjen starten på taggene/elementene, eller at du bruker IDene til å finne igjen elementene med JavaScript.

 

PS. Et element kan kun ha én ID, og ingen elementer kan ha samme ID. F.eks to div-tagger med samme ID er ugyldig HTML. Men elementer kan ha samme klassenavn, og du kan ha flere klassenavn per. element adskilt med mellomrom:

 

<p class="paragraf blått ramme">Tekst</p>
<p class="paragraf ramme">Mer tekst</p>
<div class="blått">Noe her</div>
<a class="ramme blått" href="#">Lenke</a>

CSS:

.paragraf {
  color: #4080ff;
}

.blått {
  background-color: #ffff80;
}

.ramme {
  border-style: solid;
  border-width: 1px;
  border-color: #404040;
}

Lenke til kommentar
Skagen

Skagen

Skrevet
Skrevet

P-taggen brukte jeg kun som et eksempel at du kan bestemme om en stildeklarasjon kan brukes kun på ett bestemt type element, eller hva som helst:

 

Denne kan du bruke på hva som helst:

.klasseNavn { ... }

 

Denne fungerer kun på p-tagger:

p.klasseNavn { ... }

Lenke til kommentar
Mr. President™

Mr. President™

Skrevet
  • Forfatter
Skrevet

P-taggen brukte jeg kun som et eksempel at du kan bestemme om en stildeklarasjon kan brukes kun på ett bestemt type element, eller hva som helst:

 

Denne kan du bruke på hva som helst:

.klasseNavn { ... }

 

Denne fungerer kun på p-tagger:

p.klasseNavn { ... }

 

Åh, jeg forstår. Tusen Takk! :thumbup: Kommer tilbake med flere spørsmål om det er noe jeg ikke finner ut av. :hmm:

Lenke til kommentar
Mr. President™

Mr. President™

Skrevet
  • Forfatter
Skrevet (endret)

Jeg har gjort litt ting nå. Og lurer på hva jeg kan forberede. Fortell meg alt som kunne gjort denne bedre:

PS: Også hvordan jeg kan pynte den litt! :yes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Manchester United</title>
<style type="text/css">
	h1 {
			color: #FF0000;
	}
	.Tabell {
		Color: #FF0000;
	}
	#Lag1 {
			color: #FFD700;
	}
	#Lag2 { 
			color: #B8860B;
	}
	#Lag3 {
			color: 	#A52A2A;
	}
	.Lag {
			color: #556B2F;
}

</style>
</head>
<body bgcolor="Lightblue">
	<center><h1>Manchester United</h1></center>	
<div class="Tabell">Premier League Tabell Sesongen 09/10</div>								
	<div id="Lag1">1. Chelsea</div> 
	<div id="Lag2">2. Man Utd</div> 
	<div id="Lag3">3. Arsenal</div> 
	<div class="Lag">4. Tottenham</div>
	<div class="Lag">5. Man City</div>	
	<div class="Lag">6. Aston Villa</div>
	<div class="Lag">7. Liverpool</div>
	<div class="Lag">8. Everton</div>
	<div class="Lag">9. Birmingham</div>
	<div class="Lag">10. Blackburn</div>
	<div class="Lag">11. Stoke City</div>
	<div class="Lag">12. Fulham</div>
	<div class="Lag">13. Sunderland</div>
	<div class="Lag">14. Bolton</div>
	<div class="Lag">15. Wolves FC</div>
	<div class="Lag">16. Wigan</div>
	<div class="Lag">17. West Ham</div>
	<div class="Lag">18. Burnley</div>
	<div class="Lag">19. Hull City</div>
	<div class="Lag">20. Portsmouth</div>

</body>
</html>

Og hvordan kan jeg skrive inn for eksempel poeng på samme linje uten å skrive inn i den samme tagen jeg har skrevet lagets navnt i.

Endret av xDestiny10x
Lenke til kommentar
MikkelRev

MikkelRev

Skrevet
Skrevet (endret)

Bytt ut den listen din 

"<div class="Lag">17. Portsmouth</div>"

osv med ol og li: http://www.w3schools.com/TAGS/tag_ol.asp.

 

Kutt ut center-taggen. Den har gått ut på dato.

 

Hvis du vil ha nummer, lagnavn, poengsum og eventuell annen data på hver linje i den listen, så bruk istedet <table>.

 

Sluttheadtaggen din er usluttet.

 

En annen ting, på ditt nivå ville jeg aldri i verden brukt xhtml strict. Bytt ut til html transitional. Hvorfor? Fordi xhtml strict er mye vanskeligere å få validert.

Endret av MikkelRev
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...