HTML/Neutraalsed elemendid

Kui muu enam ei aita

HTML pakub elemente paljudeks puhkudeks, aga sugugi mitte kõigiks elujuhtumiteks. Aega-ajalt satume probleemi ette, kus sobilikku elementi lihtsalt pole. Sellised situatsioonil jaotuvad laias laastus kaheks:

• Esimesel juhul puudub meile vajalik piisavalt spetsiifiline element, küll on aga olemas üldisema tähendusega element. Näiteks pole HTML-is eraldi elementi veateadete jaoks - küll aga on olemas elemendid teksti rõhutamiseks, ning mis muu see veateade ikka on, kui üks rõhutatud tekst, mis kindlasti peab ümbritsevast selgesti esile tõusma. Sellisel juhul saame kasutada näiteks elementi strong ning lisada sellele error-nimelise klassi: <strong class="error">Sisestatud parool on vigane!</strong>.
• Teisel juhul puudub meil aga ka üldisema tähendusega element, mida võiksime klassi abil spetsiifilisemaks muuta. Siis tulevadki appi elemendid div ja span, mis mingit eeldefineeritud tähendust ei omagi. Samuti ei eristu nende sisu vaikimisi mitte millegi poolest neid ümbritsevast tekstist. div ja span on semantiliselt samaväärsed, erinevus on vaid see, et:
  • span on reatasandi element ning
  • div on blokitasandi element.

Näiteks puudub HTML-is eraldi element sissejuhatuse ülesmärkimiseks. Seega võime kasutada div koos klassiga intro, et sulgeda selle sisse sissejuhatus:

<div class="intro">
  <h2>Sissejuhatus</h2>
  <p>Esimene lõik...</p>
  <p>Teine lõik...</p>
</div>

Divitis ja classitis

div ja span elementide kasutamisega tuleb olla ettevaatlik, et mitte langeda divitis nimelise haiguse küüsi. nn divitis avaldub selles, et div ja/või span elemente kasutatakse ohjeldamatutes kogustes ning suuresti seal, kus oleks võimalik kasutada ka muid elemente. Divitis tuleb harilikult koos classitis nimelise haigusega, mis viitab massilisele klassinimede kasutamisele. Tüüpiline divitis/classitis näeb välja umbes selline:

<div class="suur-pealkiri">Tooted</div>

<div class="toodete-nimekiri">

  <div class="toode">
    <div class="pealkiri">AC-82</div>
    <div class="toote-omadus"><span class="tiitel">Mudel:</span> AC-82e2</div>
    <div class="toote-omadus"><span class="tiitel">Kaal:</span> 12Kg</div>
    <div class="toote-omadus"><span class="tiitel">Mõõtmed:</span> 320x180x50mm</div>
  </div>

  <div class="toode">
    <div class="pealkiri">AC-84</div>
    <div class="toote-omadus"><span class="tiitel">Mudel:</span> AC-84e6</div>
    <div class="toote-omadus"><span class="tiitel">Kaal:</span> 10Kg</div>
    <div class="toote-omadus"><span class="tiitel">Mõõtmed:</span> 300x200x50mm</div>
  </div>

</div>

Klassid pealkiri ja suur-pealkiri oleks mõistlik asendada h1 ja h2 elementidega. Toodete nimekiri ei kujuta endast midagi muud, kui ühte järjestamata loendit: seega ul ja li. Toote omadused aga moodustavad silt-väärtus paarid, mistõttu oleks sobilik kasutada definitsioonide loendit. Lõpptulemus võiks olla järgnev:

<h1>Tooted</h1>

<ul>

<li>
  <h2>AC-82</h2>
  <dl>
    <dt>Mudel:</dt>   <dd>AC-82e2</dd>
    <dt>Kaal:</dt>    <dd>12Kg</dd>
    <dt>Mõõtmed:</dt> <dd>320x180x50mm</dd>
  </dl>
</li>

<li>
  <h2>AC-84</h2>
  <dl>
    <dt>Mudel:</dt>   <dd>AC-84e6</dd>
    <dt>Kaal:</dt>    <dd>10Kg</dd>
    <dt>Mõõtmed:</dt> <dd>300x200x50mm</dd>
  </dl>
</li>

</ul>