HyperText Markup Language (HTML) este destul de vechi.

Viața noastră a devenit de neconceput fără World Wide Web. HTML este una dintre pietrele de temelie ale web-ului.

HTML este un limbaj relativ simplu. Este alcătuit dintr-un set de elemente (etichete) care sunt folosite pentru a structura conținutul și pentru a instrui browserele web să reda documente.

Inițial, HTML a fost foarte folosit pentru stil. Exemple celebre de etichete care funcționează ca indicii pentru stil sunt:

  • ‹font›
  • ‹marquee› (În zorii rețelei web, un site web nu era un site web fără marcaj)

Deși eticheta ‹font› încă poate fi găsită pe 6,5 milioane de site-uri web, nu este recomandat să folosiți HTML pentru aspectul și senzația. Cascading Style Sheets (CSS) este limbajul pentru stilarea elementelor HTML. CSS există deja de la sfârșitul anilor 1990.

Cea mai importantă sarcină a HTML este descrierea structurii semantice a documentelor.

Inceputul

Tim Berners-Lee și Robert Cailliau au lucrat în anii 1980 pentru Organizația Europeană pentru Cercetare Nucleară (CERN). Ei au dezvoltat un sistem hipertext pre-www. Scopul acestui sistem a fost de a facilita schimbul și actualizarea informațiilor între cercetători. Deja în anii 1960 internetul a fost dezvoltat de armata SUA.

A fost o idee genială să combine aceste două tehnologii: internetul și hipertextul.

A trebuit doar să iau ideea de hipertext și să o conectez la ideile TCP și DNS și — ta-da! — World Wide Web. (Tim Berners-Lee)

În anii 1980, Berners-Lee și Cailliau au dezvoltat primul browser web, protocolul HTTP și primul server web (pe un NeXTcube). În 1991 a fost lansat primul site web: http://info.cern.ch/hypertext/WWW/TheProject.html

S-ar putea argumenta că invenția WWW este comparabilă cu invenția tipăririi cărților. Jumătate din populația lumii este pe web. Are un impact enorm asupra vieții noastre - atât pozitiv, cât și negativ.

1991: Tim Berners-Lee a publicat prima versiune neoficială a HTML

1993: HTML 1.0 publicat

Această fază inițială din istoria HTML poate fi caracterizată ca partajarea de bază a informațiilor prin intermediul browserelor web. În acel timp, HTML era format din 18 etichete. Pentru comparație, are peste 140 de etichete acum. Nu au fost mulți dezvoltatori web.

Etichetele celebre ale acestei prime versiuni de HTML (v1.2) sunt:

  • titlul ‹h1›, ‹h2›, … pentru a organiza conținutul adăugând titluri și subtitluri în partea de sus a secțiunilor paginii
  • paragraf ‹p› pentru a identifica paragrafe de text
  • ancorați ‹a› pentru a face legătura către alt conținut web
  • listă ‹ul›, ‹ol› pentru a organiza elementele într-o listă
  • imagine ‹img› pentru a încorpora imagini într-o pagină web

Anii 1990

1995: HTML 2.0 publicat

Această versiune conținea câteva caracteristici suplimentare.

1997: HTML 3.2 publicat

Această versiune conținea o mulțime de îmbunătățiri. HTML3 conținea noi funcții precum:

  • tabel (redimensionabil)
  • formă
  • applet (programe Java mici care oferă o experiență mai dinamică conținutului web static de până atunci)
  • fluxul de text în jurul imaginii
  • fundalul imaginii
  • sub(super)script

Forța motrice din spatele acestei mari îmbunătățiri a fost Dave Raggett. În opinia sa, paginile web ar trebui să arate mai mult ca lucrări de reviste (lucioase) în loc de pagini de manuale (plictisitoare). Raggett a jucat un rol important în dezvoltarea tehnologiilor web. Pe lângă HTML, a lucrat la: HTTP, XHTML, VRML și Web of Things. În anii 1993–1998 a lucrat la browserul web Arena. Acesta a fost un proiect privat. Greu de înțeles în zilele noastre este că în această perioadă de timp marile corporații de calculatoare nu credeau în WWW.

