This content originally appeared on DEV Community and was authored by Sofia Mayer
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:
<h1>Tervetuloa sivulleni</h1>
<p>Tämä on esimerkki HTML-koodista.</p>
HTML:n perusrakenne
HTML-dokumentti rakentuu seuraavalla tavalla:
<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="UTF-8" />
<title>Esimerkkisivu</title>
</head>
<body>
<h1>Hei maailma!</h1>
<p>Tämä on ensimmäinen verkkosivuni.</p>
</body>
</html>
- <!DOCTYPE html> 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:
<img src="kuva.jpg" alt="Kuvaus tekstistä" />
<a href="https://esimerkki.fi">Siirry sivulle</a>
-
lisää kuvan
- luo linkin
Yleisimmät HTML-elementit ja niiden käyttötarkoitukset
<h1> – <h6> - Otsikkotasot
<p> - Kappale
<a> - Linkki
<img> - Kuva
<ul>, <ol>, <li> - Listat
<div> - Yleinen säiliöelementti
<span> - 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 (
<h1> 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.
This content originally appeared on DEV Community and was authored by Sofia Mayer
Sofia Mayer | Sciencx (2025-04-23T18:26:26+00:00) Mikä on HTML ja miten se toimii? Täydellinen opas aloittelijoille. Retrieved from https://www.scien.cx/2025/04/23/mika-on-html-ja-miten-se-toimii-taydellinen-opas-aloittelijoille/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.