Kuinka lihavoida ja kursivoida tekstiä HTML:ssä

Lihavointi ja kursivointi ovat tuttuja juttuja tekstieditoreissa. Joskus vastaan tulee tilanne, jossa työkalupalkista ei löydykään näitä vaihtoehtoja. Näin käy yllättävän usein etenkin jäykän verkkosivualustan kuten Wordpressin kohdalla.

Mutta sehän ei meitä haittaa. Tarvitset vain vähän HTML ja CSS-osaamista. Alla käydään läpi yleisimmät tekstin muotoiluvaihtoehdot eli lihavointi, kursivointi, alleviivaus ja yliviivaus.

Kuinka lihavoida tekstiä HTML:ssä

Lihavointi onnistuu käyttämällä joko strong-tunnistetta tai b (bold) -tunnistetta. Selaimet lihavoivat molempien tunnisteiden sisällä olevan tekstin samalla tavalla, mutta <strong>-tunnistetta osoittaa, että teksti on erityisen tärkeä tai kiireellinen. Voit myös lihavoida tekstiä CSS-fontin paino-ominaisuuden (font-weight) ollessa "bold". Tähän boldaukseen kuitenkin vaikuttavat sivuillasi käytössä olevat fontit.

Kun tekstiä lihavoidaan, parhaana käytäntönä pidetään strong-tunnisteen käyttöä b-tunnisteen sijaan. Tämä siksi, että strong on semanttinen elementti kun taas b ei ole. Ei-semanttiset elementit voivat tehdä sisällön lokalisoinnista ja tulevasta tarkistamisesta vaikeaa HTML5:ssä. Lisäksi, jos tekstin lihavointi on puhtaasti tyylillistä, on parempi käyttää CSS:ää ja pitää kaikki sivun tyylit erillään sisällöstä.

Kuinka lihavoida tekstiä HTML:ssä strong-elementillä

Jos haluat määrittää erittäin tärkeän tekstin, sijoita teksti strong-tunnisteiden sisään.

HTML:

<p>Tämä on normaalia kappale, <strong>ja tämä on korostettu teksti.</strong></p>

Lopputulos:

<p>Tämä on normaalia kappale, <strong>ja tämä on korostettu teksti.</strong></p>

HTML-tekstin lihavointi CSS:n avulla

Jos haluat lihavoida tekstin vain tyylillisesti, käytä CSS:n font-weight-ominaisuutta. Oletetaan, että haluat lihavoida yhden sanan kappaleesta. Kääri se ensin span-tunnisteisiin ja lisää sille CSS-luokka käyttääksesi font-weight-ominaisuutta vain tiettyihin span-elementteihin.

CSS näyttäisi tältä:

.text-weight-bold {
	font-weight: bold;
}

Ja HTML:

<p>Tämä on normaalia kappale, <span class="text-weight-bold">ja tämä on painavaa asiaa.</span></p>

Tässä tulos:

Kuinka kursivoida teksti HTML:ssä

Jos haluat kursivoida tekstin HTML-koodissa, käytä joko em-tunnistetta tai i-tunnistetta (italic). Molemmat tunnisteet kursivoivat tekstin, mutta em-tunniste osoittaa lisäksi, että tekstin sisältö on tärkeää. Kursivoinninkin kohdalla voit käyttää CSS-tyylejä, mutta katsotaan ensin nämä HTML-jutut.

Kuten strong ja b, em-tunniste on yleensä parempi kuin i, koska se on semanttinen elementti. Pelkkää tyylillistä korostusta varten käytä CSS:ää ja vältä i-tunnistetta.

Kuinka kursivoida teksti HTML:ssä

Jos haluat määrittää tekstin korostetusti, sijoita teksti em-tunnisteiden sisään.

Tällöin HTML näyttää tältä:

<p>Tämä on normaalia kappale, <em>ja tämä on korostettu teksti.</em></p>

Ja ulospäin se näyttää tältä:

HTML-tekstin kursivointi CSS:llä

Käytä font-style-ominaisuutta kursivoidaksesi teksti CSS:llä. Font-style-ominaisuuden arvoksi tulee tällöin “italic”. Kuvitellaan taas, että haluat kursivoida yhden sanan lauseesta. Kääri se ensin  span-tunnisteisiin ja käytä sitten font-style-ominaisuutta vain span-elementtiin.

