HTML-opas aloittelijoille

Jos haluat ryhtyä webmasteriksi ja oppia luomaan verkkosivuja, saatat kokea, että HTML:n käyttäminen on melko pelottavaa.

Tätä ei kuitenkaan voi välttää, sillä suurin osa vieraillessasi vierailemastasi verkkosivuston laskeutumissivuista on kirjoitettu ja jäsennelty HTML-elementtien avulla. Itse asiassa HTML:ää käytetään nykyään yli 74 prosentissa kaikista tunnetuista verkkosivustoista, ja tämä kieli auttaa myös parantamaan kaikkea sivustosi suunnittelusta sen sisältämän sisällön laatuun.

Tässä oppaassa tutustumme HTML:n perusperiaatteisiin ja sen mahdollisiin sovelluksiin, ennen kuin tarkastelemme esimerkkejä yksittäisistä elementeistä, joita käytät verkkosivujasi koodatessasi.

Mikä on HTML?

Yksikertaisesti sanottuna HTML edustaa standardoitua merkintäkieltä, jota käytetään verkkosivujen luomisessa verkossa. Se on lyhenne sanoista Hyper Text Markup Language, ja sen ensisijaisin tehtävä on luoda yksittäisten aloitussivujen rakenne, ulkoasu ja esitystapa. Vaikka verkkoselaimet eivät suoraan näytä HTML-kieltä, sillä on keskeinen rooli näkyvien, helppokäyttöisten ja helppokäyttöisten sivustojen luomisessa.

HTML:n perustana on myös joukko yksittäisiä elementtejä, jotka vähitellen rakentavat verkkosivuja, jäsentävät sisällön esitystapaa ja herättävät verkkosivuston eloon. Nämä elementit luodaan ja sisällytetään ”tageihin”, jotka määrittelevät vuorottelevia sisällön osia, kuten otsikoita, kappaleita ja vastaavia esimerkkejä.

Tutustumme näihin elementteihin ja niiden rakenteeseen tarkemmin jäljempänä ja tarkastelemme samalla, miten niitä voidaan muokata yksilöllisiksi, jotta verkkosivuillesi voidaan tuoda värejä, linkkejä ja muuttuvaa typografiaa.

Missä HTML:ää käytetään?

Kuten näemme, HTML:n yleisin käyttökohde on yksittäisten laskeutumissivujen suunnittelu, joista verkkosivusto koostuu. Tämä ei kuitenkaan ole suositun koodaustyökalun ainoa käyttökohde, mutta sen lisäkäyttökohteiden ymmärtäminen auttaa sinua saamaan kielestä kaiken irti uutena webmasterina. Seuraavassa on siis muutamia muita tapoja, joilla HTML:ää voidaan soveltaa:

• Luo muokattavia elementtejä olemassa olevan sivun sisällä. Jos aiot sallia blogikirjoitusten kommentoinnin tai käyttäjien tuottaman sisällön julkaisemisen sivustollasi, voit käyttää HTML-koodinpätkiä tämän mahdollistamiseksi. Näiden elementtien avulla käyttäjät voivat korostaa avainsanoja, upottaa linkkejä ja muotoilla kommentteja moderaattorina asettamiesi rajoitusten mukaan.
• Luo lisäsisältöä sähköpostia varten. Sähköposti käyttää HTML:ää myös rikkaiden tekstiviestien kielenä, joissa on linkkejä, tekstiä ja monia muita elementtejä, joita ei voi esittää pelkällä tekstillä. Jos siis haluat jakaa verkkosivustoosi liittyvän e-kirjan sähköpostitse, voit hyödyntää HTML:ää viestisi vaikutuksen optimoimiseksi.
• Ymmärrä tietokoneeseen asennettuja offline-apuasiakirjoja. Mielenkiintoista on, että HTML:ää käytetään formaattina tietokonepohjaisissa ohjeasiakirjoissa, jotka ovat käytettävissä offline-tilassa. HTML:n perustiedot voivat siis auttaa sinua ymmärtämään laitteistoon liittyviä ongelmia ja ratkaisemaan ne nopeammin, mikä puolestaan voi varmistaa, että pystyt palauttamaan verkkosivustosi nopeammin tilanteissa, joissa se on mennyt offline-tilaan.

