HTML opas

1. HTML - Mikä se on

Html tulee englanninkielen sanoista Hypertext Markup Language.

Html on kuvauskieli. Sen avulla kuvataan nettisivun rakenne sekä sivun sisältämä sisältö.

Html-kieli on tarkoitettu alunperin tekstin muokkausta varten eli kuinka teksti näkyy lukijalle. Nykyään nettisivut tukevat monipuolisempaa sisältöä kuten videoita, lomakkeita jne.

Sivun muoto, koko, värit, fontin, kuvien koot ja paikat kuvataan CSS-kielellä. CSS-tyylit kirjoitetaan yleensä omaan erilliseen tiedostoon ja liitetään nettisivulle. Html-kielellä määritellään siis nettisivun sisällön rakenne, mutta sisällön tyylittelyt luodaan CSS-kielellä.

Termit

tagi (tag) eli html-elementti, esim. h1:

Otsikko

atribuutti (atribute) eli tagin ominaisuus, esim. href:

Linkki

luokka (class) eli tagin tunniste, esim. class:

Otsikko

id eli tagin uniikki tunniste, esim. id:

Otsikko

HTML ja selaimet

Html-sivuja ja näin myös nettisivuja luetaan selaimilla. Nettisivusto koostuu useista eri html-tiedostoista. Selain ei näytä itse html-koodin tageja vaan tagit ohjeistaa selainta miten niiden sisällöt näkyvät.

Selaimia on useita erilaisia. Selaimen taustalla toimii selainmootttori, joka hakee html-tiedoston ja esittää sen nettisivuna. Nämä moottorit toimivat hieman erilailla eri selaimissa ja sen vuoksi selaimet voivat näyttää html-elementtejä hieman eri ulkoasussa.

Selaimella on myös omat oletustyylit. Jos tyylejä ei ole erikseen määritelty nettisivulle, selain näyttää tekstin ja muut elementit oletustyyleillä. Nämä oletustyylit eroavat hieman myös toisistaan selaimesta riippuen.

HTML-elementtien tyypit

HTML-elementit jaetaan kahteen ryhmään niiden käyttäymisen mukaan; block-elementteihin ja inline-elementteihin.

Block-elementit:

Alkavat aina uudelta riviltä
Käyttävät oletuksena täyden käytettävissä olevan leveyden rivistä
Esimerkiksi otsikko (h1-tagi)

Inline-elementit:

Vievät vain itselleen vaaditun tilan
Eivät aloita uutta riviä
Esimerkiksi linkki (a-tagi)

Html-koodin muoto ja syntaksi

Sivun rakenne määritellään html-kielessä html-elementeillä ja yksittäinen html-dokumentti koostuu sisäkkäin ja peräkkäin olevista elementeistä.

Html-kielen rakenne on hierarkinen. Tämä tarkoittaa sitä, että elementissä voi olla sisäkkäisiä elementtejä. Hiearkiaa korostetaan koodissa sisentämällä alempana olevia elementtejä. Sisennykset helpottavat koodin hahmottamista.


  
    Otsikko
    Kappale

Syntaksi eli kielioppi

Html-kielellä on oma kielioppisäännöstö, josta muodostuu kielen syntaksi eli lauseoppi. Jos koodi on kirjoitettu virheellisesti, voi sisältö näkyä rikkinäisenä lukijalle.

Html-elementti määritellään kirjoittamalla sisältö aloitus- ja lopetustagin väliin. Tagit kirjoitetaan pienillä kirjaimilla.

<h1> Aloitustagi
</h1> Lopetustagi (lopetustagissa on aina /-merkki. )

Jos elementillä ei ole varsinaista sisältöä, html-tagi kirjoitetaan yhdistämällä alku- ja lopputagi. Esimerkiksi väliviiva elementeillä ei ole sisältöä, joten ne kirjoitetaan vain yhdellä yhdistetyllä aloitus ja lopetustagilla:

<hr />

Html-elementeille voi asettaa ominaisuuksia ja luokkia. Html-elementin ominaisuudet sekä luokat kirjoitetaan kaksoisheittomerkeillä ilman ääkkösiä ja ilman välilyöntejä. Jos elementillä on useita ominaisuuksia, ne erotetaan toisistaan välilyönnillä.

Linkki

2. HTML-sivun rakenne

