XHTML:n tavallisimmat elementit

Seuraavissa taulukoissa on lyhyesti selitettynä tavallisimmat XHTML:n elementit (samat elementit löytyvät myös HTML5:sta). Lisäksi voit katsella esimerkkejä elementeistä.

Lohkotason elementit

ElementtiSeliteEngl.Tarkennus
h1Pääotsikkoheading 1ensimmäisen tason otsikko
h2Alaotsikkoheading 2toisen tason otsikko
h3Kolmannen tason otsikkoheading 3 
h4Neljännen tason otsikkoheading 4 
h5Viidennen tason otsikkoheading 5 
h6Kuudennen tason otsikkoheading 6 
pTekstikappaleparagraph 
ulJärjestämätön listaunordered listalkioissa yleensä listamerkit
olJärjestetty listaordered listalkioissa yleensä numerointi
liLista-alkiolist item 
preEsimuotoiltu tekstipreformattedmuotoillaan kuten lähdekoodissa
divYleinen lohkodivision 
addressTietoa sivuston ylläpitäjästä  
tableTaulukko 
captionTaulukon otsikko  
trTaulukon rivitable row 
thTaulukon otsikkosolutable header 
tdTaulukon tietosolutable data 

Tekstitason elementit

ElementtiSeliteEngl.Tarkennus
strongTärkeä ulkoasu riippuu selaimesta ja tyyleistä
emKorostusemphasisulkoasu riippuu selaimesta ja tyyleistä
aHyperlinkkianchorhref="osoite"
qViittausquotecite="osoite"
sampEsimerkkisample 
codeOhjelmakoodi  
imgKuvaimage
  • korvattava elementti
  • src="tiedoston nimi"
  • alt="vaihtoehtoinen teksti"
  • title="kuvan otsikko"
brPakotettu rivinvaihtobreak
  • korvattava elementti
  • älä käytä tyhjän tilan luomiseen
  • älä käytä normaalin kappaleen rivien vaihtoon

Dokumentin rakenteen ja rungon elementit

ElementtiSeliteTarkennus
htmlHTML-tekstin juurielementti
  • aina ensimmäinen elementti
  • xmlns="http://www.w3.org/1999/xhtml"
bodyNäkyvän tekstiosan runko 
headDokumentin otsikko- ja metatiedot 
titleDokumentin otsikko
linkViitteet muihin dokumentteihin
  • href="osoite" (esim. oma.css)
  • rel="viittauksen tyyppi" (esim. StyleSheet)
  • type="viitedokumentin mediatyyppi" (esim. text/css)

XHTML 1.0 Strict -dokumentin runko

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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="fi">
<head>
  <link href="malli.css" rel="StyleSheet" type="text/css" />
  <title>Sivustoa kuvaava otsikko</title>
</head>
<body>
  <h1>Dokumentin pääotsikko</h1>
  <p>Tähän tekstiä...</p>
</body>
</html>

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/doc/www/xhtml/
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
© Petri Heinonen Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2013-01-10 09:06:35
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta