Hyper Text Markup Language
HTML (acrònim d’Hyper Text Markup Language, en català, "llenguatge de marcatge d'hipertext"), és un llenguatge de marcatge que deriva de l'SGML dissenyat per estructurar textos i relacionar-los en forma d'hipertext.[1] Gràcies a Internet i als navegadors web, s'ha convertit en un dels formats més populars que hi ha per a la construcció de documents per a la web.
 | |
 | |
| Tipus | API web, recomanació W3C, obra creativa, família de formats de fitxer, llenguatge de marques i estàndard ISO  |
|---|---|
| Extensió | html i htm |
| MIME | text/html |
| Desenvolupador | World Wide Web Consortium, Internet Engineering Task Force i Web Hypertext Application Technology Working Group (en)  |
| Versió inicial | 1989 |
| Extensió de | Standard Generalized Markup Language |
| Estàndard | RFC 2659: Security Extensions For HTML (en) i The 'text/html' Media Type |
| Més informació | |
| Stack Exchange | Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta i Etiqueta |
| Wiki del format de fitxer | HTML |
| LocFDD | fdd000475 |
| PRONOM | fmt/99 |
| Lloc web | html.spec.whatwg.org… |
Història de l'HTML
En el seu origen, l'HTML era un llenguatge dissenyat per a compartir informació científica entre científics de tot el món. Era purament un llenguatge estructural, en què no hi havia forma de descriure l'aparença de les pàgines (ni tan sols la possibilitat de posar un text en negreta o cursiva). Més endavant s'hi van afegir nombroses opcions a fi de formatar i presentar text i gràfics.
A mitjans de la dècada de 1990 van començar les ampliacions de l'HTML per a aconseguir la presentació desitjada, però sempre des de perspectives diverses de diferents desenvolupadors, que van acabar amb diverses solucions no estàndards per a diferents navegadors. Això va provocar l'aparició d'un consorci que controla l'evolució de l'HTML: el W3C (World Wide Web Consortium).
Aquesta evolució tenia un punt clau: la separació del contingut i l'aparença. Amb la versió 4 de l'HTML es recomanava un altre mecanisme per controlar la visualització del nostre contingut HTML: els fulls d'estil (CSS: Cascading Style Sheets).
El W3C recomana l'ús de l'XHTML, que manté la mateixa sintaxi i els mateixos mecanismes que l'HTML, però reformulat amb les normes d'un XML, preparant-se així per a aprofitar els avantatges d'aquest llenguatge.
D'altra banda el WHATWG[2]—grup de treball compost per la Fundació Mozilla[3] i Opera— estan plantejant una especificació per un HTML 5 estenent l'HTML 4.01 i el DOM.
L'HTML 5 intenta millorar la part d'aplicació web amb l'especificació Web Forms 2.0. Aquest grup surt com a reacció pel canvi brusc del pas d'HTML a XHTML que, si no fos per l'Apendix C de l'especificació XHTML 1.0[4] no es podria usar en navegadors que no suporten el MIME type application/xhtml+xml.
No s'ha d'entendre el WHATWG com una organització paral·lela al W3C sinó un grup complementari, ja que quan té un esborrany el proposa al W3C per tal d'estandarditzar-lo.
La darrera especificació vigent és l'XHTML 1.1 que ja no contempla cap compatibilitat amb versions anteriors i, per tant, només es pot servir com a application/xhtml+xml excloent qualsevol navegador antic.
El punt més polèmic actualment és la proposta d'especificació (en estat d'esborrany) XHTML 2.0 que deixa de ser compatible amb versions anteriors no només a nivell de MIME type sinó que l'estructura de document i elements estructurals canvien.
Marcador HTML
L'HTML s'escriu utilitzant «etiquetes», envoltades per claus angulars (<,>, /). L'HTML també pot descriure, fins a un cert punt, l'aparença d'un document, i pot incloure o fer referència a codi en un tipus de llenguatge anomenat script, el qual pot afectar el comportament del navegadors web i altres processadors d'HTML.[5]
HTML també serveix per referir-se al contingut del tipus de MIME text/html o també més àmpliament com un terme genèric per a l'HTML en general, ja sigui el que descendeix de l'XML (com poden ser XHTML 1.0 i posteriors) o el que descendeix de l'SGML (com poden ser HTML 4.01 i anteriors). L'HTML consta de diversos components importants propis del llenguatges, entre ells els elements i els seus atributs, tipus de data i la declaració de tipus de document.
Elements
Els elements són l'estructura bàsica de l'HTML. Els elements tenen dues propietats bàsiques: atributs i contingut. Els atributs i contingut tenen certes restriccions perquè es considerin vàlids dins el document HTML. Un element generalment té una etiqueta d'inici (per exemple, <nom-de-element> ) i una etiqueta de tancament (per exemple, </nom-de-element> ). Els atributs de l'element estan continguts a l'etiqueta d'inici i el contingut està situat entre les dues etiquetes (per exemple, <nom-de-element atribut="valor"> Contingut </nom-de-element> ). Alguns elements, com ara <br>, no tenen contingut ni porten una etiqueta de tancament. A sota es llisten diversos tipus d'elements de marcat utilitzats en HTML.
El marcatge estructural descriu el propòsit del text. Per exemple, <h2>Golf</h2> estableix «Golf» com un encapçalament de segon nivell, el qual es mostraria en un navegador d'una forma similar al títol «marcador HTML» al principi d'aquesta secció. El marcatge estructural no defineix com es veurà l'element, però la majoria dels navegadors web han estandarditzat el format dels elements. Pot aplicar un format específic al text per mitjà de fulls d'estil en cascada.
El marcatge de presentació descriu l'aparença del text, sense importar la seva funció. Per exemple, <b>negreta</b> indica que els navegadors web visuals han de mostrar el text en negreta, però no indica què han de fer els navegadors web que mostren el contingut d'una altra manera (per exemple, els que llegeixen el text en veu alta). En el cas de <b>negreta</b> i <i>itàlica</i>, trobem altres elements que es veuen de la mateixa forma però tenen una naturalesa més semàntica: <strong>èmfasi fort</strong> i <em>èmfasi</em>. És fàcil veure com un lector de pantalla hauria d'interpretar aquests dos elements. Tot i així, són equivalents als seus corresponents elements de presentació: un lector de pantalla no hauria de dir més fort el nom d'un llibre, encara que el nom estigui ressaltat amb itàliques a la pantalla. La majoria del marcat de presentació ha estat rebutjat a partir de la versió 4.01, en favor dels fulls d'estil en cascada.
El marcatge hipertextual s'utilitza per enllaçar parts del document amb altres documents o amb altres parts del mateix document. Per crear un enllaç és necessari utilitzar l'etiqueta d'àncora <a> juntament amb l'atribut href , que establirà l'adreça URL a la qual apunta l'enllaç. Per exemple, un enllaç que mostri el text de la direcció i vagi cap a la nostra Vikipedia podria ser de la forma <a href="{{format ref}} http://ca.wikipedia.org ">{{format ref}} http://ca.wikipedia.org</a> . També es poden crear enllaços sobre altres objectes, com ara imatges <a href="enlace"><img src="imatge"/></a> .
Atributs
La majoria dels atributs d'un element són parells nom-valor, separats pel signe igual «=» i continguts a l'etiqueta de començament d'un element, després del nom de l'element. El valor pot estar envoltat per cometes dobles o simples, encara que certs tipus de valors poden estar sense cometes en HTML (però no en XHTML). Tot i així, deixar els valors sense cometes és considerat poc segur.
Etiquetes bàsiques
Les etiquetes bàsiques d'HTML, d'obligada presència en tot document són:
<!DOCTYPE>: És l'etiqueta que permet definir el tipus de document HTML que s'empra. Existeixen tres tipus bàsics: l'estricte (Strict), el transicional (Transitional) i el de marcs (Frameset).<html>: És l'etiqueta arrel de qualsevol document HTML o XHTML.<head>: Defineix la capçalera del document HTML. Permet declarar metainformació del document que no es mostra directament en el navegador. Aquesta informació és d'especial rellevància pels indexadors i cercadors automàtics.<body>: Defineix el cos del document. Aquesta és la part del document HTML que es mostra en el navegador.
Dintre de la capçalera <HEAD> s'hi pot trobar:
<title>: Permet definir el títol de la pàgina. En navegadors gràfics el contingut deltitleapareix a la barra del títol a sobre de la finestra.<meta>: Permet definir metainformacions del document tals com l'autor, la data de realització, la codificació del document (UTF, ISO, etc.), les paraules clau i la descripció del mateix<LINK>: Permet definir metadades complementàries a les delmetatals com el document anterior, el següent, el capítol al qual pertany el document, la pàgina glossari, etc.
Dintre del cos <BODY> s'hi pot trobar:
<a>: Etiqueta àncora. Crea un enllaç a un altre document o a una altra zona d'aquest, segons els atributs.<h1>, <h2>… <h6>: capçaleres o títols del document, acostumen a distingir-se per mida.<div>: Divisió estructural de la pàgina.<p>: Paràgraf.<br>: Salt de línia.<b>: Text en negreta (etiqueta desaprovada. Es recomana usar l'etiqueta<strong>).<i>: Text en cursiva (etiqueta desaprovada. Es recomana usar l'etiqueta<em>).<s>: Text ratllat (etiqueta desaprovada. Es recomana usar l'etiqueta<del>).<table>: Indica el començament d'una taula, després s'haurà de definir les files amb<tr>i les cel·les dintre de les files amb<td>.<tr>: Fila d'una taula.<td>: Cel·la d'una taula (ha d'estar dins d'una fila).
<ul>: Llista desordenada (sense numerar). Els ítems es defineixen amb<li>.<ol>: Llista ordenada (numerat). Els ítems es defineixen amb<li>.<dl>: Llista de definició. Hi ha dos tipus d'ítem; eldti eldd.<dt>: Terme a definir.<dd>: Definició del terme.
Excepte unes poques etiquetes, la majoria requereixen ser tancades escrivint la mateixa etiqueta precedida d'una barra "/". Exemple: <html>…</html>
Nocions bàsiques d'HTML
El llenguatge HTML pot ser creat i editat amb qualsevol editor de text bàsic, com pot ser Gedit en GNU/Linux, el Bloc de notes de Windows, o qualsevol altre editor que admeti text sense format com GNU Emacs, Microsoft Wordpad, TextPad, Vim, Notepad ++, entre d'altres.
Existeixen, a més, altres editors per a la realització de llocs web amb característiques WYSIWYG (What You See Is What You Get, o en català: «el que veus és el que obtens»). Aquests editors permeten veure el resultat del que s'està editant en temps real, a mesura que es va desenvolupant el document. Ara bé, això no significa una forma diferent de fer llocs web, sinó que és una forma una mica més simple, ja que aquests programes, a més de tenir l'opció de treballar amb vista preliminar, tenen la seva pròpia secció HTML, la qual va generant tot el codi a mesura que es treballa. Alguns exemples d'editors WYSIWYG són KompoZer, Microsoft FrontPage o Adobe Dreamweaver.
Combinar aquests dos mètodes resulta molt interessant, ja que es complementen entre si. Per exemple, si s'edita tot en HTML i el desenvolupador oblida algun codi o etiqueta, només cal dirigir-se a l'editor visual o WYSIWYG i es continua aquí l'edició o viceversa, ja que hi ha casos en què resulta més ràpid i fàcil escriure directament el codi d'alguna característica que l'usuari vol afegir al lloc que buscar l'opció en el programa mateix.
Hi ha un altre tipus d'editors HTML anomenats WYSIWYM que donen més importància al contingut i al significat que a l'aparença visual. Entre els objectius que tenen aquests editors és la separació del contingut i la presentació, fonamental en el disseny web.
HTML utilitza etiquetes o marques, que consisteixen en breus instruccions de començament i final, mitjançant les quals es determina la forma en què ha d'aparèixer al seu navegador el text, així com les imatges i els altres elements.
Tota etiqueta HTML està tancada entre els signes menor que i major que (<>), i algunes tenen atributs que poden prendre algun valor. En general les etiquetes s'aplicaran de dues formes especials:
- Obrint-se i tancant-se, com ara: <b> negreta </b> , que es veuria al seu navegador web com negreta.
- Sense obrir-se i tancar-se, com <hr/> , que es veuria al seu navegador web com una línia horitzontal.
Les etiquetes bàsiques o mínimes que conformen un document HTML són:
<! DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8"/>
<title> Exemple 1 </title>
</head>
<Body>
<p> Paràgraf d'exemple </p>
</body>
</html>
Accessibilitat web
El disseny en HTML, a part de complir amb les especificacions pròpies del llenguatge, ha de respectar certs criteris d'accessibilitat web, seguint unes pautes o les normatives i lleis vigents als països on es reguli aquest concepte. Es troba disponible i desenvolupat pel W3C a través de les Pautes d'Accessibilitat al Contingut Web 1.0 WCAG (actualitzades recentment amb l'especificació 2.0), tot i que molts països han desenvolupat especificacions pròpies, com és el cas d'Espanya amb la Norma UNE 139803.[6]
Entitats HTML
Molts caràcters especials, lletres accentuades, dièresi o símbols d'escriptura del llenguatge poden representar-se en un document HTML tant per si mateixos, com per una referència a una entitat. Entre els avantatges d'utilitzar una referència a una entitat, hi ha la de poder representar caràcters Unicode emprant una codificació de caràcters diferent, o la de suplir la manca d'alguns caràcters que falten al teclat usat.
| Nomenat | Decimal | Hexadecimal | Resultat | Descripció | Notes |
|---|---|---|---|---|---|
| & | & | & | & | Ampersand | |
| < | < | < | < | Menys que | |
| > | > | > | > | Més gran que | |
| " | " | " | " | Cita doble | |
| ' | ' | ' | ' | Cita única | |
| |   |   | Espai sense ruptura | ||
| © | © | © | © | Copyright | |
| ® | ® | ® | ® | Marca registrada | |
| † | † | † | † | Daga | |
| ‡ | ‡ | ‡ | ‡ | Doble punyal | Els noms distingeixen entre majúscules i minúscules |
| ‡ | ‡ | ‡ | ‡ | Doble punyal | Els noms poden tenir sinònims |
| ™ | ™ | ™ | ™ | Marca registrada |
Referències
- ↑ «llenguatge d’etiquetatge d’hipertext». Gran Enciclopèdia Catalana. [Consulta: 14 agost 2022].
- ↑ «Welcome to the WHATWG community» (en anglès). WHATWG. [Consulta: 14 agost 2022].
- ↑ «Firefox Navegador». Mozilla. [Consulta: 14 agost 2022].
- ↑ «XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)» (en anglès). World Wide Web Consortium (W3C). [Consulta: 14 agost 2022].
- ↑ www.ri5.com.ar/ayuda03.php Arxivat 2018-09-03 a Wayback Machine. El llenguatge HTML.
- ↑ Norma UNE 139803.
Vegeu també
Enllaços externs
- World Wide Web Consortium Regulador dels estàndards de la Web, incloent HTML
- HTML Home Page Pàgina oficial del HTML
- Validador automatitzat de codi HTML
- Apunts ràpids d'HTML Arxivat 2009-07-24 a Wayback Machine.