Kafli 3: HTML

HTML stendur fyrir HyperText Markup Language og er lýsandi umbrotsmál (e. descriptive markup language) með sniði sem leyfir okkur að lýsa textanum okkar og nota HyperText hugtakið. Fyrstu útgáfur voru byggðar á SGML, Standard Generalized Markup Language, sem er ISO staðall sem skilgreinir almennt markup mál fyrir skjöl. Það byggir á tveimur hugmyndum:

Þremur árum eftir að W3C var stofnað var HTML 3.2 staðlað og gefið út sem W3C Recommendation í janúar 1997. Í desember sama ár var HTML 4.0 staðlað og skilgreinir það „nútíma“ HTML¹¹ þó svo að þessir staðlar séu enn við gildi ættum við ekki að nýta þá nema í sögulegum tilgangi..

Þegar við vinnum með HTML erum við ávallt að vinna með element²² hægt væri að þýða element sem stak, en þar sem þetta er mikið notað hugtak verður enskt heiti notað., sem er einstakur hluti af vef. Hvert element getur innihaldið önnur element, texta, eða ekkert. <p>Halló <strong>heimur</strong</p> er p element sem inniheldur málsgrein (e. paragraph) með textann „Halló “ og strong element (sem gefur til kynna að merking texta innan þess sé mikilvæg) sem inniheldur textann „heimur“.

Út frá þessum reglum (element inniheldur: element, texta, eða ekkert) getum við myndað tré. Tré³³ þó þetta sé nefnt tré, er það yfirleitt túlkað öfugt, rótarnóðan er sýnd efst og öll börn flæða niður. er gagnaskipan (e. data structure) sem notað er í tölvunarfræði til að tákna stigskipt (e. hierarchical) gögn með nóðum (e. node) sem eiga sér núll eða fleiri börn (e. children), og aðeins eina rótarnóðu (e. root node). Þetta tré myndar vefinn okkar með því að skipta upp og skipuleggja efnið okkar. Þegar vafri les og þáttar (e. parse) tréð, er búin til forritunarleg útgáfa af þessu tré sem heitir DOM (Document Object Model) tré. Dæmi um undirtré (e. subtree), partur úr stærra tré vefs: við höfum rótarnóðuna <article> sem inniheldur tvö <section> með efni:

þá túlkar það tré:

þar sem við höfum <article> sem rótarnóðu sem á tvö börn sem bæði eru <section> elementnóður, fyrra á tvö börn:

Seinna <section> á þrjú börn, sem öll eru elementnóður með stökum textanóðum. Í heildina eru þetta 16 nóður (þó tæknilega séu þau fleiri því allir strengir sem innihalda whitespace tákn milli elementa eru textanóður, með þeim eru þetta í heildina 25 nóður).

Whitespace tákn (bil, línubil, tab) hafa ekki merkingu í HTML, þannig að ef við notum fleiri en eitt bil eða línubil, þá eru þau felld saman í eitt bil. Ef við viljum setja athugasemdir innan HTML skjals getum við notað sérstakt athugasemda element sem mun aldrei birtast notanda: <!-- no comment -->, en er þó þáttað og til staðar í DOM tré sem athugasemdanóða.

Hvert element hefst á byrjunartagi, t.d. <p>. Að sama skapi ættu element í flestum tilfellum að enda á lokatagi, t.d. </p>. Í einhverjum tilfellum hefur element aðeins byrjunartag og er þá möguleiki á að sjálfloka (e. self closing) því (t.d. <hr />) en með tilkomu HTML5 er það ekki krafa (í lagi að skrifa <hr>).

Oft þegar rætt er um HTML er element og tag blandað saman og t.d. talað um p tag þegar það sem átt er við er p element. Þetta er viss smámunasemi en þarna er munur og því æskilegt að tala rétt um hlutina.

Til að mynda tengil (e. hyperlink)—og þar með búið til HyperText skjal—notum við <a> elementið (a stendur fyrir anchor⁴⁴ heitið anchor kemur til þar sem hugsunin er að elementið festi saman tvö skjöl: „The link starts at the "source" anchor and points to the "destination" anchor“): <a href="https://example.org">Lærum HTML</a> inniheldur textann „Lærum HTML“ sem vísar á „https://example.org“ með href⁵⁵ href stendur fyrir HyperText Reference (sjá nánari athugun á uppruna þessa) attribute (href er ekki krafa, án þess höfum við <a> sem myndar ekki hyperlink). Þetta hugtak er grunnurinn að vefnum, að hægt sé að tengja saman mismunandi vefi, óháð því að einhver „á hinum endanum“ geri neitt, eða að leyfi liggi fyrir.