Deși HTML3 și browserul web Arena au fost foarte inovatoare, nu au avut succes în ceea ce privește utilizarea. Arena a fost un proiect privat. Îmbunătățirile HTML3 au fost prea extinse pentru a fi implementate rapid de către furnizorii de browsere. Această observație a condus la o abordare mai modulară a dezvoltării HTML în anii următori.

Anii 2000

1999: HTML 4.01 publicat

HTML 4.01 a avut un mare succes și cea mai folosită versiune în anii 2000. În 2000 a fost publicat XHTML. XHTML este HTML cu reguli mai stricte.

În HTML 4.01 au fost introduse noi elemente importante:

  • ‹tabel› pentru a organiza datele în rânduri și coloane (deja în HTML3?)
  • ‹stil› pentru a adăuga CSS și a defini stilul elementelor HTML
  • ‹script› pentru a adăuga JavaScript și a face paginile web (statice) mai interactive

Prin introducerea CSS s-ar putea face o separare între definirea structurii semantice a unui document și modul în care aceste elemente sunt prezentate utilizatorului și vizualizate.

Introducerea JavaScript, limbajul de programare al web-ului, a oferit posibilități aproape nesfârșite de îmbunătățire a experienței utilizatorului.

Anii 2010

2008: proiect HTML5 de Web Hypertext Application Technology Working Group (WHATWG)

2014: standard oficial de World Wide Web Consortium (W3C)

HTML5 este o extensie a foarte popularei versiuni HTML 4.01. Sloganul HTML5 este: să îmbunătățim lucrurile! Se pot distinge trei aspecte:

  • Creați funcții mai dinamice și versatile. Aceasta include o mișcare până în prezent, pentru a înlocui scripturile cu marcaj
  • Asigurarea unei experiențe de utilizator similare pe dispozitive diferite. Ceea ce a fost foarte mult stimulat de ascensiunea dispozitivelor mobile.
  • Mai ușor de utilizat și fără erori

Un exemplu binecunoscut este un tip de introducere a numărului ‹input type=”number”›:

Introducerea numărului este ușor de utilizat. De exemplu, este imposibil să tastați o valoare care nu este numerică. Se comportă la fel pe diferite dispozitive. Și nu mai este necesar să scrieți cod JavaScript pentru a implementa singur funcțiile de introducere a numerelor. Este o componentă web care încapsulează JavaScript și stilul.

HTML5 oferă mai mult.

  1. Audio și video
  • nu mai sunt necesare pluginuri
  • caracteristici de redare
  • accesibilitate

În fragmentul de cod minimalist de mai jos, elementele ‹video› și ‹pânză› sunt folosite pentru a se conecta la camera dispozitivului și a desena o imagine instantanee:

<video id="my-video" autoplay></video>

<button onclick="getCurrentFrame()">Take Snapshot</button>

<canvas id="my-canvas" width="640" height="480"></canvas>

<script>
    const video = document.getElementById('my-video');
    const canvasContext = document.getElementById('my-canvas').getContext('2d');

    if (!navigator.getUserMedia) {
        console.log("getUserMedia not supported by your browser");
    }

    navigator.getUserMedia(
        {
            video: true,
            audio: false
        },
        (stream) => video.srcObject = stream,
        (error) => console.log(error)
    );

    function getCurrentFrame() {
        canvasContext.drawImage(video, 0, 0)
    }
</script>

2. Multe etichete semantice noi

Exemple:

  • ‹nav›

Etichetele semantice dau sens și structură paginilor. Acest lucru este important pentru:

  • cititoare de ecran, crawler-uri și pluginuri
  • motoarele de căutare și optimizarea motoarelor de căutare (SEO)
  • stil (CSS)

CSS ar trebui să se bazeze cât mai mult posibil pe elemente HTML semnificative și nu pe atributele de clasă și id ale elementelor ‹div›. Noile etichete semantice ale HTML5 ajută la evitarea divitei:

(design web,de obicei derogatoriu) Practica de a crea cod de pagină web cu multe elemente div în locul elementelor HTML semantice semnificative. (Wikipedia)

3. Îmbunătățiri de performanță

Exemple de îmbunătățiri ale performanței sunt:

  • încărcare asincronă a JavaScript: ‹script async›
  • preîncărcarea videoclipului: ‹preîncărcare video›

4. Asistență offline

Funcțiile de asistență offline sunt: ​​AppCache, lucrători de service și stocare locală.

În anii 2010 au existat discuții între WHATWG și W3C despre versiunea HTML. W3C dorea o abordare echivalentă. WHATWG a dorit o abordare a documentului viu. Avantajul acestuia din urmă este că furnizorii de browsere se pot adapta mai ușor la actualizări iterative (vezi provocările implementării HTML3). Dezavantajele sunt că este mai greu să promovezi sprijinul și că poate fi o provocare să afli care funcții au devenit disponibile la un moment dat.

Din 2019, WHATWG este autoritatea standardelor HTML și DOM. Specificația HTML este un document viu. Vedeți „https://whatwg.org/”

HTML6

În prezent, oamenii vorbesc despre HTML6. Având în vedere faptul că HTML se dezvoltă prin actualizări iterative, este problematic să vorbim despre o versiune 6. Noile caracteristici sunt parțial continuarea unei căi existente care a fost luată, cum ar fi componentele native și extensia etichetelor semantice și parțial idei noi, cum ar fi etichetele expres și spațiile de nume. Site-ul html6test.com măsoară cât de bine acceptă browserul dvs. HTML6. Acest lucru sugerează că există un set de caracteristici care sunt considerate a fi HTML6.

Să aruncăm o privire asupra acestor funcții noi.

Mai multe etichete semantice

Încă mai multe etichete semantice sunt adăugate la specificația HTML. Din nou, aceste etichete nu au niciun comportament și singurul lor scop este de a da sens unui document. Aceste etichete pot fi folosite ca cârlige pentru CSS și software extern (parsere). Cateva exemple:

Meniul

<menu type="toolbar">
  <li><button>Apples</button></li>
  <li><button>Pears</button></li>
  <li><button>Oranges</button></li>
</menu>

Lista de definiții

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <dt>Chrome</dt>
  <dd>Another web browser</dd>
</dl>

Figura

<figure>
  <figcaption>Johan Cruijff</figcaption>
  <blockquote>
    Als ik zou willen dat je het begreep, zou ik het beter hebben uitgelegd.
  </blockquote>
</figure>

<figure>
  <img src="favicon.ico">
  <figcaption>Star</figcaption>
</figure>

<figure>
  <pre>
      ___________________________
    < I'm an expert in my field. >
      ___________________________
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
</figure>

Cod

<p>The <code>push()</code> method adds one or more elements to
  the end of an array and returns the new length of the array.</p>

Definiție

<p>A <dfn id="def-validator">validator</dfn> is a program that
  checks for syntax errors in code or documents.</p>

Timp

<p>The concert starts at <time datetime="2018-07-07T20:00:00">20:00</time>.</p>

Acest element reprezintă un marcaj de timp în format care poate fi citit de mașină.

Este important să aveți un set mare de etichete pentru a da sens datelor. În acest context, este interesant să privim așa-numitele microformate și etichete expres.

Microformatele sunt o modalitate de a adăuga markup documentelor. Acest lucru face posibil ca software-ul (parsere) să extragă informațiile și să le indexeze, să le caute sau să le prelucreze în alt mod. La fel ca etichetele semantice, microformatele adaugă metainformații documentelor. Vedeți „https://microformats.org/”

Pot fi găsite pe web observații despre o nouă funcție HTML viitoare: așa-numitele etichete expres. Ideea este că un autor își poate crea propriile etichete. Acest lucru ar reduce utilizarea ‹div›-urilor și, prin urmare, ar adăuga structură semantică. Exemple de astfel de etichete DIY ar putea fi:

  • ‹logo› în loc de ‹div id="logo”›
  • ‹toolbar› în loc de ‹div id=”toolbar”›
  • ‹container› în loc de ‹div id=”container”›

Aceasta presupune spații de nume ca în XML:

  • ‹html:title›
  • ‹html:a›
  • ‹html:corp›
  • etc

Mai multe componente native