HTML-sivun rakenne

Ennen kuin voit rakentaa html-sivun, sinun on oltava perusasiat kunnossa.

Tyypillisesti sivu koostuu kolmesta rakenteellisesta elementistä:

1. Otsikko: Otsikko sisältää sivuston kaikkien sivujen kannalta merkityksellistä sisältöä, kuten logon tai sivuston nimen sekä navigointijärjestelmän. Otsikko näkyy jokaisella sivulla.
2. Päärunko: Tämä vie suurimman alueen verkkosivulla. Se sisältää tarkasteltavalle sivulle ominaista sisältöä.
3. Alatunniste: Alatunnisteen sisältö sisältää yleensä yhteystietoja, toimitusosoitteen tai oikeudellisia ilmoituksia. Kuten otsikko, myös alatunniste esiintyy jokaisella sivulla, mutta se on sijoitettu alareunaan.

Tältä nämä rakenteelliset peruselementit näyttävät yhdessä:

Tässä on toinen esimerkki, jossa käytetään otsikkotunnisteita ja kappaletunnistetta jäsentämään sisältöä esteettisesti. Lisäksi olemme heittäneet alatunnisteen sivun päärungon alapuolella olevaa sisältöä varten:

HTML-tagit

Kaiken HTML-koodin lähtökohtana ovat yksittäiset tagit, joita voidaan käyttää kaikkien keskeisten elementtien luomiseen ja jotka auttavat jäsentämään verkkosivuja.

Alhaalla tarkastelemme yleisimpiä tunnisteita ennen kuin tutkimme, miten niitä voidaan hyödyntää tiettyjen, sivulla olevien elementtien tuottamiseen:

otsikkotunnisteet

Kaikki verkkodokumentit, myös verkkosivut, alkavat otsikolla. Ne rakennetaan HTML-tunnisteiden avulla, ja kieli sallii tällä hetkellä jopa kuusi erikokoista elementtiä, joiden avulla voit myös jäsentää sisältöäsi lisäotsikoilla, väliotsikoilla ja korostetuilla lihavoiduilla tekstiriveillä. Otsikko aloitetaan yksinkertaisesti lisäämällä tekstin eteen <h1> , <h2> , <h3> , <h4> , <h4> , <h5> tai <h6> tagi halutusta koosta riippuen.

Tekstin koteloimiseksi otsikon loppuun on tämän jälkeen liitettävä sulkeva tagi, ja se näytetään HTML-muodossa seuraavasti:

:

Vahvistettuasi tämän tämä kääntyy verkkosivustosi laskeutumissivulla seuraavaksi esteettiseksi:

Tässä muuttuvien otsikoiden eri koot näkyvät selvästi, samoin kuin se, että selain lisää rivin ennen ja jälkeen otsikon. Huomaat myös, että otsikkotekstin lopussa olevalla sulkutunnisteella on hieman erilainen estetiikka, mutta käsittelemme tätä seuraavassa luvussa, kun tarkastelemme tunnisteiden käyttämistä tiettyjen elementtien määrittelyyn.

Kappaleen tunnisteet

Samankaltaista periaatetta sovelletaan kappaleen aloittaviin tunnisteisiin, joita kuvaa <p>. Näin voit jäsentää sisältösi ja jakaa sen asiaankuuluviin kappaleisiin, mikä puolestaan johtaa helpompaan ja saumattomampaan lukukokemukseen. Jälleen kerran <p>-tagi tulisi sijoittaa asiaankuuluvan tekstin alkuun, ennen kuin lopussa käytetään vaihtoehtoista sulkemistunnistetta, joka viimeistelee vaikutuksen. Toisin kuin otsikkotunnisteissa ei kuitenkaan ole numeerisia erilaisia, joilla voidaan muuttaa kappaleessa esitetyn tekstin kokoa.