Til þess að ljá element frekari merkingu getum við bætt við nafn-gildis pari (e. name-value pair)⁶⁶ almenn gagnaskipan sem skilgreinir færslu sem hefur nafn (t.d. titill) og gildi (t.d. Vefforritun). með því að nota attribute⁷⁷ gætum þýtt sem eigindi en höldum okkur við enska heitið. sem eru sett á byrjunartagið, t.d. href="https://example.org" sem myndar vísunina sem a element vísar á.

Venjan er, og halda skal sig við það, að skrifa nafnið með ASCII lágstöfum, síðan kemur samasem merki (=) beint á eftir, og þar beint á eftir gildið. Ekki er krafa um að umljúka gildið með gæsalöppum, en til að gildið sé skýrt er það æskilegt. Sum attribute eru aðeins notuð til að kveikja á gildi og er þá nóg að hafa aðeins heitið, t.d. <option selected>. Allar útgáfur sem fylgja eru dæmi um hvernig við eigum ekki að gera:

Til eru nokkur attribute sem leyfilegt er að setja á öll element, svokölluð global attributes. Af þeim ber helst að nefna:

Ef við viljum skilgreina okkar eigin attribute með gögnum á elementi þá notum við data-* attribute. Við getum búið til okkar eigin nafn sem ASCII lágstafa streng án bila með data- forskeyti, t.d. data-document-id="123" eða data-length="2m11s".

Element mynda ekki eingöngu tré, heldur býr hvert þeirra yfir merkingu—það hefur merkingarfræðilegt gildi (e. semantic value). Við höfum það í huga þegar við smíðum vefina okkar og útbúm þannig merkingarfræðilegt HTML. Við nýtum skilgreinda merkingu þeirra elementa sem til eru í stað þess að nota element sem láta efnið okkar líta „rétt“ út. T.d. væri ekki æskilegt að nota <strong> til að láta texta líta út fyrir að vera fyrirsögn, við notum <h2> eða annað fyrirsagnarelement. Að auki þarf að huga að merkingu þegar við blöndum saman elementum, þar sem ekki allt á við saman.Hvaða merkingu má draga af því að hafa tengil innan tengils (<a href> innan <a href>), eða fyrirsögn innan málsgreinar (<h1> innan <p>)?

Það er sérlega mælst til þess að markup í HTML skjali sé aðeins notað til að tjá merkingu en ekki framsetningu. Framsetningu á gögnum er stýrt með CSS og fáum við því hreina skiptingu á milli efnis og útlits. Mörg element eru til sem skilgreina merkingu en annars er hægt að nota attributes (sér í lagi class sem tengist beint yfir í CSS) til að ljá þeim frekari merkingu.

Með því skilja á milli merkingar og útlits er auðveldara að breyta öðru án þess að hafa áhrif á hitt. Þetta getur einfaldað okkur viðhald og gert breytingar ódýrari en þær annars gætu verið. Merkingarfræði getur líka aukið aðgengi að vefnum okkar, bæði fyrir einstaklinga sem nota lesvafra eða álíka og einnig fyrir vélar sem heimsækja vefinn okkar. Þessar vélar skoða vefinn okkar og draga ályktanir um efnið út frá því hvaða element eru notuð. T.d. Googlebot, Pocket, eða reader view sem sumir vafrar (t.d. Firefox og Safari) útfæra. Vafrinn sem túlkar efnið gæti líka nýtt merkingarfræði okkar til að birta efnið á nytsamlegan hátt sem höfundi hefði ekki dottið í hug. Að lokum notum við merkingarfræðilegt HTML því það er snyrtilegra og faglegra.

Áður fyrr þegar við höfðum ekki CSS, var merkingu og framsetningu blandað óhikað saman. Töflur ásamt ósýnilegum 1x1 myndum (spacer gifs) voru notaðar til að stýra útliti, <FONT> elementið var eina leiðin til að stýra stærð og lit á letri, t.d. með <FONT size="12" color="red" face="Comic Sans MS">Halló heimur!</FONT> sem gerði það að verkum að við fastsettum birtingu í merkingu skjals þegar hún ætti að vera óháð. Ef við vildum síðan breyta leturgerð vefsins þurfti að fara og breyta því á hverjum einasta stað sem hún var skilgreind.

Í dag er búið að fjarlægja öll þau element sem breyttu útliti vefs, eins og <center> og <font>. Einnig er búið að fjarlægja attribute af sama meiði, t.d. align, background, og bgcolor.

Þegar við skrifum HTML, þá skrifum við þannig að það beri merkingu. Við stýrum framsetningu með CSS og reynum eins og við getum að viðhalda hreinni skiptingu milli efnis og útlits. Í byrjun er mikilvægt að hafa þetta í huga, með HTML erum við að byggja upp efnið okkar, ekki að láta það líta vel út. Það kemur með CSS. Ef við viljum að fyrirsögnin sé enn stærri eða minni, þá notum við ekki vitlaus fyrirsagnar element. Ef við viljum fá auka bil, þá setjum við ekki inn óþarfa element til að ná því fram. Við bíðum þar til við lærum réttu handtökin með CSS.