În contextul îmbunătățirii lucrurilor, care a început cu HTML5 în anii 2010, au fost create mai multe componente noi. Aceste elemente HTML au atras (în umbră DOM) codul JavaScript și CSS pe care, altfel, dezvoltatorii ar trebui să le scrie ei înșiși. Să aruncăm o privire la câteva exemple. Aceste fragmente de cod sunt cât se poate de minimaliste. Este uimitor să vezi funcționalitatea pe care o oferă aceste elemente din cutie!

Detalii

<details id="foo">
  <summary>Presenting with IntelliJ IDEA</summary>
  To enable mouse zoom, you need to turn it on explicitly.
  Go to Preferences > Editor > General and select Change font size with
  Command+Mouse Wheel (on Mac)
</details>

<button onclick="toggleDetails()">Toggle</button>

<script>
  function toggleDetails() {
    const el = document.getElementById('foo');
    el.open = !el.open;
  }
</script>

Lista de date (completare automată)

<input list="browsers">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Edge">
  <option value="Firefox">
  <option value="Safari">
</datalist>

Lista de date conectată la un selector de dată și oră:

<input type="date" list="dates">

<datalist id="dates">
  <option value="2023-06-01">
  <option value="2023-06-02">
  <option value="2023-06-03">
</datalist>

<input type="time" list="hours">

<datalist id="hours">
  <option value="12:00">
  <option value="13:00">
  <option value="14:00">
  <option value="15:00">
</datalist>

Lista de date conectată la un glisor de interval:

<input type="range" list="percentages" min="0" max="100">

<datalist id="percentages">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>

Lista de date conectată la un selector de culori:

<input type="color" list="redColors">

<datalist id="redColors">
  <option value="#800000"></option>
  <option value="#8B0000"></option>
  <option value="#A52A2A"></option>
  <option value="#DC143C"></option>
</datalist>

Dialog

<dialog id="foo">
  <p>Is this a HTML-powered dialog box?</p>
  <form method="dialog">
    <input type="submit" value="Yes">
    <input type="submit" value="No">
  </form>
</dialog>

<button onclick="openDialog()">Open dialog</button>

<button onclick="showDialogValue()">Show value</button>

<script>
  openDialog = () => document.getElementById('foo').open = true;

  showDialogValue = () => window.alert(`Dialog value: ${document.getElementById('foo').returnValue}`)
</script>

Metru

<meter
  id="fuel"
  min="0" max="100"
  low="33" high="66" optimum="80"
  value="100"
>
</meter>

<script>
  const el = document.getElementById('fuel');
  const intervalId = setInterval(() => {
    el.value -= 1;
    if (el.value === 100) {
      clearInterval(intervalId);
    }
  }, 100);
</script>

Bara de progres

<progress id="foo" value="0" max="100"></progress>

<script>
  const el = document.getElementById('foo');
  const intervalId = setInterval(() => {
    el.value += 1;
    if (el.value === 100) {
      clearInterval(intervalId);
    }
  }, 100);
</script>

Zvonuri

Pe lângă această muncă continuă asupra etichetelor semantice și a componentelor native, există mult mai multe îmbunătățiri. De exemplu: eticheta ‹picture› cu controlul său fin asupra redării imaginilor, eticheta ‹output› și noul atribut „ascuns”. În plus, unele bloguri de pe internet descriu funcții noi a căror stare nu îmi este clară:

  • Limbi conectabile. De exemplu ‹script type="text/python"›. De ce ar trebui să folosim Python în loc de JavaScript?
  • Biblioteci garantate. Bibliotecile care sunt furnizate de browserele web.
  • Autentificare întărită.
  • Încorporarea camerei. Nu există încă o componentă nativă ‹camera› în HTML. Un articol interesant despre utilizarea elementului ‹input› fără JavaScript este https://jakub-kozak.medium.com/how-to-open-the-native-camera-in-mobile-browsers-327820fa669a

rezumat

Viața modernă depinde foarte mult de accesul la web. HTML aparține bazei tehnice a web-ului. Este o limbă veche, dar foarte importantă și foarte vie. Este folosit de milioane de autori și este în continuă evoluție și îmbunătățire.