HTML-dokumentin ulkoasu muotoillaan pääasiallisesti CSS-tyyleillä, joihin syvennymme kurssin seuraavassa osiossa. HTML:ssä on kuitenkin erilaisia elementtejä joilla on oletusarvoisesti tietynlainen ulkoasu, ja niitä voidaan myös käyttää tekstin muotoiluun.
Näillä elementeillä voidaan luoda esimerkiksi otsikkoja (<h1>, <h2>, <h3>), kappaleita (<p>), lihavoitua (<b>), kursivoitua (<i>), alleviivattua (<u>), pienempää (<small>) ja suurempaa (<big>) fonttikokoa, alaindeksissä (<sub>) ja yläindeksissä (<sup>) olevaa tekstiä, rivinvaihtoja (<br>), erottelijoita (<hr>), esiasetettua tekstiä (<pre>), koodiesimerkkiä (<code>) ja lainausmerkkejä (<blockquote>).
Esimerkki
<!DOCTYPE html>
<html>
<head>
<title>Esimerkki tekstin muotoilusta</title>
</head>
<body>
<h1>Otsikko 1</h1>
<h2>Otsikko 2</h2>
<h3>Otsikko 3</h3>
<p>Tämä on kappaleen tekstiä.</p>
<b>Tämä teksti on lihavoitu.</b>
<i>Tämä teksti on kursivoitu.</i>
<u>Tämä teksti on alleviivattu.</u>
<small>Tämä teksti on pienemmässä koossa.</small>
<big>Tämä teksti on suuremmassa koossa.</big>
<sub>Tämä teksti on alaindeksissä.</sub>
<sup>Tämä teksti on yläindeksissä.</sup>
<br>
<hr>
<pre>Tämä teksti säilyttää välilyönnit ja rivinvaihdot.</pre>
<code>Tämä teksti on koodiesimerkki.</code>
<blockquote>Tämä teksti on lainausmerkkien sisällä.</blockquote>
</body>
</html>Tärkeä huomio
Vaikka päätyisitkin tekemään kaiken tyylityksen pelkällä CSS:llä (esimerkiksi TailwindCSS, johon kannattaa joskus tutustua, tyhjentää kaikki selaimen oletustyylit), on tärkeä silti käyttää rakenteellisesti oikeita HTML-tageja, esimerkiksi käytettävyyden ja hakukoneoptimoinnin takia.
Harjoittele
Valmis ryhtymään eettiseksi hakkeriksi?
Aloita jo tänään.
Hakatemian jäsenenä saat rajoittamattoman pääsyn Hakatemian moduuleihin, harjoituksiin ja työkaluihin, sekä pääset discord-kanavalle jossa voit pyytää apua sekä ohjaajilta että muilta Hakatemian jäseniltä.