Html-dokumentti voidaan kirjoittaa tekstinkirjoitusohjelmassa tai koodieditorilla ja tallentaa minne vain tietokoneessa ja tiedoston voi avata selaimella. Kun html-tiedosto halutaan näyttää internetissä, täytyy tiedostot siirtää http-palvelimelle.

Html-tiedoston pääte on html. Tiedostonimet kirjoitetaan pienellä eikä niissä käytetä ääkkösiä eikä muita erikoismerkkejä.

Esimerkkinä tiedoston nimistä: etusivu.html ja sisasivu.html

HTML-tiedoston määrittely

Html-tiedoston ensimmäiselle riville määritellään dokumenttityyppi doctype-tagilla. Kaikki muu sisältö luodaan html-tagin sisään.

Html-tiedoston alkuun head-tagin sisään kirjoitetaan tiedoston määrittely, jossa kerrotaan tiedostoon ja sivuun liittyviä metatietoja, esimerkiksi tiedostotyyppi, kieli ja sivun kuvaus. Head-tagin sisältö ei näy itse sivulla, mutta selain käyttää tietoja taustalla. Selaimet käyttävät näitä määrittelyjä hyväkseen tiedoston lukemisessa ja näyttämisessä. Myös hakukoneet ja muut palvelut voivat käyttää näitä tietoja.

Määrittelyn tageja ja ominaisuuksia:

doctype
Määrittelee sen mitä html-kielen versiota käytetään (pakollinen)
html
sivun aloittava ja lopettava tagi, joilla kerrotaan selaimelle että kyseessä on html-tiedosto. (pakollinen)
lang
html-tagin ominaisuus, jolla määritellään sivuston kieli (suositeltava)
head
määrittelyosa, jolla kerrotaan selaimelle tiedoston tietoja. Tämän tagin koodeissa ei ole visuaalista tulostusta. (suositeltava)
title
otsikko määrittää nettisivun otsikon, joka näkyy selaimen välilehdessä ja myös hakukonetuloksissa. (suositeltava)
charset määrittää käytetyn merkistöasetuksen, UTF-8 tai ISO-8859-1 (suositeltava)
viewport
mahdollistetaan tyylien mukautuminen erilaisille päätelaitteille. (suositeltava)
description - nettisivun kuvaus. Kuvaus näkyy esimerkiksi sosiaalisen median jaoissa ja hakukoneiden tuloksissa. (suositeltava)
link - css-tiedoston linkitys sivulle. Huomioi, että on link-tagi on itsensä sulkeva tunniste, eikä näin tarvitse erillistä loppu tagia. (vapaaehtoinen)
script - liitetään mahdollinen javascript tiedosto sivulle (vapaaehtoinen)
og-meta - Facebook jaot käyttävät näitä tietoja (vapaaehtoinen)
twitter-meta - Twitter jaot käyttävät näitä tietoja (vapaaehtoinen)

Esimerkki html-sivun määrittely-osiosta:


<!DOCTYPE html>
<html lang="FI">
<head>
  Sivun otsikko
  
  
  
  
  

  
  
  
  

  
  
  
  
  
</head>

Sisällön rakenne

Body - <body></body>

Body-tagi on sisältöosa, minkä sisälle määritellään kaikki se sisältö, joka näkyy sivulla.

Yleisempiä sivun rakenteen muodostamiseen käytettyjä elementtejä:

header
Sivuston ylätunniste. Header sisältää yleensä logon ja sivun nimen.
nav
Sivuston valikko.
main
Sivuston pääsisältö
section
Sivun osio
aside
Sivupalsta, Sivun toissijainen sisältö
article
Sivustolla oleva artikkeli, uutinen tai muu vastaava sisältö.
footer
Sivun lopputunniste. Footer sisältää usein sivun nimen, copyright tekstin ja yhteystiedot.
div
Yleinen tagi sivun osiolle. Ei kerro erityistä käyttötarkoitusta.

Esimerkki html-sivun sisällön rakenteesta

3. Sisältö-elementtejä

Tässä kappaleessa on esitelty yleisimmin sisällössä käytettyjä html-elementtejä.

Otsikot

Jokaisella sivulla pitäisi olla vain yksi uniikki pääotsikko eli Heading 1 -tason otsikko (h1). Väliotsikot auttavat jaottelemaan sisältöä. Huomioi, että otsikoinnit vaikuttavat myös hakukonenäkyvyyteen. Käytä otsikoita niiden oikeassa hierarkiassa eli järjestyksessä ylimmästä alinpaan tasoon.

