Yksittäisiä sanoja tai kokonaisia kappaleita voidaan helposti muotoilla kursiivilla ja lihavoidulla. Aluksi lihavoitu versio. Tähän tarkoitukseen on periaatteessa käytettävissä kaksi HTML-elementtiä, b ja strong.
Tervetuloa sivustolle <b>PSD-Tutorials.de</b>! <br /> Tervetuloa sivustolle <strong>PSD-Tutorials.de</strong>!
Selain näyttää tuloksen seuraavasti:
Ilmeisesti molemmat elementit tarjoavat samanlaisen näyttökuvan. Miksi kuitenkin on olemassa kaksi erilaista elementtiä? Web-sivuilla on itse asiassa muitakin esitystapoja kuin tunnetut standardiselaimet. Ajattele vaikkapa näkövammaisten lukijoita tai mobiililaitteita. W3C:n tarjoamien HTML-elementtien tarkoituksena on tukea semantiikkaa. Niinpä b-elementti ei enää merkitse lihavointia, vaan se merkitsee näkyvästi korostettua tekstiä, jolla ei ole korostunutta tärkeyttä. Tämä voi olla esimerkiksi tuotenimiä tai avainsanoja asiakirjoissa.
strong-elementti on aiemmin ollut vahvemman korostuksen merkki. Sen sijaan em on käytetty korostettuna tärkeälle tekstille. aikaisemmissa HTML-versioissa strong on ollut emn voimistettu versio. Molemmille elementeille on annettu HTML5:ssä toinen merkitys.
Katse normaalisti korostettuun tekstiin.
<p> Kissat ovat söpöjä eläimiä. </p>
Nyt sama teksti uudelleen, tällä kertaa korostettuna ensimmäisellä sanalla.
<p> <em>Kissat</em> ovat söpöjä eläimiä. </p>
Kissoihin kohdistetaan korostus em-elementin avulla. Tämä voisi tapahtua keskustelussa, jossa pohditaan, ovatko koirat vai kissat suloisempia.
Nyt voisi tässä esimerkissä käyttää em-elementtiä myös sanalle ovat.
<p> Kissat <em>ovat</em> söpöjä eläimiä. </p>
Tällainen voisi olla vastaus keskustelussa, jossa joku väittää, etteivät kissat ole lainkaan suloisia.
Kursivoitu korostus saavutetaan selaimessa em-elementillä. Sama visuaalinen vaikutus saavutetaan i-elementillä.
HTML5-luonnoksessa i-elementtiä ei enää käytetä kursiiviin.
<p> Tervetuloa <i>PSD-Tutorials.de</i> </p>
Tämä elementti tarkoittaa nyt lähinnä sitä, että sillä halutaan välittää toisenlainen tunnelma. Esimerkiksi i-elementti on mielenkiintoinen teknisten termien tai taksonomisten nimitysten merkitsemiseen.
Tämä on kaikessa kauhean teoreettista, tiedän. Periaatteessa teidän tulisi noudattaa HTML5-määräyksiä. Toisaalta kukaan ei repi päätäsi irti, jos käytätte strongn sijaan b:a.
<p> <em>Rivi em:llä</em><br /> <i>Rivi i:llä</i><br /> <strong>Rivi strongilla</strong><br /> <b>Rivi b:llä</b> </p>
Lopulta selainten valmistajien on toimittava tässä asiassa.
Kaiken tekstien ulkoasun suunnittelu, jossa käytetään mainittuja elementtejä, on joka tapauksessa CSS:n vastuulla.
Lyhenteitä merkinnät abbr
Akronyymeille käytetään samaa elementtiä, jota on tähän asti käytetty lyhenteiden merkitsemiseen, nimittäin abbr.
Saksan Itävallan toimisto <abbr title="World Wide Web Consortium">W3C</abbr> on toiminut huhtikuusta 2009 lähtien Potsdamin ammattikorkeakoulussa.
Selaimet, jotka tulkitsevat abbr-elementin oikein, alleviivaavat abbr-elementin sisältämän tekstin.
Lisäksi, abbr-elementille tulisi antaa title-attribuutti. Siinä yleensä kirjoitetaan akronyymin täydellinen ilmaus. Kun vierailija vie hiiren akronyymin päälle, ilmaus näkyy työkaluvihjeikkunassa.
Osoitetiedot address
Osoitustiedot voidaan merkitä address-elementillä.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
Selaimet yleensä esittävät address-elementin sisällön kursiivisena.
Ohjelmakoodi merkitse code -elementillä
code-elementtiä käytetään ohjelmakoodin korostamiseen. Tässä mielessä ei ole tapahtunut muutosta verrattuna aiempiin HTML-versioihin. code on edelleen käytössä tuohon tarkoitukseen.
<pre>
Tämä on HTML-sivun yläosa:
<code>
<html>
<head>
<title></title>
</head>
</code>
</pre>
Yleensä code-elementti yhdistetään pre-elementtiin, jotta ohjelmakoodissa käytetyt sisennykset säilyvät.
HTML5-spesifikaatio suosittelee code-elementin käyttöä yhdessä class-attribuutin kanssa. Tähän attribuuttiin voidaan määrittää käytetty kieli code-elementin sisällä. Tässä joitakin esimerkkejä siitä, miltä tällaiset korostukset voivat näyttää:
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
Onko ja miten selaimet noudattavat näitä ohjeita ei ole määritelty W3C:ssä.
<pre>
Tämä on HTML-sivun yläosa:
<code class="language-html">
<html>
<head>
<title></title>
</head>
</code>
</pre>
Tällä hetkellä class-attribuutilla ei ole kuitenkaan näkyviä vaikutuksia selaimessa. Kuitenkin ihmiset voivat tällä tavoin tunnistaa, millä kielellä ohjelmakoodi perustuu, kun he katsovat sivun lähdekoodia.
Pienaakkoset small -elementillä
small-elementti oli alun perin tarkoitettu pienempänä kuin tavallinen tekstinäyttelyyn. HTML5:ssä small on nimenomaan varattu pienen painetuksen esittämiseen. Tämä pienen painatuksen voi esimerkiksi olla seuraavaa:
• Tekijänoikeustiedot
• Vastuuvapauslausekkeet
• Lisenssiehdot
• Käyttöehdot
W3C korostaa, että small ei pitäisi käyttää pitkiin tekstipassagesiin.
<small> Copyright by PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Tekstin alleviivaukset
Voit korostaa sanoja käyttämällä u-elementtiä alleviivattuna. Tässä esimerkki:
<p>Tervetuloa <u>PSD-Tutorials.de</u></p>
Selaimessa tulos näyttää seuraavalta:
Kun katsotaan tulosta, se on todellakin haluttu vaikutus. Asiaan liittyy kuitenkin yksi mutka. Internetissä alleviivatut tekstit tunnetaan yleisesti hyperlinkkeinä. Jos nyt esitätte alleviivattua tekstiä tai sanaa, vierailijat saattavat ajatella sen olevan hyperlinkki. Yritys napsauttaa sitä epäonnistuu tietysti. Sinun pitäisi siis välttää alaviivaa tässä tapauksessa.
