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 tagit, attribuutit ja entiteetit

HTML-opassarjan tässä osassa keskitymme siihen, miten elementit ja ominaisuudet esitetään HTML-koodissa. Keskeisiä käsitteitä tässä ovat tagit, attribuutit ja entiteetit.

HTML:n tagit

Tagien tehtävänä on ilmentää elementtiä. Toisin sanoen: elementti on abstrakti käsite, tagi sen konkreettinen toteutus HTML-koodissa.

Tagi muodostetaan asettamalla elementin nimi pienillä kirjaimilla pienempi kuin (<) ja isompi kuin (>) -merkkien väliin. Esimerkiksi: 


<elementi>

Esimerkiksi kappale (paragraph) merkitään seuraavasti:


<p>

Elementit sisältävät usein tekstisisältöä, ja monesti myös muita elementtejä. Tällöin HTML-tagin tehtävänä on muodostaa tiivis "astia", johon sisältö sijoitetaan. Tämä toteutetaan lisäämällä tagiin lopetusmerkintä, joka rajaa elementin vaikutusalueen. Lopetusmerkintä on rakenteellisesti samanlainen kuin alkutunniste, mutta se alkaa kauttaviivalla (/) elementin nimen edessä. 


<elementin >Sisältö tulee tähän väliin</elementi>

Yleinen esimerkki tästä on body-elementti, jonka sisälle sijoitetaan usein leipätekstiä: 


<body>
<p>Tämä on kappaletekstiä, jonka sisällä on <span>rivinsisäisen elementti span</span></p>
</body>

Lopetusmerkintöjen käyttö on tärkeää, sillä virheelliset tai puuttuvat lopetusmerkinnät voivat johtaa odottamattomaan käyttäytymiseen verkkosivun muissa osissa. Hierarkisuuden ilmaisulla on käytännön vaikutuksia niin CSS:n cascade-mallin toimivuuden kuin JavaScriptin avulla tapahtuvaan DOM:n hallintaan.

Jos elementillä ei ole sisältöä, on tagi muotoa <elementin_lyhenne> (html) tai <elementin_lyhenne/> (xhtml).

Tagin nimi on usein johdettu elementin englanninkielisestä nimestä tai sen lyhenteestä. Seuraavassa taulukoissa on listattu yleisimmät HTML:n tagit sekä niitä vastaavat elementit ryhmiteltynä.

Rakenne-elementit ja niitä vastaavat tagit
TagiElementti (englanniksi)
<head>Dokumentin ylätunniste (Document header)
<title>Dokumentin otsikko (Document title)
<body>Dokumentin runko (Document Body)
<main>Pääsisältö (Main)
<section>Dokumentin tai osion osio (section)
<article>Dokumentin tai osion sisältämä artikkeli (article)
<header>Dokumentin tai osion alatunniste (Header)
<nav>Dokumentin tai osion menu (Navigation)
<footer>Dokumentin tai osion alatunniste (Footer)

Otsikko-elementit ja niitä vastaavat tagit
TagiElementti (englanniksi)
<h1>1. tason otsikko (Header 1)
<h2>2. tason otsikko (Header 2)
<h3>3. tason otsikko (Header 3)
<h4>4. tason otsikko (Header 4)
<h5>5. tason otsikko (Header 5)
<h6>6. tason otsikko (Header 6)

Lohko-elementit ja niitä vastaavat tagit
TagiElementti (englanniksi)
<div>Tekstilohko (Division)
<p>Kappale (Paragraph)
<blockquote>Pitkä lainaus (Block quotation)
<hr>Viiva (Horizontal rule)
<img>Kuva (Image)
<canvas>Piirtoalue (Canvas)

Rivinsisäiset-elementit ja niitä vastaavat tagit
TagiElementti (englanniksi)
<a>Ankkuri (Anchor)
<b>Lihavoitu (Bold)
<cite>Lyhyt lainaus (Citation)
<em>Korostus (Emphasized)
<span>Lyhyt tekstilohko (Span)
<strong>Tärkeä (Strong)