Otsikko taso 1
Otsikko taso 2
Otsikko taso 3
Otsikko taso 4
Otsikko taso 5
Otsikko taso 6

Tekstin muotoilu

Leipätekstin osia voidaan korostaa ja merkitä erilaisilla html-tageilla. Alla olevassa taulukossa muutama esimerkki näistä merkintä tageista.

Nimi	Koodi	Esimerkki
Lihavoitu teksti (bold)	`Lihavoitu teksti`	Lihavoitu teksti
Kursivoitu teksti (italic)	`Kursivoitu teksti`	Kursivoitu teksti
Pieni teksti (small text)	`Teksti on pienempi`	Teksti on pienempi
Korostettu teksti (mark text)	`Korostettu teksti`	Korostettu teksti
Alaindeksi (subscript text)	`Tiedosto₁ on liite`	Tiedosto₁ on liite
Yläindeksi (superscript text)	`Pinta-ala m²`	Pinta-ala m²

Erikoismerkit

Html-kieli tukee tietynlaista merkistöä. Tässä merkistössä ei välttämä ole aakkosten lisäksi kaikkia erikoismerkkejä. Erikoismerkit voidaan kirjoitetaan html-kielessä entiteeteillä. Suoraan tekstinä kirjoitettu merkki ei saata näkyä kaikilla selaimilla oikein. Entiteeteillä kirjoittaminen varmistaa oikein näkyvyyden. Alla olevassa taulukossa on lueteltu yleisemmin käytettyjä erikoismerkkejä.

Nimi	Koodi	Esimerkki
Välilyönti	` `	Kolme välilyöntiä välissä
Et-merkki	`&`	&
Copyright	`©`	©
Tavaramerkki	`®`	®
Euro	`€`	€
Oikealle osoittava tuplanuoli	`»`	»
Vasemmalle osoittava tuplanuoli	`«`	«

Erikoismerkkien entiteettejä löytyy lisää mm. täältä: www.w3schools.com/html/html_symbols.asp

Kappale ja rivinvaihdot

Vaikka tekstinkäsittelyohjelmassa kappaleet ja rivit erotellaan Enterin (rivinvaihto) avulla toisistaan, selain ei näitä Enterin painalluksia suoraan näytä, jos tekstin suoraan kopioi html-tiedostoon. Rivinvaihdot ja kappaleet erotellaan html-koodissa omilla tageillaan.

Kappale kirjoitetaan p-tagien sisään:

Leipäteksti

Rivinvaihto kirjoitetaan br-tagilla:

<br />

Huomioi, että koska rivinvaihdossa ei ole erillistä sisältöä, tagi-kirjoitetaan yhdellä tagilla eli yhdistetään aloitus- ja lopputagi.

Lainaus

Html-kielessä lainatun tekstin voi määrittää joko q tai blockquote-tagilla.

Yhden rivin lainauksen voi määritellä q-tagilla. Q-tagi lisää heittomerkit lauseen ympärille.

Yhden rivin lainaus

Yhden rivin lainaus

Useamman rivin lainauksen voi määrittää blockquote-tagilla. Selaimet yleensä sisentävät blockquote-tagin sisällön.

Oi maamme, Suomi, synnyinmaa,
soi, sana kultainen!
Ei laaksoa, ei kukkulaa,
ei vettä rantaa rakkaampaa,
kuin kotimaa tää pohjoinen,
maa kallis isien!

Oi maamme, Suomi, synnyinmaa, soi, sana kultainen! Ei laaksoa, ei kukkulaa, ei vettä rantaa rakkaampaa, kuin kotimaa tää pohjoinen, maa kallis isien!

Ei-järjestetty lista

Lista-elementti aloitetaan ja lopetetaan ul-tagilla ja listattavat kohdat kirjoitetaan omiin li-tageihin.

Listauksen tyypin voi määritellä type-atribuutilla tai css-kielellä (suositeltava). Listan listaustyypit voivat olla disc (musta ympyrä), circle (valkoinen ympyrä mustalla reunalla), square (neliö) tai none (ei listaustyyppiä). CSS:llä voi määritellä listalle myös listaustyypiin, missä tyyppinä on käytetty kuvaa.


  Maito
  Mehu
  Limppari

Maito
Mehu
Limppari

CSS-esimerkki ympyrä-listatyypille:

ul { list-style-type: circle; }

Järjestetty lista

