HTML

Bertsio hau WHATWG (Web Hypertext Application Technology Working Group) taldeak mantentzen du. Taldea 2004an sortu zen Apple Inc., Mozilla Foundation eta Opera enpresekin. Gaur egun, taldeko kide nagusiak Apple Inc., Mozilla fundazioa, Google Inc. eta Microsoft enpresak d ira. 2006an Tim Berners-Leek iragarri zuen W3C erakundeak eta WHATWG taldeak elkarrekin lan egingo zutela HTML-aren garapenean. 2008an argitaratu zuten HTML 5-en lehen bertsioa. 2014an W3C erakundeak HTML 5-en erabilera gomendatu zuen. 2016an HTML 5.1 bertsioa agertu zen eta 2017an HTML 5.2 bertsioa. Gaur egun, HTML 5 da World Wide Web-ean erabiltzen den markaketa-lengoaia nagusia.

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, <elementuaren izena> modukoa izaten dena, eta amaierakoa,</elementuaren izena>. 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 <br>.

Elementuak hainbat motakoak izan daitezke:

• Testuaren egitura deskribatzeko egitura-markak erabiltzen dira. Lehen-mailako atal bat definitzeko, adibidez, <h1>golf</h1> etiketak erabiltzen dira. Nahiz eta egitura-markek ez duten itxura zehazten, web-nabigatzaile gehienek elementuak formatu estandarrean erakusten dituzte.

• Testuaren itxura deskribatzeko aurkezpen-markak erabiltzen dira. Elementu-mota honen bidez adierazten da testua nola ikusiko den. Letra lodiz erakusteko, adibidez, <b>letra lodia</b> etiketak erabiltzen dira. Hala ere, HTML-ren azken bertsioetan aurkezpen-marka gehineak baztertu egin dira eta testuari formatu berezia emateko CSS (teilakatutako estilo-orriak) erabiltzen dira.

• Loturak (estekak) sortzeko hipertestu-markak erabiltzen dira. Esteken bidez lotura sor daiteke beste dokumentu batera edo dokumentu bereko beste zati batera. Esteka bat sortzeko, </a> aingura-etiketa erabiltzen da eta "href" atributuaren bidez adierazten da loturak zein URL helbidera eramango duen. Adibidez, Euskarazko Wikipediarako esteka sortzeko: <a href="http://eu.wikipedia.org/wiki/Azala">Wikipedia<</a>. Posiblea da beste objektu baterako esteka sortzea ere (irudi batera eramateko, adibidez,<img> 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.

HTML-ren oinarrizko etiketak hauek dira:

• <html>... </html>: Etiketa-parearen artekoa html kodea dela adierazten zaio nabigatzaileari.
• <head>... </head>: Dokumentuaren goiburua markatzeko etiketak dira. Nabigatzailean zuzenean erakusten ez den informazioa adierazten da bertan.
• <body>... </body>: Dokumentuaren gorputza definitzeko etiketa-parea da. Nabigatzailean erakusten den dokumentuaren atala da gorputza. Bertan, web-orri osorako ezaugarriak defini daitezke, adibidez kolorea eta ertzak.

• <base>: Dokumentuko esteken oinarrizko URL-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<nowiki/>.html">
• <title>...</title>: Web-orriaren izenburua adierazteko etiketa-parea da. Horrela definitutako izenburua leihoaren goiko barran erakusten da nabigatzailean (ikus adibidea atal honen hasieran).
• <link>: Elementu honen bidez web-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">.
• <meta>: Metainformazioa zehazteko erabiltzen den etiketa da, hala nola, egilea, argitalpen-data, iraungitze-data, hizkuntza, orriaren izenburua, orriaren deskribapena, hitz-gakoak, etab. Adibidea: <meta name="copyright" content="© 2022">
• <script>...</script>: Script bat (kode-exekutagarria) dokumentuan bertan txertatzeko edo dokumentutik kanpo definitutako script bati lotura egiteko erabiltzen den etiketa-parea da. JavaScript programazio-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>
• <style>...</style>: Orriaren barne-estiloa definitzeko erabiltzen den etiketa-parea da. <link> etiketaren bidez dokumentuaren estiloa kanpoko CSS 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>.

• < p >...< /p >: 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.
• < h1 >, < h2 >...< h6 >: 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.
• <br>: Testuan lerro-jauzia (line break) behartzeko elementua da. Egokia gertatzen da lerroen zatiketa adierazgarria denean (poema bat edo helbide bat idazteko, adibidez).
• <table>...</table>: 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.
• <a>...</a>: Web-orriko punturen batera edo orritik kanpoko beste web-orri batera esteka sortzeko etiketa-parea dira. "href" atributuaren bidez adierazten da loturak zein URL helbidera eramango duen. Adibidez, <a href="http://eu.wikipedia.org/wiki/Azala">Wikipedia</a> horrela azaltzen da Wikipedia.
• <div>...</div>. Atalak sortzeko edo edukia multzokatzeko erabiltzen den etiketa-parea da (division). Etiketen artean testua doa, eta beste elementu batzuk ere jar daitezke: izenburua, etab.
• <img>: irudi bat definitzeko elementua da. Irudia non dagoen adierazteko src 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.
• <li>...</li>,<ol>...</ol>,<ul>...</ul>: Zerrendak sortzeko etiketa-parek dira. Mota desberdineko zerrendak sor daitezke: <li>(zerrenda edo list), <ol>zerrenda ordenatuetarako (ordered list), <ul> ordenatu gabeko zerrenda sortzeko (unordered list), etab.