CSS:

.text-style-italic {
	font-style: italic;
}

HTML:

<p>Tämä on normaalia kappale, <span class="text-style-italic">ja tämä on kursivoitua asiaa.</span></p>

Ja lopputulos:

Kuinka alleviivata tekstiä HTML:ssä

Jos haluat alleviivata tekstiä HTML- ja CSS-kielissä, käytä CSS:n text-decoration-ominaisuutta ja aseta arvoksi "underline".

Voit myös alleviivata tekstiä u-elementillä, mutta sitä ei tule käyttää tekstin korostukseen. u-elementti on tarkoitettu tiettyihin käyttötapauksiin kuten väärin kirjoitettujen sanojen merkitsemiseen, erisnimien merkitsemiseen kiinalaisessa tekstissä tai sukunimien ilmoittamiseen.

Tekstin alleviivaus CSS:n avulla

Tekstin alleviivaus onnistuu siis text-decoration-ominaisuuden avulla. Tarvitset jälleen HTML-luokan ja sille määritellyn tyylin CSS:ssä.

Eli CSS näyttää silloin tältä:

.text-style-underline {
	text-decoration: underline;
}

Ja HTML tältä:

<p>Tämä on normaalia kappale, <span class="text-style-underline">ja tämä on alleviivattua asiaa.</span></p>

Lopputulos:

Tekstin yliviivaaminen HTML:ssä

On olemassa useita tapoja yliviivata HTML:ssä. Voit käyttää s-tunnistetta osoittamaan, että teksti on nyt virheellinen, epätarkka tai epäolennainen. Jos haluat ilmoittaa tekstistä, joka on poistettu, käytä del-tunnistetta.

Jos haluat näyttää tekstin yliviivattuna jostain muusta syystä, käytä CSS-tekstin text-decoration-ominaisuutta ja määritä tämän ominaisuuden arvoksi "line-through".

On tärkeää huomata, että HTML-elementti strike on vanhentunut, eikä sitä enää käytetä tekstin yliviivaukseen. Seuraavassa esimerkit toimivista vaihtoehdoista.

Tekstin yliviivaus HTML:ssä s-tunnisteella

Jos haluat yliviivata tekstin osoittaaksesi, että se ei ole enää oikea, tarkka tai osuva, sijoita teksti s-tunnisteiden sisään. Tällä tyylillä:

<p>Tämä on normaalia kappale, <s>ja tämä on yliviivattu teksti.</s></p>

Lopputulos:

Tekstin yliviivaus HTML:ssä del-tunnisteella

Jos haluat yliviivata poistetun tekstin, sijoita se del-tunnisteiden sisään. Seuraavassa esimerkissä on käytetty ul- ja li-elementtejä. Ul on listaelementti ja li on listan kohta (list item).

HTML:

<p>Jäljellä olevat ajat:/p>
<ul>
<li><del>13.30 - Neukkari 1</del></li>
<li><del>14.00 - Neukkari 1</del></li>
<li><del>13.30 - Neukkari 2</del></li>
<li>14.00 - Neukkari 2</li>
</ul>

Ja lopputulos:

Tekstin yliviivaus HTML:ssä CSS:n avulla

Jos haluat yliviivata tekstiä muuhun tarkoitukseen, käytä CSS-tekstin text-decoration-ominaisuutta. Tällöin muuttujan arvoksi tulee “line-through”.

Ensin CSS:

.text-style-line-through {
	text-decoration-line: line-through;
}

Sitten HTML:

<p>Tämä on normaalia kappale, <span class="text-style-line-through">ja tämä on yliviivattua asiaa.</span></p>

Ja lopputulos:

Tekstin muotoilu HTML:llä ja CSS:llä

Muotoilemalla tekstiä millä tahansa edellä kuvatuista tavoista voit auttaa lukijoitasi ymmärtämään ja muistamaan tiedot paremmin. Halusitpa sitten lihavoida avainsanoja tai kursivoida lainauksen, tekstin muotoilu vaatii vain pientä HTML- ja CSS-osaamista.