Järjestetty lista-elementti aloitetaan ja lopetetaan ol-tagilla ja listattavat kohdat kirjoitetaan omiin li-tageihin.

Listauksen tyypin voi määritellä type-atribuutilla tai css-kielellä (suositeltava). Järjestetyn listan oletustyyppi on numero. Listan listaustyypit voivat olla 1 (numero), A (isot kirjaimet), a (pienet kirjaimet), I (isot roomalaiset numerot), i (pienet roomalaiset numerot).


  Maito
  Mehu
  Limppari

Maito
Mehu
Limppari

CSS-esimerkki isot kirjaimet-listatyypistä:

ul { list-style-type: upper-roman; }

Väliviiva

Väliviiva on palstan poikki vaakatasossa kulkeva viiva. Väliviivaa käytetään eri tekstin osion erottamiseen toisistaan. Väliviiva luodaan hr-tagilla.

<hr />

Huomioi, että koska väliviivassa ei ole erillistä sisältöä, tagi-kirjoitetaan yhdellä tagilla eli yhdistetään aloitus- ja lopputagi.

Linkit

Nettisivulle voi lisätä linkkejä a-tagilla. Linkit voivat olla sisäisiä linkkejä saman sivun eri osioihin (tunnetaan myös nimellä ankkurilinkit), linkkejä toiselle sivulle samalla sivustolla tai linkkejä ulkoiselle sivustolle.

Linkkejä voi luoda myös tiedostoihin ja kuviin. Linkin sisältö voi olla myös tekstin sijaan kuva tai muu sisältöelementti. Linkin kohde määritellään href-atribuutilla.

Nimi	Koodi	Esimerkki
Linkki toiselle nettisivulle	`Linkki`	Linkki
Linkki sivun sisälle (vaatii linkin kohteelle saman id:n kuin href-attribuuttissa)	`Linkki`	Ankkurilinkki
Linkin avaaminen toiseen ikkunaan/välilehteen (target-attribuuttiin arvo _blank)	`Linkki`	Linkki
Linkin otsikko, joka näkyy kun vie osoittimen linkin päälle (title-attribuuttiin otsikko)	`Linkki`	Linkki

Kuva

Sivulle voidaan lisätä kuvia. Kuva lisätään img-tagilla, johon src-atribuuttiin kirjoitetaan kuvatiedoston osoite. Kuva-tiedostot voidaan näyttää tiedostokansiosta ja palvelimelta. Kuva voidaan lisätä sivulle pelkällä img-tagilla tai figure tagilla. Figure-tagi pitää sisällään myös kuvatekstin.


  
  Kuvan kuvateksti

figure-tagilla määritellään kuvapaikka. Itse kuva määritellään figure-tagin sisään.

figcaption-tagilla määritellään kuvateksti. Kuvateksti kirjoitetaan figure-tagin sisään.

img-tagilla määritellään itse kuva. Img-tagia voi käyttää ilman figure-tagia.

src-atribuutilla määritellään kuvan osoite.

alt-atribuutilla määritellään kuvan vaihtoehtoinen teksti. Alt-teksti on teksti, joka tulee käyttöön, jos kuva ei lataudu.

title-atribuutilla määritellään kuvan otsikko. Otsikko näkyy kun hiiren vie kuvan päälle.

Huomioi, että koska kuva-tagissa ei ole erillistä sisältöä vaan sisältö määritellään src-attribuutilla, tagi-kirjoitetaan yhdellä tagilla eli yhdistetään aloitus- ja lopputagi.

Kuvatiedoston osoitteen määrittely:

Koodi	Kuvaus
	kuva.jpg sijaitsee samassa kansiossa kuin ko. html-tiedosto
	kuva.jpg sijaitsee kuvat kansiossa. Kuvat-kansio sijaitsee samassa kansiossa html-tiedoston kanssa.
	kuva.jpg sijaitsee kuvat kansiossa. Kuvat-kansio sijaitsee sivuston juurikansiossa.

Videotiedosto

Video tagilla näytetään sivulle liitetty video. Video-tagi käyttää koneelle tai palvelimelle ladattua videotiedostoa. Videotagi tukee MP4, WebM ja Ogg videomuotoja.

Youtube video

Iframella avulla voidaan upottaa toinen html-sivu sivulle kuten esimerkiksi Youtube-video. Tagin sisällä oleva teksti näytetään, jos src-attribuutissa olevaa sisältöä ei löydetä.


  Tämä teksti näytetään jos videota ei löydetä.