Ei HTML-muodossa, tämä jakaa tekstin valmiilla verkkosivulla seuraavasti:

Rivinvaihtotagit

Ensimmäiset esimerkit edustavat HTML:n perustavimpia tageja, mutta on muitakin, jotka hyödyntävät erilaista muotoa ja vaihtoehtoisia sulkemisotteita. Otetaan esimerkiksi rivinvaihto, jolla luodaan ero, jossa tekstirivit katkaistaan ja jatketaan seuraavalla rivillä. Rivinvaihdon ja kappaleiden välillä on HTML:n alalla keskeinen ero, sillä kun jälkimmäiset ovat tavallisia lohkoelementtejä, jotka sisältävät tekstiä, edellinen luo erottelun olemassa olevan <p>-elementin sisälle.

Sen vuoksi rivinvaihdot edustavat HTML:ssä tyhjää elementtiä, eikä niitä siksi määritellä avaavilla eikä sulkevilla tageilla. Sen sijaan niitä kuvataan <br />-tunnisteella, joka voidaan lisätä olemassa oleviin <p>-elementteihin tekstin erottamiseksi ja mahdollisesti tärkeiden tietojen korostamiseksi. Yksittäinen välilyönti merkin <be> ja etuviivan välissä on ratkaisevan tärkeää, sillä muuten tagi ei ole tunnistettavissa HTML-muodossa.

Tekstiä sovellettaessa tämä hajottaa tekstin seuraavasti:

Kuten näet, voit käyttää rivinvaihtoja niin usein kuin haluat olemassa olevan kappale-elementin sisällä, kunhan ne tuovat lisäarvoa ja tekevät tiedosta helpommin sulavaa. Näet myös, että avaavat ja sulkevat kappale-tunnisteet pysyvät muuttumattomina, ja rivinvaihtotunnisteita käytetään muuttamaan niiden sisältämän tekstin asettelua.

Tämä on yksi esimerkki siitä, miten HTML-tunnisteita voidaan käyttää olemassa olevien elementtien muuttamiseen, mikä on avainasemassa verkkosivujen ja sisällön visuaalisen asettelun määrittelyssä.

Vaakasuorat viivat

Samoin on olemassa muitakin tunnisteita, joita voidaan käyttää <p>-elementin sisällä tai erottamaan tekstikappaleita edelleen toisistaan verkkosivuillasi. Yksi yleisimmin käytetyistä on <hr>-tagi, jonka avulla voidaan luoda tyhjä elementti, joka piirtää visuaalisen, vaakasuoran viivan verkkodokumentin vaihtoehtoisten osioiden väliin. Voit haluta sijoittaa viivan kahden tekstikappaleen väliin esimerkiksi keskittyäksesi uudelleen lukijaan tai yksinkertaisesti esitelläksesi uuden visuaalisen elementin. Näin luot tällaisen katkon HTML:ssä:

Tässä hr-merkkien välissä oleva katkaisu ja etuviiva korostavat tyhjän elementin rakentamista, kun taas jälleen kerran ei tarvita sulkutunnistetta vaikutuksen loppuunsaattamiseksi. Näin saadaan aikaan seuraava visuaalinen ilme:

Kuvatunnisteet

Kuvatunnisteet edustavat HTML:ssä myös tyhjiä elementtejä, mikä tarkoittaa jälleen kerran sitä, että niissä ei ole sulkevaa tagia. Koska ne sisältävät vain attribuutteja, jotka liittyvät sivustolle upotettavan kuvan URL-osoitteeseen, ne määritellään yksinkertaisesti elementin alussa olevalla <img >-tagilla. Nämä voidaan sijoittaa mihin tahansa sivustollasi, vaikka on epätavallista sisällyttää ne olemassa oleviin elementteihin, kuten kappaleisiin tai otsikoihin. Seuraavassa esitetään tyypillinen HTML-kuvatagi:

Kuvallesi kannattaa antaa myös vaihtoehtoinen teksti, joka auttaa ihmisiä katsomaan kuvaa hitaiden latautumisaikojen tai ruudunlukuohjelman käytön yhteydessä. Näin jos selain ei löydä kuvaa, se näyttää vaihtoehtoisen attribuutin arvon katsojille. Tässä käytetään jälleen kerran image-tunnistetta, mutta se sisältää erilaiset attribuutit:

HTML-elementit

Edellisenä tarkasteltiin, miten yksinkertaisia HTML-tageja käytetään sivun elementtien määrittelyyn, ja samalla tutkittiin, miten niitä voidaan muokata edelleen käyttämällä tyhjiä elementtejä, jotka sisältävät kuva- ja rivinvaihtotageja. Tämä auttaa meitä ymmärtämään tunnisteiden ja elementtien välistä suhdetta ja sitä, miten niitä voidaan käyttää erityyppisen sisällön määrittelyyn verkkosivustollasi.

Kun kaikkia HTML-kielen osa-alueita edustaa tunniste, esimerkiksi sisällön sisältävällä määritellyllä elementillä on oltava sekä aloittava että lopettava tunniste. Otsikot ja kappaleet ovat siis HTML-elementtejä, koska niissä käytetään alku- ja lopputunnisteita kapseloimaan ja täydentämään asiaankuuluvaa tekstiä. Sen sijaan tyhjät elementit sisältävät joko attribuutteja tai eivät sisällä lainkaan sisältöä, jolloin niitä voidaan käyttää olemassa olevien elementtien sisällä ilman sulkemistunnistetta.

HTML-elementtien määrittely

Käytettäessä esimerkkejä, kuten otsikoita ja kappaleita, aloitus- ja sulkemistunnisteiden oikea soveltaminen on ratkaisevan tärkeää. Aloittava tagi (kuten <h1> tai <p>) määrittelee esimerkiksi kyseisen elementin, kun taas sulkeva tagi varmistaa, että tätä elementtiä ei jatketa koko loppusivulla. Jos sulkevaa </ p>-tunnistetta ei käytetä esimerkiksi halutun kappaleen lopussa, teksti ilmestyy yhtenäisenä lohkona, joka on ruma ja erittäin vaikealukuinen.

Kaikki sulkevat tunnisteet ovat identtisiä aloittavien tunnisteiden kanssa lukuun ottamatta sitä, että ensin mainituissa tunnisteissa on etummainen vinoviiva (forward slash) ennen asiaankuuluvia merkkejä. Näin ollen <h1>-otsikon tapauksessa päättävä tagi on </ h1> , kun taas kappaleiden kohdalla käytetään aina </ p> määrittelemään tauko tekstissä. Tämä vaatii huomiota yksityiskohtiin koodauksen aikana, ja on tärkeää huomioida otsikoita ohjelmoitaessa, että käyttämääsi numeroa (kuten h1 tai h2) sovelletaan sekä aloittavassa että päättävässä tagissa.

Sisäkkäisten HTML-elementtien käyttäminen

Tässä vaiheessa on selvää, että HTML-dokumentit ja verkkosivut muodostuvat erilaisista elementeistä koostuvasta puusta, jotka toimivat rakennuspalikoina erilaisille varoille. Olemme myös tarkastelleet, miten nämä elementit voidaan muodostaa ja miten niitä voidaan käyttää verkkosisällön jäsentämiseen, ja jatkamme tätä nyt tarkastelemalla sisäkkäisiä HTML-elementtejä.

