HTML
HTML-KOULUTUSTA VUONNA 2025!
Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! Koulutuksen järjestää asiantuntijasi Koulutus- ja konsultointipalvelu KK Mediat.
HTML:n elementit, ominaisuudet ja semanttinen merkitys
Mikä on HTML-elementti?
HTML-elementit ovat verkkosivun rakenteen perusyksiköitä. Ne määrittelevät sisällön osien - kuten otsikoiden, kappaleiden, listojen ja linkkien - roolin ja mahdollistavat metadatan (tiedon tiedosta) sisällyttämisen. Koska elementti itsessään on abstrakti rakenne, elementtien kuvaaminen HTML-koodissa tapahtuu nk. tagien avulla.
HTML:ssä elementti toimii säiliönä: se voi sisältää tekstiä, muita elementtejä, tai olla jopa tyhjä. Seuraava listaus sisätää esimerkkejä HTML-elementeistä ja niitä kuvaavista tageista:
- Dokumentti: vastaa koko HTML-dokumenttia. Se sisältää kaikki muut elementit ja sitä kuvataan
<html>-tagilla. - Otsikko: sisältää sivun otsikkotekstin. HTML tarjoaa useita erilaisia otsikoita, esimerkiksi metaotsikko kuvataan tagilla
<title>ja ensisijainen sisältöotsikko tagilla<h1>. - Pakotettu rivinvaihto: ei sisällä muita elementtejä eikä sisältöä. Se ilmaistaan tagilla
<br>.
Mitä hyötyä elementeistä on? Ja miten semanttinen HTML liittyy asiaan?
HTML, aivan kuten XML ja muut rakenteelliset kuvauskielet, perustuu sille lähtökohdalle, että elementin tulisi kuvata sen sisällä olevaa sisältöä. Esimerkiksi, kun käytät osoite-elementtiä HTML-tiedostossa, määrität, että kyseinen kohta sisältää fyysisen katuosoitteen, postitusosoitteen, tai muun vastaavan yhteystiedon.
Tämä nk.semanttinen rakenne auttaa sekä ihmisiä että hakukoneita ymmärtämään, mitä eri osat sivun sisällöstä tarkoittavat ja miten ne liittyvät toisiinsa. Oikein toteutettu semanttinen rakenne tukee myös hakukonemarkkinointia, sillä hakukoneiden käyttämät IR-menetelmät suosivat sivuja, joissa sisältö on selkeästi ja oikein jäsennelty.
Kuinka HTML:n elementtejä voi ryhmitellä?
Yleisin tapa elementtien ryhmittelyyn perustuu niiden visuaaliseen esitystapaan:
- Lohkoelementti: aiheuttaa rivinvaihdon sekä ennen että jälkeen elementtiä. Lohkoelementit voivat sisältää muita lohkoelementtejä tai rivinsisäisä elementtejä. Esimerkkinä lohkoelementistä on kappale.
- Rivinsisäinen elementti: ei aiheuta rivinvaihtoa. Rivinsisäiset elementit voivat sisältää joko dataa tai muita rivinsisäisiä elementtejä. Esimerkkinä rivinsisäisestä elementistä on korostettu teksti tai ankkuri(linkki).
- Taulukkoelementti: lohkoelementin erikoistyyppi, jonka avulla kuvataan taulukkomuotoista tietoa. Esimerkkinä taulukkoelementistä on taulukon solu.
- Luettelo- eli listaelementti:lohkoelementin erikoistyyppi, jonka avulla kuvataan eri tyyppisiä luetteloja ja listoja. Esimerkkinä luetteloelementistä on numeroitu lista.
- Lomake-elementti: lohkoelementin erikoistyyppi, jonka avulla kuvataan lomakkeita ja niihin liittyvää tiedon välitystä. Esimerkkinä lomake-elementistä on syötekenttä.
Tämä ryhmittelykäytäntö liittyy läheisesti CSS-kielen display-ominaisuuteen.
Esimerkiksi kaikkien lohkoelementtien display-ominaisuuden arvo on "block",
rivinsisäisillä elementeillä display-arvo on vastaavasti "inline".
Elementtien ryhmittelyä voi lähestyä myös niiden sisältämän tiedon kautta. XHTML esitteli modulaarisen elementtimallin, jossa elementit jaoteltiin niiden semanttisen käyttötarkoituksen mukaan. Tämän mallin suurimpana heikkoutena oli ryhmien suuri määrä ja sisäkkäisyys, mikä teki mallista monimutkaisen ja vaikeasti muistettavan. Tämän vuoksi tekninen määrittelytyö tämän ryhmittelytavan osalta on lakkautettu.
Mitä ovat HTML-elementien ominaisuudet?
Elementeillä voi olla ominaisuuksia, joiden avulla niihin voidaan liittää lisäpiirteitä tai ohjeita siitä, kuinka selaimen tulisi käsitellä sitä. Yleisin käyttökohde elementin ominaisuudelle on luoda yhteys CSS-tyylimäärittelyn ja elementin ilmentymän välille. Tämä mahdollistaa esimerkiksi sen, että vain tietyt painikkeet verkkosivustolla ovat vihreitä.
HTML sisältää joukon yhteisiä ominaisuuksia (engl. common attributes), jotka ovat käytettävissä lähes jokaisella HTML-elementillä. Tälläisiä ominaisuuksia ovat:
id: yksilöi elementin ja määrää sille yksilöllisen tunnisteen, jolla siihen voidaan viitata CSS:stä ja JavaScriptistä käsin.class: Määrittelee elementin luokan. Luokan avulla samaan luokkaan kuuluviin elementteihin voidaan viitata CSS:stä ja JavaScriptistä käsin.title: määrittelee elementille otsikon, joka näkyy kun kursori sijoitetaan elementin päälle.dir: määrittelee tekstin esityssuunnan (oikealta vasemmalta, tai vasemmalta oikealle)lang: määrittelee elementissä tai koko dokumentissa käytetyn kielen.
Lisäksi elementeillä on useita elementtikohtaisia ominaisuuksia.
Esimerkiksi kuvaelementin img ominaisuuksiin kuuluvat kuvan lähde (src),
kuvan koko (height) sekä vaihtoehtoinen tekstiesitys (alt).
Kuten elementit, niin myös ominaisuudet ovat abstraktio. Käytännön tasolla ominaisuuksia ilmaisevat nk. attribuutit. Tutustumme sekä tageihin että attribuutteihin tarkemmin tämän oppaan seuraavassa osassa.
Artikkelin tiedot
Otsikko: HTML:n elementit, ominaisuudet ja semanttinen merkitys
Kuvaus: Tutustu HTML-elementtien ja attribuuttien perusteisiin. Opi mitä semanttinen HTML on, ja miksi se on olennainen asia hakukoneoptimoinnin kannalta.
Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat
Viimeksi päivitetty:
Kirjoittaja: Keijo Kortelainen
Keijo on verkkoliiketoiminnan ja digimarkkinoinnin asiantuntija, joka on auttanut satoja suomalaisia yrityksiä kasvattamaan näkyvyyttään ja myyntiään verkossa. Keijolla on BBA-tutkinto verkkokaupasta (BBA in eCommerce) sekä lähes kolmen vuosikymmen kokemus web-teknologioista (mm. HTML, CSS, JavaScript, PHP ja SQL) ja sisältömarkkinoinnista. Hän toimii yrittäjänä, konsulttina ja freelancerina – ja on jakanut osaamistaan 2kmediat.com-sivustolla yli 20 vuoden ajan.