Vertikal-youtube käyttäjän HTML opas-youtube video

Taulukko

Html-kielessä käytetään table-tagia taulukoimisessa. Taulukko aloitetaan table-tagilla. Taulukon rivit määritellään tr elementeillä ja rivin solut td-elementeillä.


  
  
    Otsikko solu
    Otsikko solu
  
  
    Solu
    Solu

Otsikko solu	Otsikko solu
Solu	Solu

Alla yleisempiä ominaisuuksia taulukon soluille (td-tagi).

Atribuutti	Selitys / Arvo
valign	Arvot: top/middle/bottom. Asemoi tekstin soluun vertikaalisesti
valign	Arvot: top/middle/bottom. Asemoi tekstin soluun vertikaalisesti
colspan	Yhdistää halutun määrän soluja vaakatasossa
rowspan	Yhdistää halutun määrän soluja pystytasossa

Kommentti

Html-koodin kommentit eivät näy selaimessa, vaan selain hyppää automaattisesti yli kommenttimerkkien välissä olevan sisällön. Kommentteja käytetään koodin ohjeistamiseen sekä apuna, kun halutaan väliaikaisesti piilottaa jokin elementti sivuston lukijalta.

Kommentit näkyvät siis lähdekoodissa, mutta ei selaimessa

<!-- Kommentti -->

Kommentoinnin aloittaa

<!--

ja lopettaa

-->

4. Tyylittely - CSS lyhyesti

CSS tulee englanninkielen sanoista Cascading Style Sheets. CSS on tyylikieli, jonka avulla määritellään html-elementtien ulkoasu. CSS-tyylit kirjoitetaan yleensä erilliseen tiedostoon (tiedostopääte css, esim. tyylit.css), joka liitetään html-sivun head-tagiin (ks. html-tiedoston määrittely-kappale).

CSS syntaksi koostuu valitsimesta ja aaltosulkeiden sisään määritellyistä ominaisuus-arvo pareista:
valitsin { ominaisuus:arvo; }

Valitsin voi olla html-tagi, luokka tai id. Html-tagia käytetään valitsemena, jos halutaan määritellä tyyli kaikille samanlaisille html-elementeille. Class ja id-valitsinta käytetään, jos halutaan määrittää vain tietyille elementeille erilaiset tyylit.

Alla olevassa esimerkissä ensimmäisen tason otsikoille määreillään punainen väri (color: red;) ja tekstin kooksi 30px (font-size: 30px;) sekä määritellään alleviivaus tyyli vain alleviivaus-luokan omaaville otsikoille.

h1 {
  color:red;
  font-size: 30px;
}
h1.alleviivaus {
  text-decoration: underline;
}

Yleisempiä tyyli määrityksiä:

Leveys:
yksikkö määritellään yleensä joko prosenteina (%) tai pikseleinä (px).
```
width: 80%;
```
Korkeus:
yksikkö määritellään yleensä joko prosenteina (%) tai pikseleinä (px).
```
height: 200px;
```

Reunukset:

padding-top: 10px; / padding-bottom: 10px; / padding-left: 10px; / padding-right: 10px;

Marginaalit:

margin-top: 10px; / margin-bottom: 10px; / margin-left: 10px; / margin-right: 10px;

Taustaväri:
```
background-color: #fff;
```

Taustakuva:

background-image: url('/taustakuva.jpg');

Taustakuvan asemointi:

background-position: left top;

Taustakuvan toisto:

background-repeat: no-repeat;

Taustakuvan koko:

background-size: cover;

Fonttityyppi:
(avuksi fonttityyppi lista, jotka toimivat kaikilla selaimilla)
```
font family: Arial, sans-serif;
```
Tekstin koko:
käytetyt yksiköt: %, px, em, rem)
```
font-size: 20px;
```
Tekstin väri:
(avuksi: Värivalitsin työkalu)
```
color: #000000;
```

Tekstin tasaus:

text-align: left; / text-aling: center; / text-align: right;

Tekstin alleviivaus:

text-decoration: underline; / text-decoration: none;

Responsiivisuus

Responsiivinen ulkoasu mukautuu päätelaitteen mukaan eli on skaalautuva. Responsiivisuus on nykyään oletusominaisuus nettisivuilla, koska suurinosa käyttäjistä käyttää jotain mobiililaitetta.

