Üksikuid sõnu või terveid lõike saab väga lihtsalt kaldkirjas ja paksult märkida. Alustuseks käsitleme paksult märkimise varianti. Selle jaoks on põhimõtteliselt saadaval kaks HTML-elementi - b ja strong.
Tere tulemast <b>PSD-Tutorials.de</b>! <br /> Tere tulemast <strong>PSD-Tutorials.de</strong>!
Vaade tulemusele brauseris annab järgmise pildi:
Ilmselgelt tagavad mõlemad elemendid identse kuvamise. Miks on siiski olemas kaks erinevat elementi? Tegelikult on veebilehtedel muudki kuvamisviisi peale tuntud standardbrauseri omade. Näiteks võib mõelda pimedate inimeste lugejatele või mobiilsetele seadmetele. W3C pakutavad HTML-elemendid on mõeldud semantika toetamiseks. Seega ei tähenda b-element enam, et midagi tuleks esile tõsta paksult. Pigem tähendab b nähtavalt esile tõstetud teksti, mis ei oma suurenenud tähtsust. See võiks olla näiteks tootenimetus või võtmesõnad dokumentides.
strong-element on seni seisnud tugevama rõhu eest. em on seevastu kasutatud rõhutatud, olulise teksti (emfaatiline) jaoks. strong on varem HTML-versioonides emi suurendus olnud. Mõlemale elemendile omistatakse HTML5-s erinev tähendus.
Alustuseks tekst tavalise rõhuga.
<p> Kassid on armasad loomad. </p>
Nüüd veelkord sama tekst, kuid seekord on rõhk esimesel sõnal.
<p> <em>Kassid</em> on armasad loomad. </p>
Kasutades emi, pannakse rõhk sõnale Kassid. Võib ette kujutada seda diskussioonis, kus arutletakse, kas koerad või kassid on armsamad.
Nüüd võiks antud näites em-elementi rakendada ka sõna on.
<p> Kassid <em>on </em> armasad loomad. </p>
See võiks olla vastus diskussioonis, kus keegi väidab, et kassid ei ole üldse armsad.
Tegelikult kuvatakse emiga märgistatud lõiked brauseris kaldkirjas. Sama visuaalse efekti saavutab i-element.
HTML5 tööversiooni kohaselt ei tähenda nüüd i-element enam kaldkirja.
<p> Tere tulemast <i>PSD-Tutorials.de</i> </p>
Pigem tähistab see element nüüd seda, et selle abil soovitakse edastada muud meeleolu. Näiteks on i-element huvitav tehniliste väljendite või taksonoomiliste nimetuste märkimisel.
Kõik see on üpris teoreetiline, ma tean. Põhimõtteliselt peaksite järgima HTML5-suuniseid. Teisest küljest ei kukuks ilmselt keegi teile pähe, kui kasutate strong asemel b.
<p> <em>Rida em-iga</em><br /> <i>Rida i-ga</i><br /> <strong>Rida strong-iga</strong><br /> <b>Rida b-ga</b> </p>
Lõppkokkuvõttes peavad siin tegutsema brauseritootjad.
Tegelikult vastutab nende elementidega varustatud tekstide tegeliku kujunduse eest lõppkokkuvõttes siiski CSS.
Lühendid abbr-ga
Akronüümi esiletõstmiseks kasutatakse sama elementi, mida seni kasutati lühendite jaoks, nimelt abbr.
Saks-Austria büroo <abbr title="World Wide Web Consortium">W3C</abbr> on alates aprillist 2009 asukohaga Potsdami Rakenduskõrgkoolis.
Brauserid, mis interpreteerivad õigesti abbr-elementi, näitavad abbr-elemendisse suletud teksti allakriipsutatult.
Lisaks tuleks abbr-ga omistada title-atribuut. Seal tavaliselt märgitakse akronüümi täielik väljendus. Kui külastaja viibib hiirekursoriga akronüümi kohal, kuvatakse väljend töövahendipaani aknas.
Aadressandmed address-ga
Kasutades address-elementi, saab märgistada aadressi informatsiooni.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
Brauserid kuvavad address-elementide sisu tavaliselt kaldkirjas.
Programmikoodi märgistamine kasutades code
Code-elementi kasutatakse programmeerimiskoodi märgistamiseks. Selles suhtes pole võrreldes varasemate HTML-versioonidega midagi muutunud. Endiselt kasutatakse code sellisel eesmärgil.
<pre>
Das ist ein HTML-Kopfbereich:
<code>
<html>
<head>
<title></title>
</head>
</code>
</pre>
Tavaliselt ühendatakse code pre-elemendiga, et säilitada programmeerimiskoodis kasutatavad taandrid.
HTML5 spetsifikatsioon soovitab code-elemendiga seoses class-atribuudi kasutamist. Sellele atribuudile saab määrata keele, mida code-elemendis kasutatakse. Siin on mõned näited, kuidas sellised märgistused võivad välja näha:
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
Kuidas brauserid neid juhiseid rakendavad, pole W3C poolt selgelt määratletud.
<pre>
Das ist ein HTML-Kopfbereich:
<code class="language-html">
<html>
<head>
<title></title>
</head>
</code>
</pre>
Praegu ei ole class-atribuudil brauseris igasuguseid nähtavaid mõjusid. Siiski võivad inimesed aru saada, millises keeles programmeerimiskood põhineb, kui nad vaatavad lehe allikakoodi.
Väiketähtedega kasutamine small
Small-element oli algselt mõeldud teksti kuvamiseks väiksemana kui tavaline. HTML5-s on small spetsiaalselt ette nähtud pisendatud teksti jaoks. See pisendatud tekst võib näiteks olla järgmine:
• Autoriõiguse teave
• Vastutuskeeldud
• Litsentsitingimused
• Teenusetingimused (AGB)
W3C rõhutab, et small-i ei tohiks kasutada pikkade tekstilõikude jaoks.
<small> Copyright by PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Texti allajoonimine
Te saate sõnu esile tõsta, kasutades u-elementi allajoonitud kujul. Siin on näide:
<p>Tere tulemast PSD-Tutorials.de</p>
Tulemus kuvatakse brauseris järgmiselt:
Kui vaadata tulemust, on see tegelikult soovitud efekt. Siiski on üks konks. Internetis tähistavad allajoonitud tekstid tavaliselt hüperlinke. Kui te esitate teksti või sõna allajoonitult, võivad külastajad arvata, et tegemist on hüperlingiga. Katse seda klõpsata ebaõnnestub muidugi. Seega peaksite allajoonimisest loobuma.
