Etiketen bidez dokumentua markatu egiten da: izenburua, atalak, paragrafoak, zerrendak, taulak, etab.Web-nabigatzaileak HTML-dokumentuko etiketak interpretatzean, markatutakoari dagokion itxura ematen dioweb-orriari. Etiketen semantika interpretatuz, edukiari buruzko informazioa hobeto ulertzea lortzen da eta horri eskerInterneteko bilaketak errazten dira. Azken bertsioetan,web-orriaren itxura kontrolatzekoCSS estilo-orriekin batera erabiltzen da etaJavaScriptlengoaian idatzitako script-ak txerta daitezkeweb-orrian.
1980ko hamarkadaren erdi aldera,CERN-ekoTim Berners-Lee fisikariakCERNeko ikertzaileek dokumentuak erabili eta partekatzeko ENQUIRE sistema proposatu eta prototipoa sortu zuen. 1989an bi teknika zeuden dokumentu elektronikoak haien artean lotzeko:estekak erabiltzea edoSGML izenekomarkaketa-lengoaia erabiltzea.Barners-Lee-k 1990ean HTML definitu zuen etaWorld Wide Web sortu zuen.
HTMLren lehen deskribapen publikoa "HTML Tags" izeneko dokumentua izan zen,Tim Berners-Lee-k 1991ko amaieran Interneten lehen aldiz aipatu zuena. Bertan, HTMLren hasierako diseinua osatzen zuten 18 elementuak deskribatu zituen. 1993ean David Raggett-ek HTML+ sortu zuen, ezaugarri berriak erantsiz, hala nola, irudiak, taulak eta inprimakiak.[1]
1994anBerners-Lee-k sortu zuenWorld Wide Web Consortium (W3C)[2] erakundeak garatzen dituWWWerako estandarrak, eta denboran zehar proposatu dituen hobekuntzekin HTML-ren bertsio berriak sortu dira. Hobekuntza eta gomendio horiek beste lengoaia batzuren oinarri ere badira, hala nola,XHTML etaXML. HTML-ren bertsio nagusiak hauek dira:
HTML eta HTML+ bertsioen garapenetik sortu zen 1995ean eta HTML-ren lehen estandar gisa hartzen da[3]. Etorkizuneko inplementazioek estandar hau oinarri hartzea zen helburua.Tim Berners-Lee-k eta Dan Conolly-k editatu zuten eta lehen HTML bertsio ofizial moduan ezagutzen da. Informazioa modu sinplean adieraztea zen helburua, dokumentuaren egitura sinple mantentzea. Hori dela eta, taulak editatzeko euskarririk ez du, adibidez. Zentzu horretan, minimalista eta purua dela esaten da.
HTML 3.0 izenez ezagutzen den lehen bertsioa 1995ean proposatu zen eta aukera berri asko jaso zituen, taulak sortzeko, irudien inguruan testua jarri ahal izateko edoformula matematiko konplexuak idatzi ahal izateko, adibidez. Hala ere, konplexuegia zen garai hartan zegoen teknologiarako eta proiektua bertan bera geratu zen.Web orrien estetika hobetzeko interesa handituz zioan eta garatzaileekweb orrien diseinurako tresnaren bat garatzeko beharra ikusi zuten. Horrela sortu zenCSS (Cascading Style Sheets), estilo-orriak definitzeko balio du eta HTML dokumentu bati erantsiz gero, dokumentuaren diseinua egokitzeko erabiltzen dira. Estilo-orri horiek HTML-ren independenteak dira eta sintaxi propioa dute. Horri esker,web orrien garatzaileek modu egokian kontrolatu ahal izango zuten orriaren itxura.
HTML 3.2 bertsioa[4] 1997an sortu zen, etaCSS estilo-orriekin batera erabiltzeko egokitua izan zen. Egokitze-prozesu horretan, HTML 3.0 bertsioan sartu ziren ezaugarri batzuk kendu egin ziren. Formula matematikoak idazteko garatu zirenak, adibidez,MathML estandarrean integratu ziren.
Aurreko bertsioak bezala, hau ereSGML (Standard Generalized Markup Language) estandarrean oinarritzen da. 1998ean proposatu zen HTML 4.0 bertsioa eta 1999an HTML 4.01 argitaratu zenW3C-ren gomendio moduan[5]. Taulak eta formularioak egiteko aukerak hobetu egin ziren. Hasierako bertsioek web-nabigatzaile bakoitzerako espezifikoak ziren elementu-mota eta atributu asko onartzen zituzten baina pixkanaka halakoak "zaharkitu" moduan markatzen hasi ziren eta estilo-orrien erabilera lehenetsi zen. Bertsio berriagoek "frame"-ak, "script"-ak eta objektuak txertatzeko prozedurak eskaini zituzten, web-nabigatzaile bakoitzaren espezifikotasunetatik irteteko. Hiru aldaera proposatu ziren:
"Strict" edo hertsia: zaharkitutako elementuak eta atributuak ez dira onartzen.
"Transitional" edo trantsiziokoa: zaharkitutako elementuak atributuak onartzen dira.
"Frameset": Marko edo "frame" batekin erlazionatutako elementuak bakarrik onartzen dira.
HTML 4.01 bertsioa[5] egonkor mantendu zen urte askotan zehar. Urte horietan zehar, W3C-ko HTML lan-taldeaXML (Extensible Markup Language)markaketa-lengoaian oinarritzen denXHTML (Extensible HyperText Markup Language)markaketa-lengoaiaren garapenean aritu ziren.
Bertsio hau WHATWG (Web Hypertext Application Technology Working Group) taldeak mantentzen du. Taldea 2004an sortu zenApple Inc.,Mozilla Foundation eta Opera enpresekin. Gaur egun, taldeko kide nagusiakApple Inc.,Mozilla fundazioa,Google Inc. etaMicrosoft enpresak d ira. 2006anTim Berners-Leek iragarri zuenW3C erakundeak eta WHATWG taldeak elkarrekin lan egingo zutela HTML-aren garapenean. 2008an argitaratu zuten HTML 5-en lehen bertsioa[6]. 2014anW3C erakundeakHTML 5-en erabilera gomendatu zuen[7]. 2016an HTML 5.1 bertsioa[8] agertu zen eta 2017an HTML 5.2 bertsioa[9]. Gaur egun, HTML 5 daWorld Wide Web-ean erabiltzen denmarkaketa-lengoaia nagusia[10][11].
HTML lengoaian etiketak erabiltzen dira testua markatzeko. Etiketak idazteko <, > eta / ikurrak erabiltzen dira, eta haien bidez dokumentuaren itxura deskriba daiteke edo web-nabigatzailearen portaeran eragina izan dezakeen script-a txertatu, adibidez.
HTML-k hainbat funtsezko osagai ditu, besteak beste, elementuak eta haien atributuak.
HTMLren oinarrizko egitura dira eta oinarrizko bi propietate dituzte: atributuak eta edukia. Elementua normalean bi etiketen bidez markatzen da: hasierako etiketa,<> modukoa izaten dena, eta amaierakoa,</>. Elementuaren atributuak hasierako etiketaren barruan zehazten dira eta edukia bi etiketen artean idazten da. Hala ere, badira edukirik ez duten elementuak, baita bukaerako etiketarik ez dutenak ere, adibidez<>.
Elementuak hainbat motakoak izan daitezke:
Testuaren egitura deskribatzekoegitura-markak erabiltzen dira. Lehen-mailako atal bat definitzeko, adibidez,<>golf</> etiketak erabiltzen dira. Nahiz eta egitura-markek ez duten itxura zehazten, web-nabigatzaile gehienek elementuak formatu estandarrean erakusten dituzte.
Testuaren itxura deskribatzekoaurkezpen-markak erabiltzen dira. Elementu-mota honen bidez adierazten da testua nola ikusiko den.Letra lodiz erakusteko, adibidez,<>letra lodia</> etiketak erabiltzen dira. Hala ere, HTML-ren azken bertsioetan aurkezpen-marka gehineak baztertu egin dira eta testuari formatu berezia ematekoCSS (teilakatutako estilo-orriak) erabiltzen dira.
Loturak (estekak) sortzekohipertestu-markak erabiltzen dira. Esteken bidez lotura sor daiteke beste dokumentu batera edo dokumentu bereko beste zati batera.Esteka bat sortzeko, </> aingura-etiketa erabiltzen da eta "href" atributuaren bidez adierazten da loturak zein URL helbidera eramango duen. Adibidez, Euskarazko Wikipediarako esteka sortzeko:< href="http://eu.wikipedia.org/wiki/Azala">Wikipedia<</>. Posiblea da beste objektu baterako esteka sortzea ere (irudi batera eramateko, adibidez,<> etiketa erabiltzen da).
Elementuaren atributuak, gehienetan, atributua="balioa" moduan adierazten dira. Elementuaren hasierako etiketan idazten dira, elementuaren izenaren ondoren. Atributuaren balioa komatxo bikoitzen edo sinpleen artean idatzita egon daiteke, nahiz eta balio-mota batzuk komatxorik gabe ere idatz daitezkeen HTML-n (ez, ordea, XHTMLn).
Hona hemen HTML lengoaian idatzita dokumentu baten adibide bat.<!doctype html> etiketak dokumentua HTML motakoa dela adierazten du. Ondoren, oinarrizko etiketa batzuk ageri dira[12].
<!doctype html><htmllang="eu"><head><title> Web-orriaren izenburua</title><style>h1{color:red;}p{color:blue;}</style></head><body><h1> Maila goreneko izenburua</h1><p> Hau paragrafo bat da</p><h2> Bigarren mailako izenburua (poema bat)</h2><p> Txoria txori (Mikel Laboa)<br> Hegoak ebaki banizkio<br>nerea izango zen,<br>ez zuen alde egingo.</p><h2> Bigarren mailako izenburua (taula bat)</h2><table><tr><th>Izena</th><th>Abizena</th></tr><tr><td>Joxan</td><td>Artze</td></tr><tr><td>Lourdes</td><td>Iriondo</td></tr></table></body></html>
...: Etiketa-parearen artekoa html kodea dela adierazten zaio nabigatzaileari.
...: Dokumentuaren goiburua markatzeko etiketak dira. Nabigatzailean zuzenean erakusten ez den informazioa adierazten da bertan.
...: Dokumentuaren gorputza definitzeko etiketa-parea da. Nabigatzailean erakusten den dokumentuaren atala da gorputza. Bertan, web-orri osorako ezaugarriak defini daitezke, adibidezkolorea eta ertzak.
: Dokumentuko esteken oinarrizkoURL-a adierazteko etiketa da. Mota honetako elementu bakarra egon daiteke dokumentuan, eta kanpoko baliabide bati erreferentzia egiten dion edozein elementuren aurrean agertu behar du. Elementu honek baditu atributuak, baina edukirik ez. Adibidea:<base href="http://www.adibidea.eus/orria.html">
...:Web-orriaren izenburua adierazteko etiketa-parea da. Horrela definitutako izenburua leihoaren goiko barran erakusten da nabigatzailean (ikus adibidea atal honen hasieran).
: Elementu honen bidezweb-orriaren eta beste orrialde baten arteko erlazioa definitzen da.Estilo-orrietara lotzeko erabiltzen da sarri. Adibidea:<link rel="stylesheet" href="/style.css" type="text/css">.
...: Script bat (kode-exekutagarria) dokumentuan bertan txertatzeko edo dokumentutik kanpo definitutako script bati lotura egiteko erabiltzen den etiketa-parea da.JavaScriptprogramazio-lengoaian idatzitako kodea izaten da normalean. Kanpoan definitutakoari erreferentzia egitekoSRC atributua erabiltzen da. Dokumentuaren gorputzean ere erabil daiteke elementu hau. Adibidea (script-a dokumentuan txertatzea):<script> alert("Kaixo mundua!"); </script>. Adibidea (kanpoko script batera):<script src="javascript.js"></script>
...: Orriaren barne-estiloa definitzeko erabiltzen den etiketa-parea da.<link> etiketaren bidez dokumentuaren estiloa kanpokoCSS estilo-orri bati lotu bazaio, orduan<style> etiketa-parea erabili beharrik ez dago. Adibidea (dokumentuko h1 motako izenburuak gorriz eta parrafoak urdinez erakusteko):<style> h1 {color:red;} p {color:blue;}</style>.
: Paragrafo-marka da, HTML dokumentutan parrafoak definitzeko erabiltzen den elementua. Seguraski gorputzean erabiltzen diren elementuen artetik arruntena da. Parrafoa beti hasten da lerro berri batean eta normalean gainetik eta azpitik espazioa eransten zaio.
: Dokumentuaren atalak definitzeko eta atalei izenburua jartzeko balio duten etiketa-pareak dira. Maila desberdineko izenburuak/atalak (headings) sor daitezke: maila gorenekoak definitzeko < h1 >...< /h1 >, maila baxuenekorako < h6 >...< /h6 >. Atalek dokumentuari egitura ematen diote eta elementu horiei esker, programa batzuek marrak txertatzen dituzte dokumentuan edo eduki-taulak sortu.
: Testuan lerro-jauzia (line break) behartzeko elementua da. Egokia gertatzen da lerroen zatiketa adierazgarria denean (poema bat edo helbide bat idazteko, adibidez).
: Taula bat definitzeko etiketa-parea da. Taularen izenburua<th> elementuaren bidez definitzen da (header), lerroak<tr> elementuaren bidez (row), etiketarekin definitzen dira eta gelaxkak<td> etiketaren bidez. Gelaxkaren definizioak lerroaren definizioaren barruan egon behar du.
: Web-orriko punturen batera edo orritik kanpoko beste web-orri bateraesteka sortzeko etiketa-parea dira. "href" atributuaren bidez adierazten da loturak zein URL helbidera eramango duen. Adibidez, horrela azaltzen daWikipedia.
. Atalak sortzeko edo edukia multzokatzeko erabiltzen den etiketa-parea da (division). Etiketen artean testua doa, eta beste elementu batzuk ere jar daitezke: izenburua, etab.
: irudi bat definitzeko elementua da. Irudia non dagoen adieraztekosrc atributua erabiltzen da (source). Adibidez:<img src="./irudiak/nireargazkia.jpg" />. Gerta daiteke nabigatzailea irudia erakusteko gai ez izatea. Halakoetarako,alt="ordezko testua"atributua erabiliz, irudia deskribatzen duen testua idaztea gomendatzen da, irudia erakutsi ezin denean testua erakusteko.
,,: Zerrendak sortzeko etiketa-parek dira. Mota desberdineko zerrendak sor daitezke:<li>(zerrenda edolist),<ol>zerrenda ordenatuetarako (ordered list),<ul> ordenatu gabeko zerrenda sortzeko (unordered list), etab.
HTML lengoaian idatzitako dokumentuak sortzeko, mota desberdineko editoreak erabil daitezke: formatu gabekotestu-editoreak edoWYSIWYG motakoak. Online editoreak ere badaude:Google Sites[13], Weebly[14], etab.
Formatu gabekotestu-editoreetan HTML aginduak idazteko unean ez da ikustenweb-orriaknabigatzailean izango duen itxura. Edizioan laguntzeko asmoz,editore hauek HTML kodearen sintaxia nabarmendu ohi dute. Gainera, HTML elementu ohikoenak errazago txertatzeko, txantiloiak, tresna-barrak eta teklatu-lasterbideak eskaintzen dituzte. Mota honetakoak diraGNU proiektuarenGNU Emacs editorea[15], Aptana[16],Windows-en Notepad++[17] edo Apache OpenOffice Writer[18], besteak beste.
Artikulu honetan "Oinarrizko etiketak" ataleko adibideaweb-nabigatzailean ikusteko, kodeatestu-editore batean kopiatu eta dokumentua konputagailuaren mahaigainean gorde daiteke nire-lehen-html-dokumentua.html izenarekin, adibidez. Ondoren, dokumentuanabigatzaile bateanirekiz gero, egiazta daiteke atalen izenburuak esperotakokolore eta tamainan agertzen direla,Mikel LaboarenTxoria txoripoemaren lerro-jauziak egin direla, taula osatu dela, etab.
WYSIWYG motako editoreetan, kodea idatzi ahala nabigatzailean hartuko duen itxura ikusten da. Horregatik hartzen duteWYSIWYG izena (ingelesez, "What You See Is What You Get"), hau da “ikusten duzuna lortzen duzuna da".Web-orrien garatzaileentzat lagungarria izan daiteke HTML kodearen azken emaitza ikustea, kodea idazten den bitartean. Mota honetakoak dira KompoZer[19] edo BlueGriffon[20], adibidez.
Editore batzuk, sortutako web-orria argitaratzeko erraztasunak ere ematen dituzte, Adobe Dreamweaver[21], adibidez.
HTML semantikoa HTML kodea idazteko modu bat da, edukiari itxurari baino garrantzia handiagoa emateko diseinatu dena[22][23]. HTML lengoaiak betidanik izan du markatze semantikoa egiteko aukera (mikroformatua), web-orrien garatzaileek elementu semantikoen bidez edukiari buruzko informazioa argiago adierazteko.<> elementuarekin, adibidez, edukia "orrialdearen maila goreneko izenburu edo atala" dela adierazten da. Badira semantikoki neutroak diren elementuak, edukiari buruz ezer esaten ez dutenak:<> eta<> adibidez, dokumentuaren zatiak definitzeko erabiltzen diren etiketak dira,<> elementuarekin testuaren kolorea, tamaina eta estiloa alda daiteke, etab. Aurkezpen-markak direla esaten da, arreta orriaweb-nabigatzailean erakustean izango duen itxuran jartzen delako.
Web-orri batean maila goreneko atal-izenburu bat definitzeko, HTML kode-lerro hau erabil daiteke:
Hau maila goreneko atal-izenburua da
Besterik adierazi ezean,web-nabigatzaileen estilo-orri gehienek tamaina handiko letraz erakutsiko dute edukia,web-orriaren izenburu itxura estandarra emanez. Letraren tamaina kontrolatzen duen<> elementuarekin antzeko itxura izango duen testua erakutsi daiteke, horrela:
Maila goreneko atal-izenburua da hau?
Testuak har dezake maila goreneko atal-izenburuaren itxura, baina ez du balio semantikorik izango. Laurogeita hamarreko hamarkadaren amaieratik,CSS estilo-orriaknabigatzaile gehienetan funtzionatzen hasi zirenetik, aurkezpen-marken erabilera saihesteko eskatu zitzaienweb-orrien garatzaileei. Gaur egun,web-orriaren diseinua egitean, edukia eta aurkezteko modua (itxura) bereiztea gomendatzen da, estilo kontuakCSS orrien bidez kontrolatuz. HTMLren bertsio zaharretako aurkezpen-marka gehienak baztertu ziren eta jada ez daude baimenduta[24].
Etiketatze semantikoak ondorio garrantzitsuak eragiten ditu. Izan ere,World Wide Web-ean bilaketak egitea funtsezkoa gertatzen da gaur egun.Web-arakatzaileakbilaketa-motorrak dira, egunean milioikaweb-orri irakurtzea eta indexatzea da haien ardura. Hainbat teknika[25] etaalgoritmo erabiltzen dituzte horretarako, eta etiketatze-semantikoa ere funtsezkoa zaieweb-orrietako informazioaren esanahia ulertu eta garrantzia neurtu ahal izateko, ondoren bilaketaren emaitza erabiltzaileari modu ordenatuan erakusteko. HTML semantikoakbilaketa-motorretan posizionamendu ona izaten (SEO, Search Engine Optimization) etawebgunearen ikusgarritasuna handitzen laguntzen du[26].
Markatze semantikoak bestelako abantailak ere baditu: HTML kodea errazago irakurtzen da, argiago idatzita geratzen delako. Horrek orrien mantentze-lana errazten laguntzen du. Gizakiontzat argiagoa izateaz gain, makinentzat ere ulergarriagoa da, eta horrekweb-irisgarritasunean laguntzen du,web-orria irakurtzerik ez duten erabiltzaileengana beste moduren batean iristeko aukera eman daitekeelako.