Niin kuin tyhjiä elementtejä ja itsenäisiä tunnisteita (kuten <br / >voidaan sisällyttää määriteltyihin HTML-elementteihin, myös niin sanottuja sisäkkäisiä elementtejä voidaan sijoittaa sisällön, kuten otsikoiden ja kappaleiden, sisään. Tällaisia elementtejä ovat esimerkiksi lihavoitu ja kursivoitu kirjoitus sekä alleviivattu teksti, kun taas niitä voidaan käyttää lisäämään sisältöön persoonallisuutta ja kiinnittämään lukijan huomio tiettyihin kiinnostaviin kohtiin.

Hiljainen, kursivoitu ja yliviivattu teksti HTML:ssä

Esitettäkö vaikkapa, että haluat korostaa sanaa olemassa olevan kappale-elementin sisällä. Voit saavuttaa tämän tekemällä siitä lihavoidun käyttämällä yksinkertaisia tageja tavallisen <p>-elementin sisällä. HTML:ää käyttäen ohjelmoit tämän seuraavasti:

Tässä sisäkkäisessä elementissä on sekä aloittava että lopettava tagi, jotka molemmat noudattavat samanlaista muotoa kuin otsikoihin ja kappaleisiin liittyvät tagit. Niitä voidaan käyttää saumattomasti olemassa olevien elementtien sisällä, ja tässä tapauksessa se tuottaa seuraavat tulokset:

Nyt sanotaan, että haluat myös muuttaa tämän sanan typografiaa niin, että se on myös kursivoitu. Tämä onnistuu yksinkertaisesti lisäämällä toinen sisäkkäinen elementti, joka tulisi koodata näin:

Kuten huomaatte, alku- ja lopputunnisteet kursiiville on yksinkertaisesti sisällytetty <p>elementtiin. Tämä muuttaa nyt elementin sisällä olevan sisällön siten, että se näyttää seuraavalta:

Voi tietysti olla, että haluat korostaa tätä sanaa eri tavalla. Voit siis käyttää vaihtoehtoista sisäkkäistä elementtiä, kuten yliviivausta (jota edustavat tagit <s> ja </s>. Näitä tunnisteita voidaan soveltaa samalla tavalla <p>-elementin sisällä, ja ne näkyvät HTML:ssä seuraavasti:

Tässä tapauksessa teksti näkyy asiakirjassa tai aloitussivulla seuraavasti:

Tämä tarjoaa käsityksen elementeistä, jotka voidaan muodostaa tagien avulla, mikä puolestaan määrittelee verkkosivujesi rakenteen ja niiden sisällön. Tämän lisäksi myös tyhjiä ja sisäkkäisiä elementtejä voidaan käyttää sisällön tarkempaan määrittelyyn.

HTML-attribuutit

Jos tunnisteet ovat rakennuspalikoita, jotka rakentavat ja määrittelevät elementtejä, HTML-attribuutteja voidaan käyttää niiden ominaisuuksien (kuten tyylin, värin ja kielen) muokkaamiseen. Kaikilla HTML-elementeillä on ydinattribuutit, jotka antavat ydintietoja ja jotka määritetään aina stat-tagin sisällä. Ne ovat yleensä pareittain, joten ne esiintyvät usein seuraavassa muodossa: name=”value.”

Yksinkertaisesti sanottuna nimi edustaa ominaisuutta, jonka haluat asettaa, kun taas arvo liittyy erityisiin kriteereihin, jotka haluat sisällyttää.

HTML-elementteihin voidaan soveltaa lukuisia attribuutteja, mutta aloittelevien webmasterien kannalta tärkeimpiä ovat:

Aattribuutti ’lang’

Yksittäinen perusattribuutti määrittelee dokumentin ja sen elementtien kielen. Se ilmoitetaan ’lang’-attribuutilla, ja vaikka se jää helposti huomiotta, siitä on se hyöty, että se tekee sisällöstä helpommin lähestyttävää ruudunlukijoille ja hakukoneille. Se esitetään yleensä asiakirjan alussa seuraavassa muodossa:

Lang-attribuutin jälkeen kahdella ensimmäisellä kirjaimella määritetään kieli (joka tässä tapauksessa on englanti). Yhdysmerkin jälkeen seuraavat kaksi kirjainta määrittelevät murteen, joka ei kuitenkaan ole läsnä kaikissa kielissä. On tärkeää, että saat tämän attribuutin oikein, jos haluat menestyksekkäästi tavoittaa yleisösi.

Atribuutti ”align”

Olemme jo käsitelleet HTML-attribuuttien muotoa (name=”value”), ja paras ilmentymä tästä tapahtuu, kun yrität kohdistaa sisällön elementtien sisällä. Voit esimerkiksi päättää keskittää kaikki kappaleet tietyllä sivulla, jolloin linjaus on ominaisuus, jonka haluat asettaa. Tämän jälkeen attribuutin arvona on ”center”, vaikka sinulla on mahdollisuus tasata teksti vasemmalle tai oikealle.

Tämä kohdistaa <p>-elementtisi sivun keskelle ja luo yhdenmukaisen asettelun, joka sopii sivustosi erityisluonteeseen (ks. alla):

The ’href’-attribuutti

Jos aiot rakentaa näkyvän verkkosivun, on tärkeää, että sisällytät siihen sekä saapuvia että lähteviä linkkejä. Linkkisalkun rakentaminen, joka sisältää takalinkkejä sisäisille laskeutumissivuille, on myös toteuttamiskelpoinen strategia, joten sinun on opittava koodaamaan nämä HTML:llä.

HTML-linkit määritellään <a>tagilla, joka sisältää kohdelinkin sekä siihen liittyvän ankkuritekstin, johon URL-osoite tulee. Se on ’href ’ -attribuutti, joka määrittää sivuston osoitteen, mutta tämä on sisällytetty osaksi aloitustunnistetta. Se koodataan HTML:ssä seuraavasti:

Tämä korostaa selvästi aloittavan ja päättävän tagin välistä eroa, ja se kääntyy laskeutumissivullasi seuraavasti:

”väri”-attribuutti

Tämä on toinen tärkeä attribuutti, sillä värien käyttö voi tuoda eloa verkkosivustoosi ja auttaa samalla luomaan tärkeitä kontrasteja ja vahvaa design-estetiikkaa. HTML:ssä väri voidaan määrittää käyttämällä sen nimeä, mutta on myös mahdollista käyttää RGB- tai HEX-arvoa tämän tavoitteen saavuttamiseksi. Ensin mainittua vaihtoehtoa on kuitenkin helpointa noudattaa, kun taas sitä voidaan soveltaa myös otsikoihin, kappaleisiin ja muihin sivusi elementteihin.

Tämä on tyyliattribuutti, ja valitsemasi väri edustaa arvoa, jonka haluat asettaa. Kun sovellat esimerkiksi punaista väriä pääotsikkoon, se näyttää seuraavalta:

Kun olet soveltanut tätä elementtiä, se näkyy sivustollasi seuraavasti:

Jälleen kerran elementin määrittelevien alku- ja lopputunnisteiden välillä on selvä ero, kun taas tämä on yksi helpoimmista HTML:ssä sovellettavista määritteistä. Se myös korostaa entisestään HTML-attribuuttien name=”value-muotoa, mikä tekee niiden oppimisesta ja soveltamisesta paljon helpompaa koko verkkosivustollasi.

Testaa itse

Kun HTML:stä ja sen yksittäisistä elementeistä on saatu perusymmärrys, seuraavana askeleena on ryhtyä joihinkin yksinkertaisiin projekteihin ja soveltaa teoreettista tietämystä käytännön haasteiden ratkaisemiseen.

Alhaalla esitetyssä harjoituksessa on esitelty tekstiä lukuun ottamatta ja pyydetty muotoilemaan sen eri osia HTML:n avulla. Hyödynnä opasta ja kaikkea tähän mennessä oppimaasi suorittaaksesi haasteen, kun valmistaudut koodaamaan oman verkkosivustosi.

Kysymykset:

1. Täydennä otsikko-elementti oikealla sulkutunnisteella.
2. Tehdään otsikko lihavoiduksi.
3. Siirrä vaakasuuntainen viiva otsikon alle.
4. Käytä väriattribuuttia ja sävytä ”Kiitos käynnistä” vihreällä
5. Sisällytä tämä hyperlinkki (https://www.w3schools.com/html/) ankkuritekstiin ”Lue lisää.”
6. Sivun otsikossa käytä name=”value”-muotoa kappaleiden vasempaan linjaukseen

HTML-kielen tilastot ja faktat

1. HTML-, head- ja body-elementit ovat olleet osa HTML-määrittelyä 1990-luvun puolivälistä lähtien, ja vielä muutama vuosi sitten ne olivat ensisijaisia elementtejä, joita käytettiin HTML-dokumenttien rakenteen antamiseen. Tilanne on kuitenkin muuttunut dramaattisesti viime vuosina, kun HTML5 on lisännyt joukon uusia tunnisteita, joiden avulla HTML-dokumentin rakenteeseen voidaan lisätä rikas semanttinen merkitys.
2. HTML-dokumentit on aloitettava dokumenttityyppi-ilmoituksella (epävirallisesti ”doctype”). Selaimissa doctype auttaa määrittelemään renderöintitavan. HTML5 ei määrittele DTD:tä, joten HTML5:ssä doctype-ilmoitus on yksinkertaisempi ja lyhyempi.
3. Kännykkäselaimet ovat ottaneet HTML5:n täysin käyttöön, joten mobiilikäyttöön soveltuvien projektien luominen on yhtä helppoa kuin niiden suunnitteleminen ja rakentaminen pienemmille kosketusnäytöille – tästä johtuu responsiivisen suunnittelun suosio. On olemassa joitakin loistavia metatageja, joiden avulla voit myös optimoida mobiilikäyttöön.
4. 78 % sisällönkehittäjistä on sitä mieltä, että rakenne sopii mobiilisovellusten luomiseen, ja 68 % sanoo, että se sopii kaikenlaisten sovellusten suunnitteluun.
5. HTML5:n mukana tulee myös joukko loistavia API-rajapintoja, joiden avulla voit rakentaa paremman käyttäjäkokemuksen ja vahvemman, dynaamisemman verkkosovelluksen – tässä on lyhyt luettelo natiivista API:sta:
   • Drag and Drop (DnD)
   • Offline-tallennustietokanta
   • Selaimen historian hallinta
   • Dokumentin muokkaus
   • Timitoitu mediatoisto
6. HTML5:tä ei hallitse yksi yritys. Yksi sen parhaista ominaisuuksista on se, että se on avoin standardi. Kehittäjillä on vapaus päästää luovuutensa valloilleen ja lisätä niin paljon toimintoja ja ominaisuuksia kuin mahdollista.
7. Vertailtuna muihin selaimiin, jokainen Google Chromen päivitys varmistaa, että se sisältää tuen HTML5:lle. Lisäksi YouTuben oletussoitin on nyt HTML5 ja Googlen Flash-mainokset muutetaan nyt HTML5:ksi.
8. Kehittäjien HTML5:n käyttö (alueittain):
   • Pohjois- ja Latinalainen Amerikka – 70 %
   • Etelä-Amerikka – 61 %
   • ASPAC – 60 %
   • Australia – 60 %
   • Eurooppa – 59 %
   • Afrikka – 59 %
   • Afrikka – 59 %
   • Eurooppa – 59 %
   • Afrikka – 50 %

Yhteenveto

HTML luotiin vasta vuonna 1991 (ensimmäinen versio koodauskielestä julkaistiin vuonna 1995), siitä on nopeasti tullut keskeinen väline toimivien ja visuaalisesti miellyttävien verkkosivustojen suunnittelussa. HTML:n vaikutusvallan taso kehittyy jatkuvasti, ja viimeisimmän version (HTML5) ottaa käyttöön yhä useampi verkkosivusto eri puolilla maailmaa.

Tältä osin HTML:n peruselementtien ja niiden soveltamisen oppiminen on tärkein yksittäinen askel, jonka otat luodaksesi menestyksekkään, näkyvän ja loppujen lopuksi kilpailukykyisen verkkosivuston.