Við höfum elementin <div> og <span> sem bera í eðli sínu ekki neina merkingu, þau hópa efni saman og draga merkingu sína frá börnum sínum. Þó svo að þessi element beri enga merkingu notum við þau samt í sumum tilfellum. Þegar við förum aðeins að nota þau, þá erum við komin á villugötur. Skil ekki alveg?

Þegar við skrifum HTML þá hugsum við um merkingarfræði og reynum að finna element sem passar við efnið okkar, en eyðum ekki of löngum tíma í að finna hið eina rétta element, notum <div> ef svo ber við. Við töpum okkur ekki í siðvendninni.

Öll HTML skjöl ættu að byggja á ákveðnum grunn elementum:

Öll sniðmál sem byggja á SGML þurfa að tilgreina Document Type Definition (DTD) sem skilgreinir málfræðina sem farið er eftir. Í HTML er þetta sett fram í fyrstu línu skjalsins, í DocType. Fyrir HTML 4, strict útgáfu skilgreinum við:

Enn í dag þurfum við að skilgreina í hvaða DocType HTML skjölin okkar eru. Ástæðan fyrir því er að vafrar í dag geta ennþá túlkað og sýnt vefi frá því á árdögum vefsins. Þegar enn var verið að skilgreina hvernig HTML var birt í vöfrum var mikið um ósamræmi og á tímabili var ekki hægt að innleiða nýjungar án þess að brjóta þá vefi sem þegar voru til. Þegar nýir vefir voru smíðaðir sem notuðu nýja staðla þurfti að velja sérstaklega að nota þá með því að skilgreina DocType. Ef vefur skilgreindi ekkert DocType var hann birtur í quirks mode, þar sem gert var ráð fyrir að hinir ýmsu kvillar væru til staðar. Hinsvegar ef vefur benti á rétt, staðlað DTD, var hann birtur í standards mode. Með þessari aðferð árið 1996 jókst notkun á CSS talsvert.

Þar sem tölvur geta verið heldur vandlátar á það í hvaða stafasetti við skrifum, þá skilgreinum við það sérstaklega í <head> með því að setja það á charset attribute á <meta>, element sem leyfir okkur að setja fram lýsigögn um skjalið okkar. Í langflestum tilfellum viljum við nota UTF-8.

Í HTML geta sérstakir stafir (e. character entity), verið skilgreindir með &X; þar sem X er:

Eftir áhugaleysi W3C á því að þróa HTML áfram (og mikinn fókus á XHTML og XML tengda tækni) tóku nokkrir aðilar sig saman og stofnuðu WHATWG (Web Hypertext Application Technology Working Group) árið 2004, með það að markmiði að vinna áfram að HTML og eðlilegri framþróun vefsins. Þessi vinna fór fram undir nafninu HTML5 þar sem hver sem er gat lagt til breytingar á HTML í gegnum póstlista en takmarkaður hópur ritstjóra stýrði því hvað fór inn í staðal.

Tveimur árum seinna, árið 2006, sá W3C að sér og hélt áfram þróun HTML sem HTML 5. En þar sem það er afskaplega ópraktískt að þróa tvo aðskilda staðla (HTML5 og HTML 5) á sama tíma þá voru þeir blessunarlega sameinaðir í einn HTML5 staðal árið 2007. W3C hætti þróun á XHTML 2.0 árið 2009 og farið var að öllu að þróa HTML5 sem framtíð HTML.

Árið 2012 tók W3C skyndimynd (e. snapshot) af staðlinum eins og hann leit út hjá WHATWG og fór í þá vinnu að gera staðalinn að W3C staðli. WHATWG hætti hinsvegar að tala sérstaklega um HTML5 og vinnur nú að framþróun HTML í lifandi staðli sem mun aldrei klárast og heldur áfram að þróast án þess að hlutir séu fjarlægðir.

HTML5 byggir hvorki á SGML né XML, en er afturvirkt (e. backwards compatible) fyrri útgáfum af HTML. Stefnan er að auka samvirkni (e. interoperability) og aðgengi að vefnum. Til að vera að fullu samhæft fyrri útgáfum verður HTML5 að skilgreina DocType:

Þetta er eina DocType sem við notum, nema við höfum mjög góða ástæðu til annars. Héðan í frá miðast öll umfjöllun við HTML5. Grunnurinn að vefsíðunum okkar verður þá:

Vefurinn er rétt að byrja en hefur samt nú þegar breytt svo miklu. Við sem vinnum við hann munum halda áfram að sjá breytingar; í því hvernig hann breytir þjóðfélaginu okkur og hvernig tæknin smám saman breytist. Vafrar munu halda áfram að batna, möguleikar til að birta flóknari og flóknari hluti munu aukast, t.d.: þrívíð grafík með WebGL, sýndarveruleiki með WebVR, og eitthvað sem okkur hefur ekki ennþá dreymt um.