HTML – verkkosivujen merkintäkieli: määritelmä, käyttö ja HTML5-versiot

Hyper Text Markup Language (HTML) on merkintäkieli, jolla rakennetaan ja merkitään verkkosivuja. Verkkosivuja tarkastellaan yleensä verkkoselaimella, ja ne voivat sisältää tekstiä, linkkejä, kuvia sekä multimediaa kuten ääntä ja videota. HTML:llä määritellään sivun rakenne ja semanttinen merkitys siten, että selain osaa näyttää sisällön oikein. Lisäksi HTML:llä lisätään sivulle metatietoja (esim. kuvaus, tekijä, merkistö), joita selaimet eivät välttämättä suoraan näytä mutta hakukoneet ja muut palvelut voivat käyttää.

Perusajatus ja rakenne

HTML koostuu elementeistä, jotka kirjoitetaan avoimien ja suljettujen tagejen muodossa: <element>sisältö</element>. Elementit voivat sisältää attribuutteja (esim. id, class, src, href, alt), jotka antavat lisätietoa tai ohjaavat selaimen toimintaa. PerusHTML-dokumentin rakenne sisältää tyypillisesti , <html>-juurielementin (yleensä lang-attribuutilla), <head>-osion (meta-tiedot, titteli, linkitykset tyylitauluille) ja <body>-osion, jossa varsinainen näkyvä sisältö sijaitsee.

Semanttiset elementit ja uudet mahdollisuudet (HTML5)

HTML5 toi mukanaan useita semanttisia elementtejä ja uusia ominaisuuksia, jotka helpottavat rakenteen selkeyttä ja saavutettavuutta. Esimerkkejä semanttisista elementeistä ovat <header>, <nav>, <main>, <article>, <section> ja <footer>. HTML5 lisäsi myös natiivituen multimediaan (<audio>, <video>), piirtoalustan (<canvas>), parannettuja lomake‑elementtejä ja uusia input-tyyppejä (esim. email, date, tel) sekä useita JavaScript-rajapintoja (esim. localStorage, Geolocation, Fetch API).

HTML, CSS ja JavaScript yhdessä

HTML määrittelee sisällön ja rakenteen, kun taas Cascading Style Sheets (CSS) vastaa ulkoasusta ja taitosta. JavaScriptiä käytetään käyttäjävuorovaikutuksen, dynaamisen sisällön ja sivun toiminnallisuuksien toteuttamiseen. Hyvä käytäntö on pitää rakenne (HTML), tyyli (CSS) ja toiminnallisuus (JavaScript) erillään mahdollisuuksien mukaan, jotta ylläpito ja saavutettavuus pysyvät selkeinä.

Metatiedot ja saavutettavuus

Metatiedot sijoitetaan <head>-osioon <meta>-tageilla (esim. merkistö charset="utf-8", kuvauksen name="description", ja responsiivisuuden name="viewport"). Saavutettavuuden kannalta tärkeää on käyttää semanttisia tageja, antaa kuville alt-tekstit, käyttää riittäviä kontrasteja ja tarvittaessa ARIA-atribuutteja, jotta ruudunlukija- ja muut avustavat teknologiat toimivat oikein.

Standardit ja kehitys

HTML:n kehityksestä ja standardoinnista vastaavat useat organisaatiot. Alkuperäiset HTML-spesifikaatiot syntyivät World Wide Webin varhaisvaiheessa, ja nykyisin kehitystä tekee yhteistyössä mm. World Wide Web Consortium (W3C) sekä WHATWG‑yhteisö, joka ylläpitää elävää standardia (Living Standard). HTML5 määritteli paljon nykyaikaisen webin perusominaisuuksia ja standardit jatkavat kehittymistä. Nykyiset selaimet tukevat laajasti HTML5-ominaisuuksia, mutta yksityiskohdissa voi silti olla eroja eri selainten välillä.

Teknisiä käytäntöjä ja vinkkejä

Käytä aina täsmällistä doctype-riviä: <!DOCTYPE html>.
Aseta tiedoston merkistö UTF-8 (<meta charset="utf-8">) ja sivun kieli <html lang="fi">.
Anna kuville alt-tekstivaihtoehto ja käytä semanttisia elementtejä rakenteen kuvaamiseen.
Testaa sivua eri selaimilla ja päätelaitteilla sekä validoi HTML W3C:n validoijalla, jotta virheet ja yhteensopivuusongelmat löytyvät.
Mieti responsiivisuutta: lisää <meta name="viewport" content="width=device-width, initial-scale=1"> ja käytä joustavia CSS-tekniikoita.

Mihin HTML:ää käytetään käytännössä?

HTML on kaikkien verkkosivujen perusta: uutisartikkeleista ja blogeista verkkokauppoihin ja monimutkaisiin web-sovelluksiin. Sitä käytetään sisällön merkitsemiseen, lomakkeiden luomiseen, mediatiedostojen upottamiseen ja moniin muihin tehtäviin, joissa tarvitaan verkkosisällön rakenteellista esitystä.

Yhteenvetona: HTML on verkkosivujen selkäranka—se kertoo selaimelle, mitä sisältöä sivulla on ja millainen sen rakenne on. CSS ja JavaScriptiä täydentävät tätä tarjoamalla ulkoasun ja toiminnallisuuden. HTML-standardit elävät ja kehittyvät jatkuvasti, ja HTML5 on nykyaikaisen webin keskeinen perusta.

Tunnisteet

HTML käyttää erityisiä ohjelmointikielen osia, joita kutsutaan "tunnisteiksi", jotta selain tietää, miltä verkkosivun pitäisi näyttää. Tunnisteet ovat yleensä pareittain: avaava tunniste määrittelee sisältölohkon alun ja sulkeva tunniste määrittelee sisältölohkon lopun. Tunnisteita on monenlaisia, ja jokaisella niistä on erilainen tarkoitus. Katso alla olevasta kohdasta HTML:n perustunnisteet esimerkkejä tunnisteista.

