Web-kehityksen Perusteet

HTML-Tagit, Elementit ja Attribuutit

Helppo
20 min

HTML-tagit, -elementit ja -attribuutit ovat tärkeitä rakennuspalikoita verkkosivujen luomisessa.

HTML-elementit

HTML-dokumentin sisältö koostuu useista eri palasista, kuten kuvista, erilaisista teksteistä, tyyleistä, skripteistä, listoista, taulukoista, jne. Näitä palasia kutsutaan HTML-elementeiksi. Ja HTML-elementit luodaan HTML-koodissa HTML-tageilla.

HTML-tagit

HTML-tagi aloittaa ja lopettaa HTML-elementin. HTML-elementti voi sisältää tekstiä, muita HTML-tageja, tai muita elementtejä. Esimerkiksi, seuraava koodi luo otsikkoelementin käyttäen otsikkotagia, <h1>, joka aloittaa otsikon ja </h1> joka lopettaa sen:

<h1>Tämä on otsikko</h1>
Kokeile itse!

HTML-attribuutit

HTML-attribuutit ovat avainsanoja, jotka määrittävät HTML-elementtien ominaisuuksia. Attribuutit määritellään HTML-elementtien sisällä ja niitä käytetään usein tarkentamaan elementin tietoja. Esimerkiksi, <img> -tagi käyttää src-attribuuttia määrittelemään kuvan URL:n. Seuraava koodi näyttää <img>-tagin, joka käyttää src-attribuuttia

<img src="rocketship.gif" alt="Kuvateksti">
Kokeile itse!

Molempi parempi!

HTML-elementit ja -attribuutit voidaan myös yhdistää, jotta voidaan tarkentaa elementin sisältöä ja ulkonäköä. Esimerkiksi, seuraava koodi sisältää <a>-tagin, joka luo hyperlinkin URL-osoitteeseen ja käyttää title-attribuuttia näyttämään hiiren kohdistimen päällä olevan tekstin:

<a href="https://www.hakatemia.fi" title="Siirry Hakatemiaan">Hakatemia</a>
Kokeile itse!
hakatemia pro

Valmis ryhtymään eettiseksi hakkeriksi?
Aloita jo tänään.

Hakatemian jäsenenä saat rajoittamattoman pääsyn Hakatemian moduuleihin, harjoituksiin ja työkaluihin, sekä pääset discord-kanavalle jossa voit pyytää apua sekä ohjaajilta että muilta Hakatemian jäseniltä.