HTML/Neutraalsed elemendid
Kui muu enam ei aita
[muuda]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 selleleerror
-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
jaspan
on semantiliselt samaväärsed, erinevus on vaid see, et:span
on reatasandi element ningdiv
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
[muuda]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>