Jotkin tunnisteet toimivat vain tietyissä selaimissa. Esimerkiksi <menuitem>-tunniste, jota käytetään, jotta jokin asia tulee näkyviin, kun henkilö painaa hiiren oikeaa painiketta, toimii vain Mozilla Firefox -selaimessa. Muut selaimet yksinkertaisesti jättävät tämän tagin huomiotta ja näyttävät kirjoituksen normaalisti. Monet verkkosivujen tekijät välttävät näiden "epästandardien" tagien käyttöä, koska he haluavat, että heidän sivunsa näyttävät samalta kaikissa selaimissa.

Esimerkki

Tässä on esimerkkisivu HTML-muodossa.

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> Tämä on sivun otsikko. </title> 5 </head> 6 < body> 7 < p> Tämä on kappale. </p> 8 < a href="https://www.domain.com"> Tämä on linkki. </a> 9 < img src="image.jpg" alt="Kuva"> 10 </body> 11 </html>

Yksinkertainen HTML-sivu olisi tämä: yksi kappale, jossa lukee "Hello world!". " kirjoitettuna siihen.

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> Hei! </title> 5 </head> 6 < body> 7 < p> Hello world! </p> 8 </body> 9 </html>

Perus HTML-tunnisteet

Tagin nimi	Nimi	Toiminto	Koodi Esimerkki
`<!DOCTYPE>`	Doctype	Määrittää asiakirjatyypin	<!DOCTYPE html>
`<html>`	HTML	Määrittää HTML-dokumentin ja käynnistää HTML-dokumentin.	< html> Kaikki koodi</html>
`<head>`	Pää	Sisältää kaiken koodin, jota ei käytetä elementtien näyttämiseen verkkosivulla.	< head></head>
`<title>`	Otsikko	Määrittää verkkosivun otsikon (joka näkyy välilehdellä) ja se syötetään `<head>-kohtaan`.	< title> Verkkosivu</title>
`<body>`	Keho	Sisältää verkkosivun näkyvät elementit (ja sisältää kappaleen ja muuta).	< body> Html-tagit</body>
`<h1>` - `<h6>`	Otsikot	erikokoisia otsikoita `(<h1>` on suurin).	< h1> Otsikko</h1>
<p>	Kohta	Määrittää tekstikappaleen	< p> TEKSTI</p>
	Ankkuri	Luo aktiivisia linkkejä muille verkkosivuille	< a href="www.domain.com"> Käy sivustollamme</a>
`<img>`	Kuva	Näyttää kuvan sivulla	< img src="ImageUrl" alt="Teksti näytetään, jos kuvaa ei ole saatavilla">
`<br>`	Tauko	Lisää yhden rivinvaihdon	Teksti < br> Teksti
`<center>`	Keskusta	Siirtää sisällön sivun keskelle	< center> Koodi</center>
`<script>`	Käsikirjoitus	Luo verkkosivulle skriptin, joka on yleensä kirjoitettu JavaScriptillä.	< script> document. write("Hello World!")</script>

HTML-tunnisteiden käyttäminen

Verkkosivun tekeminen

Verkkosivun tekeminen on helppoa.Sinun tarvitsee vain muistaa tunnisteet ja järjestys, jotta voit tehdä verkkosivun.

Ensin sinun on löydettävä paikka, johon voit kirjoittaa HTML-tunnisteet (suosittelen notepadia) ja kirjoittaa tunnisteet.

Tässä on toinen esimerkki HTML Tag -sivusta.

<html>

<head>

<h1> Hello world!</h1>

</head>

<body>

<p>

Tämä on HTML Tag -sivu.

</p>

By: Nimi: *Taita nimi tähän*

</footer>

</html>

Kun olet valmis, tallenna tämä tässä muodossa: helloworld.htm

(älä laita välilyöntejä)

Ja olet valmis! Kun olet tallentanut sen tietokoneellesi, jos painat sitä, se lähettää sinut verkkosivullesi Googleen!

Kysymyksiä ja vastauksia

K: Mikä on HTML?

V: HTML on eräänlainen merkintäkieli, jota käytetään kirjoitusta, linkkejä, kuvia ja audiovisuaalista materiaalia sisältävien verkkosivujen luomiseen.

K: Mikä on HTML:n tehtävä?

V: HTML:n tehtävänä on kertoa verkkoselaimille, miltä verkkosivujen pitäisi näyttää, ja lisätä metatietoja, kuten verkkosivun luojan nimi.

K: Mitä esimerkkejä mediasta voidaan sisällyttää HTML:llä luotuihin verkkosivuihin?

V: Esimerkkejä HTML:llä luotuihin verkkosivuihin sisällytettävistä medioista ovat äänitiedostot ja videoleikkeet.

K: Miten CSS täydentää HTML:ää?

V: CSS:ää käytetään HTML-sivujen ulkoasun muuttamiseen.

K: Mikä on JavaScriptin rooli web-kehityksessä?

V: JavaScript on olennainen skriptikieli web-kehityksessä, sillä se kertoo verkkosivuille, miten niiden tulee käyttäytyä, ja se voi muuttaa HTML:n ja CSS:n ulkoasua.

K: Kuka on vastuussa HTML:n luomisesta?

V: HTML:n on tehnyt World Wide Web Consortium (W3C).

K: Mikä on HTML:n nykyinen standardiversio?

V: Syyskuussa 2018 HTML 5 on HTML:n uusin standardiversio, versio 5.2.