Lista-elementit ja niitä vastaavat tagit
TagiElementti (englanniksi)
<ul>Järjestämätän lista (Unordered list)
<ol>Järjestetty lista (Ordered list)
<li>Listakohta (List item)
<dl>Määrittelylista (Definition list)
<dt>Määriteltävä termi (Definition term)
<dd>Termin määritelmä (Definition description)

Taulukko-elementit ja niitä vastaavat tagit
TagiElementti (englanniksi)
<table>Taulukko (Table)
<td>Taulukon solu (Table data cell)
<th>Taulukon otsikkosolu (Table header cell)
<tr>Taulukon rivi (Table row)

Lomake-elementit ja niitä vastaavat tagit
TagiElementti (englanniksi)
<form>Lomake (Form)
<input>Lomakkeen syötekenttä (Input field)
<label>Lomakekentän kuvaus (Label for input)
<button>Painike (Button)

Erikois-elementit ja niitä vastaavat tagit
TagiElementti (englanniksi)
<br>Rivinvaihto (Break)
<meta>Metatieto (Meta data)
<script>JavaScript koodi (JavaScript Code)
<style>CSS tyyli (CSS Style)
<link>Viittaus ulkoiseen resurssiin (link)

HTML:n attribuutit

Elementien ominaisuuden kuvaamiseen käytetään koodissa nk. attribuutteja. Attribuutit liitetään elementtiä kuvaavan tagin yhteyteen seuraavalla syntaksilla: 


<elementti attribuutti="arvo" >

Attribuutit määritellään aina elementin aloituksen yhteydessä. Attribuutin arvo sijoitetaan aina lainausmerkkien sisään.

Esimerkiksi: 


<img src="kuva.gif" width="20" height="40" alt="Kuva perhosesta"/>

HTML:n entiteetit ja erikoismerkkien merkintä

HTML-tiedostojen sisällössä ei voi käyttää erikoismerkkejä, kuten <, > tai & sellaisenaan, koska ne ovat osa HTML-kielen syntaksia. Nämä varatut erikoismerkit - kuten myös skandinaaviset kirjaimet ja matemaattiset symbolit - voidaan esittää HTML-entiteettien avulla. HTML-entiteetti on erikoismerkkiä vastaava koodimerkintä, jonka selain osaa tulkita ja esittää oikealla tavalla.

Entiteetin voi määrittää joko nk. ASCII-entiteettinä tai HEX-entiteettinä. Näistä kahdesta ASCII-entiteetit ovat suositumpia.

ASCII-entiteetissä jokaisella entiteetillä on yksilöllinen nimi, kuten lt (less than, <): 


&amp;merkkijonoilmaisu;

HEX-entiteetissä entiteetille on puolestaan määritelty merkkiä vastaava HEX-arvo (esim. &#x3C; on sama kuin <). 


&amp;#numerosarjailmaisu;

Seuraava listaus sisältää yleisimmät ASCIi-entiteetit: 


<              &lt;
>              &gt;
&             &amp;
"            &quot;
ä            &auml;

Useimmat koodieditorit kykenevät automaattisesti muuntamaan erikoismerkit entiteeteiksi, mikä helpottaa entiteettien käyttöä.

Kommentit

Kommenttien avulla kehittäjä voi lisätä HTML-dokumenttiin huomautuksia, muistiinpanoja ja dokumentaatio, joka ei ole tarkoitettu loppukäyttäjälle. Kaikissa rakenteellisissa merkintäkielissä (HTML, XML, SGML) kommentti merkitään samalla tavalla: 


<!-- Kommentti -->

Esimerkiksi :


<p> Jotain kappaletekstiä, jossa on   <!--tämä ei näy asiakkaalle --> piilotekstiä.</p>

Koska lähdekoodi on aina luettavissa, ei kommentteihin tulisi ikinä kirjoittaa mitään salassapidettävää sisältöä, kuten salasanoja tai API-avaimia.

Artikkelin tiedot

Otsikko: HTML:n tagit, attribuutit ja entiteetit – peruskäsitteet käytännössä

Kuvaus: Opi kirjoittamaan toimivaa ja validia HTML-koodia. Tämä opas esittelee HTML-tagit, attribuutit, entiteetit sekä niiden oikeaoppisen käytön.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: