HTML (HyperText Markup Language) on verkkosivujen rakennuskieli. Se on ensimmäinen askel, kun aloitat verkkosivujen tekemisen. Mutta mitä HTML oikeastaan tekee ja miksi sitä tarvitaan vielä vuonna 2025?

Tässä artikkelissa saat selkeän ja suomenkielisen katsauksen HTML:n perusteisiin, käytännön esimerkkeihin ja vinkkeihin, joilla pääset alkuun.

Mikä on HTML?

HTML on merkintäkieli (ei ohjelmointikieli), jota käytetään verkkosivujen rakenteen kuvaamiseen. HTML kertoo selaimelle, mitä eri osat verkkosivusta ovat:

  • Otsikot
  • Kappaleet
  • Kuvat
  • Linkit
  • Lomakkeet

Esimerkiksi:

Tervetuloa sivulleni
Tämä on esimerkki HTML-koodista.

HTML:n perusrakenne

HTML-dokumentti rakentuu seuraavalla tavalla:

Esimerkkisivu
  
  
    Hei maailma!
    Tämä on ensimmäinen verkkosivuni.
  




    Enter fullscreen mode
    


    Exit fullscreen mode
    





 ilmoittaa dokumentin tyypin
 on juurielementti
 sisältää sivun metatiedot
 sisältää näkyvän sisällön

  
  
  Kuvien ja linkkien lisääminen
Kuvat ja linkit ovat tärkeä osa verkkosivuja. HTML:ssä ne lisätään näin:


Siirry sivulle



    Enter fullscreen mode
    


    Exit fullscreen mode
    






 lisää kuvan
 luo linkin

  
  
  Yleisimmät HTML-elementit ja niiden käyttötarkoitukset
 –  - Otsikkotasot
 -  Kappale
 - Linkki
   - Kuva
, ,  - Listat
 - Yleinen säiliöelementti
 - Tekstin sisäinen elementti
  
  
  Miksi HTML on edelleen tärkeä?
Vaikka CSS ja JavaScript ovat nykyään suuressa roolissa verkkokehityksessä, HTML on kaiken perusta. Ilman HTML:ää ei olisi verkkosivuja.
Hakukoneet lukevat HTML-rakennetta
Esteettömyys (accessibility) perustuu HTML-tagien oikeaan käyttöön
Responsiivisuus alkaa oikeasta rakenteesta

  
  
  Vinkkejä aloittelijoille

Käytä aina selkeitä otsikkotasoja ( vain kerran per sivu)
Lisää alt-teksti kaikkiin kuviin
Tarkista koodi W3C Validatorilla
Harjoittele tekemällä pieni projekti, kuten henkilökohtainen portfoliosivu

  
  
  Mitä seuraavaksi?
Jos hallitset HTML:n perusteet, voit siirtyä CSS:n ja JavaScriptin maailmaan. Ne tekevät sivuista visuaalisesti näyttävämpiä ja interaktiivisia.
  
  
  Yhteenveto
HTML on helppo oppia mutta silti äärimmäisen tärkeä taito jokaiselle, joka haluaa luoda sisältöä verkkoon. Se toimii perustana kaikelle muulle verkkokehityksessä.Bonus: Olen itse rakentanut hyödyllisiä työkaluja HTML:n ja JavaScriptin avulla – voit tutustua niihin ja niiden lähdekoodiin GitHub-profiilissani.