Responsiivisuutta voidaan rakentaa css:llä media queryillä. Media queryillä määritellään tyylejä erikokoisille näytöille. Responsiivinen ulkoasu vaatii html-tiedoston head-osioon view-tagin:

Alla olevassa esimerkissä main-elementille määritellään oletuksena leveys 100% ja reunuksia 20px.
Media queryllä määritellään, että yli 1000px levyisillä näytöillä main-elementin leveys on 1000px.
Viimeiseksi määritellään, että alle 460px levyisillä (mobiililaitteet) näytöillä main-elementin reunus piennetään 10px.

main {
  width: 100%;
  padding: 20px;
}

@media (min-width: 1000px) {
  main {
    width: 1000px;
  }
}

@media (max-width: 460px) {
  main {
    padding: 10px;
  }
}

5. Testaus

Koodin testaus

Validoinnilla eli koodin testauksella tarkoitetaan ohjelmallista prosessia, jossa html-dokumentista tarkistetaan koodin syntaksi ja kielioppi. Tarkistuksen tehtävä on näyttää html-tiedostossa olevat syntaksivirheet. Koodin kirjoittamisessa on myös suositeltavaa käyttää koodieditoria eli ohjelmaa, mikä on tarkoitettu koodin kirjoittamiseen. Koodieditoreissa on toimintoja, jotka auttavat kirjoittamaan syntaksin mukaista koodia.

Html ja css-koodin voi validoida netistä löytyvillä validaattoreilla, mm. näillä:

W3C HTML validaattori

W3C CSS validaattori

Selain- ja mobiilitestaus

Erilaisia selaimia, mobiililaitteita ja erikokoisia näyttöjä on kymmeniä ellei satoja. Selaimet ja laitteet voivat käyttäytyä erilailla, joten nettisivut olisi hyvä testata erityyppisillä selaimilla. Myös käyttöjärjestelmä ja laitteen asetukset vaikuttavat selaimen toimintaan. Selaimet siis näyttävät html-elementtejä hieman erilailla. Esim. chrome ja safari.

Vaikka koodissa olisi syntaksivirheita, selaimet voivat näyttää tiedoston aivan oikein. Tämä on kuitenkin selainriippuvaista. On hyvä testata sivu yleisimmillä selaimilla Chrome, Internet Explorer, Safari, Firefox.

Mobiilitestauksessa voi käytää apuna omaa kännykkää tai tablettia. Mobiililaitteella voi tarkastaa toimiiko sivu mobiilin pysty ja vaakanäkymässä ja pystyykö sivua selaamaan hyvin kosketusnäytöllä.

Selain- ja mobiilitestauksessa olisi hyvä testata ainakin seuraavat asiat:

Valikoiden ja linkkien toiminta. Pystyykö linkkejä klikkaamaan sormenpäällä? Ohjaako linkit oikeaan paikaan?
Ulkosun testaus. Näkyykö kaikki sivujen elementit oikein?
Sivun responsiisivuus. Jos näytön kokoa skaalaa tai vaihtaa kännykässä vaaka- ja pystynäkymän välissä, pysyykö ulkoasu oikean näköisenä?
Sivun nopeus. Kuinka monta sekunttia sivun latauksessa kestää? Esim. jos sivulla on useita isokokoisia kuvia, voi sivu hidastua. (Googlen nopeustestaustyökalu)

Nimi	Koodi	Esimerkki
Välilyönti	` `	Kolme välilyöntiä välissä
Et-merkki	`&`	&
Copyright	`©`	©
Tavaramerkki	`®`	®
Euro	`€`	€
Oikealle osoittava tuplanuoli	`»`	»
Vasemmalle osoittava tuplanuoli	`«`	«

Nimi	Koodi	Esimerkki
Välilyönti	` `	Kolme välilyöntiä välissä
Et-merkki	`&`	&
Copyright	`©`	©
Tavaramerkki	`®`	®
Euro	`€`	€
Oikealle osoittava tuplanuoli	`»`	»
Vasemmalle osoittava tuplanuoli	`«`	«

Nimi	Koodi	Esimerkki
Välilyönti	` `	Kolme välilyöntiä välissä
Et-merkki	`&`	&
Copyright	`©`	©
Tavaramerkki	`®`	®
Euro	`€`	€
Oikealle osoittava tuplanuoli	`»`	»
Vasemmalle osoittava tuplanuoli	`«`	«