Esimerkkejä XHTML:n peruselementeistä

• Lohkotason elementtejä
  • Otsikkoelementit - (h1 - h6)
  • Tekstikappale - p
• Erilaiset listat
  • Järjestämätön lista - ul
  • Järjestetty lista - ol
  • Sisäkkäiset listat
• Taulukot
• Korvattavat elementit
  • Kuva - img
• Tekstitason elementit

Kaikki tämän sivun esimerkkikoodit ovat myös validia HTML5:sta.

Lohkotason elementtejä

Otsikkoelementit - (h1 - h6)

<h1>Ensimmäisen tason otsikko</h1>
  <p>Tämä on tekstikappale</p>
<h2>Toisen tason otsikko</h2>
  <p>Tämä on tekstikappale</p>

Tekstikappale - p

<p>
  Tämä on tekstikappale
</p>
<p> Tämä on tekstikappale </p>

Erilaiset listat

Seuraavassa on esimerkkien avulla käsitelty järjestämätön ja järjestetty lista sekä määritelmälista.

Järjestämätön lista - ul

• Järjestämättömän listan ensimmäinen alkio
• Järjestämättömän listan toinen alkio
• Järjestämättömän listan kolmas alkio
• Järjestämättömän listan neljäs alkio

<ul>
  <li>Järjestämättömän listan ensimmäinen alkio</li>
  <li>Järjestämättömän listan toinen alkio</li>
  <li>Järjestämättömän listan kolmas alkio</li>
  <li>Järjestämättömän listan neljäs alkio</li>
</ul>

Järjestetty lista - ol

1. Järjestetyn listan ensimmäinen alkio
2. Järjestetyn listan toinen alkio
3. Järjestetyn listan kolmas alkio
4. Järjestetyn listan neljäs alkio

<ol>
  <li>Järjestetyn listan ensimmäinen alkio</li>
  <li>Järjestetyn listan toinen alkio</li>
  <li>Järjestetyn listan kolmas alkio</li>
  <li>Järjestetyn listan neljäs alkio</li>
</ol>

Sisäkkäiset listat

1. Järjestetyn listan ensimmäinen alkio
   • Järjestämättömän listan ensimmäinen alkio
   • Järjestämättömän listan toinen alkio
     1. Järjestetyn listan ensimmäinen alkio
     2. Järjestetyn listan toinen alkio
   • Järjestämättömän listan kolmas alkio
2. Järjestetyn listan toinen alkio
3. Järjestetyn listan kolmas alkio
   • Järjestämättömän listan ensimmäinen alkio
   • Järjestämättömän listan toinen alkio
   • Järjestämättömän listan kolmas alkio
     • Järjestämättömän listan ensimmäinen alkio
     • Järjestämättömän listan toinen alkio
   • Järjestämättömän listan neljäs alkio

<ol>
<li>Järjestetyn listan ensimmäinen alkio
<ul>
  <li>Järjestämättömän listan ensimmäinen alkio</li> 
  <li>Järjestämättömän listan toinen alkio
    <ol>
      <li>Järjestetyn listan ensimmäinen alkio</li>
      <li>Järjestetyn listan toinen alkio</li>
    </ol>
  </li>
  <li>Järjestämättömän listan kolmas alkio</li>
</ul> 
</li>
<li>Järjestetyn listan toinen alkio</li>
<li>Järjestetyn listan kolmas alkio
<ul>
  <li>Järjestämättömän listan ensimmäinen alkio</li> 
  <li>Järjestämättömän listan toinen alkio</li>
  <li>Järjestämättömän listan kolmas alkio
  <ul>
    <li>Järjestämättömän listan ensimmäinen alkio</li> 
    <li>Järjestämättömän listan toinen alkio</li>
  </ul>
  </li>
  <li>Järjestämättömän listan neljäs alkio</li>
</ul>
</li>
</ol>

Taulukot

• table-elementti muodostaa taulukon.
• tr-elementti aloittaa uuden rivin taulukossa.
• th-elementti määrittelee rivi- tai sarakeotsikon.
• td-elementti määrittelee taulukon solun.

Taulukoita rakennettaessa kannattaa huomata seuraavia asioita:

• Taulukkoon laitetaan ainoastaan taulukkomuodossa olevaa dataa.
• Taulukoilla ei saa taittaa!

Seuraavassa yksinkertainen esimerkki taulukosta, jossa on neljä riviä ja kaksi saraketta.

<table>
<caption>Taulukkoon liittyvä otsikko</caption>
<tr>
  <th>Esimmäisen sarakkeen otsikko</th>
  <th>Toisen sarakkeen otsikko</th>
</tr>
<tr>
  <td>1. rivin 1. solu</td>
  <td>1. rivin 2. solu</td>
</tr>
<tr>
  <td>2. rivin 1. solu</td>
  <td>2. rivin 2. solu</td>
</tr>
<tr>
  <td>3. rivin 1. solu</td>
  <td>3. rivin 2. solu</td>
</tr>
</table>

<table>
<tr>
   <th>Ensimmäisen sarakkeen otsikko</th>  <th>Toisen sarakkeen otsikko</th>  <th>Kolmannen sarakkeen otsikko</th>
</tr>
<tr>
   <td>1. rivin 1. solu</td>               <td>1. rivin 2. solu</td>          <td>1. rivin 3. solu</td>
</tr>
<tr>
   <td>2. rivin 1. solu</td>               <td>2. rivin 2. solu</td>          <td>2. rivin 3. solu</td>
</tr>
<tr>
   <td>3. rivin 1. solu</td>               <td>3. rivin 2. solu</td>          <td>3. rivin 3. solu</td>
</tr>
<tr>
   <td colspan="3">4. rivin 1. solu, joka laajenee kolmen sarakkeen alueelle</td>
</tr>
<tr>
   <td>5. rivin 1. solu</td>               <td rowspan="2">5. rivin 2. solu, joka laajenee kahdelle riville</td>          
   <td>5. rivin 3. solu</td>
</tr>
<tr>
   <td>6. rivin 1. solu</td>                                                 <td>6. rivin 3. solu</td>
</tr>
</table>

Korvattavat elementit

Korvattavat elementit eivät sisällä tekstiä tai muita elementtejä, vaan ne korvataan esim. kuvalla tai jollakin muulla objektilla.

Kuva - img

• src-attribuutin määrittelemä kuva ilmestyy img-elementin paikalle dokumenttiin.
• img-elementti pitää sijoittaa aina jonkin kappaletason elementin (p, li, div, jne.) sisään.
• img-elementille ei ole normaalia lopetuselementtiä, joten se pitää korvata lisäämällä aivan elementin loppuun välilyönti ja /-merkki.

Seuraavassa esimerkki img-elementin käytöstä.

<p>
<img src="rakenne.jpg" alt="Dokumentin rakenne puumaisena esityksenä" title="Dokumentin rakenne" />
</p>

Tekstitason elementit

• strong - erittäin tärkeät asiat
• em - tärkeät asiat

Tässä on pitkä kappale tekstiä, jossa jotkin sanat ovat tärkeitä ja toiset sanat ovat erittäin tärkeitä.

<p>
Tässä on pitkä kappale tekstiä, jossa jotkin sanat ovat <em>tärkeitä</em> ja toiset 
sanat ovat <strong>erittäin tärkeitä</strong>.
</p>