HTML - od epoki kamienia do XXI wieku

HyperText Markup Language (HTML) jest dość stary.

Nasze życie stało się nie do pomyślenia bez sieci WWW. HTML jest jednym z kamieni węgielnych sieci.

HTML jest stosunkowo prostym językiem. Składa się z zestawu elementów (znaczników), które służą do strukturyzowania treści i instruowania przeglądarek internetowych w celu renderowania dokumentów.

Pierwotnie HTML był intensywnie używany do stylizacji. Słynne przykłady tagów, które działają jako wskazówki do stylizacji, to:

‹namiot› (Na początku istnienia sieci witryna internetowa nie była witryną internetową bez markizy)

Chociaż tag ‹font› nadal można znaleźć na 6,5 milionach witryn internetowych, nie zaleca się używania kodu HTML w celu zapewnienia wyglądu i działania. Kaskadowe arkusze stylów (CSS) to język służący do stylizowania elementów HTML. CSS istnieje już od końca lat 90-tych.

Najważniejszym zadaniem HTML jest opisywanie struktury semantycznej dokumentów.

Początek

Tim Berners-Lee i Robert Cailliau pracowali w latach 80. XX wieku dla Europejskiej Organizacji Badań Jądrowych (CERN). Opracowali system hipertekstowy poprzedzający www. Celem tego systemu było ułatwienie wymiany i aktualizacji informacji pomiędzy badaczami. Już w latach 60. XX wieku internet rozwijała armia amerykańska.

Połączenie tych dwóch technologii: Internetu i hipertekstu było genialnym pomysłem.

Musiałem po prostu wziąć pomysł hipertekstu i połączyć go z koncepcjami TCP i DNS i — ta-da! - Sieć ogólnoświatowa. (Tim Berners-Lee)

W latach 80. Berners-Lee i Cailliau opracowali pierwszą przeglądarkę internetową, protokół HTTP i pierwszy serwer sieciowy (na NeXTcube). W 1991 roku została uruchomiona pierwsza strona internetowa: http://info.cern.ch/hypertext/WWW/TheProject.html

Można argumentować, że wynalazek WWW można porównać do wynalazku druku książek. Połowa światowej populacji korzysta z Internetu. Ma ogromny wpływ na nasze życie – zarówno pozytywny, jak i negatywny.

1991: Tim Berners-Lee opublikował pierwszą nieoficjalną wersję HTML

1993: Opublikowano HTML 1.0

Tę początkową fazę w historii HTML można scharakteryzować jako podstawowe udostępnianie informacji za pośrednictwem przeglądarek internetowych. W tamtym czasie HTML składał się z 18 tagów. Dla porównania ma teraz ponad 140 tagów. Nie było wielu twórców stron internetowych.

Słynne tagi tej pierwszej wersji HTML (v1.2) to:

nagłówek ‹h1›, ‹h2›, … aby uporządkować treść poprzez dodanie nagłówków i podtytułów na górze sekcji strony
akapit ‹p›, aby zidentyfikować akapity tekstu
kotwica ‹a›, aby połączyć się z inną treścią internetową
list ‹ul›, ‹ol›, aby uporządkować elementy w listę
image ‹img›, aby osadzić obrazy na stronie internetowej

Lata 90

1995: Opublikowano HTML 2.0

Ta wersja zawierała kilka dodatkowych funkcji.

1997: Opublikowano HTML 3.2

Ta wersja zawierała wiele ulepszeń. HTML3 zawierał nowe funkcje, takie jak:

stół (zmienny rozmiar)
formularz
aplet (małe programy Java, które zapewniają bardziej dynamiczną obsługę dotychczas statycznej zawartości sieci Web)
opływ tekstu wokół obrazu
tło obrazu
pod(super)skrypt

Siłą napędową tej dużej poprawy był Dave Raggett. Jego zdaniem strony internetowe powinny bardziej przypominać (błyszczące) gazety, a nie (nudne) strony podręczników. Raggett odegrał ważną rolę w rozwoju technologii internetowych. Oprócz HTML zajmował się m.in. HTTP, XHTML, VRML i Web of Things. W latach 1993-1998 pracował nad przeglądarką internetową Arena. To był projekt prywatny. Trudno dziś zrozumieć, że w tamtym okresie duże korporacje komputerowe nie wierzyły w WWW.

Chociaż HTML3 i przeglądarka internetowa Arena były bardzo innowacyjne, nie odniosły sukcesu pod względem użytkowania. Arena była projektem prywatnym. Ulepszenia HTML3 były zbyt rozległe, aby dostawcy przeglądarek mogli je szybko wdrożyć. Ta obserwacja doprowadziła do bardziej modułowego podejścia do rozwoju HTML w późniejszych latach.

Lata 2000

1999: Opublikowano HTML 4.01

HTML 4.01 odniósł duży sukces i był najczęściej używaną wersją w pierwszej dekadzie XXI wieku. W 2000 roku opublikowano XHTML. XHTML to HTML z bardziej rygorystycznymi zasadami.

W HTML 4.01 wprowadzono ważne nowe elementy:

‹tabela› do organizowania danych w wiersze i kolumny (już w HTML3?)
‹styl›, aby dodać CSS i zdefiniować styl elementów HTML
‹skrypt› umożliwiający dodanie JavaScriptu i uczynienie (statycznych) stron internetowych bardziej interaktywnymi

Wprowadzając CSS, można dokonać rozdziału pomiędzy definiowaniem struktury semantycznej dokumentu a sposobem, w jaki te elementy są prezentowane użytkownikowi i wizualizowane.

Wprowadzenie JavaScriptu, języka programowania sieci, dało niemal nieograniczone możliwości poprawy doświadczenia użytkownika.

Lata 2010

2008: wersja robocza HTML5 opracowana przez grupę roboczą ds. technologii internetowych aplikacji hipertekstowych (WHATWG)

2014: oficjalny standard konsorcjum World Wide Web (W3C)

HTML5 jest rozszerzeniem bardzo popularnej wersji HTML 4.01. Hasło HTML5 brzmi: zróbmy wszystko lepiej! Można wyróżnić trzy aspekty:

Twórz bardziej dynamiczne i wszechstronne funkcje. Obejmuje to ruch aż do dnia dzisiejszego, mający na celu zastąpienie skryptów znacznikami
Zapewnienie podobnego doświadczenia użytkownika na różnych urządzeniach. Co było w dużym stopniu stymulowane przez rozwój urządzeń mobilnych.
Bardziej przyjazny dla użytkownika i wolny od błędów

Dobrze znanym przykładem jest typ wprowadzania liczb ‹input type=”liczba”›:

Wprowadzanie liczb jest przyjazne dla użytkownika. Na przykład nie można wpisać wartości innej niż numeryczna. Na różnych urządzeniach zachowuje się tak samo. Nie trzeba już pisać kodu JavaScript, aby samodzielnie wdrożyć funkcje wprowadzania liczb. Jest to komponent sieciowy, który zawiera JavaScript i stylizację.

HTML5 oferuje więcej.

Dźwięk i wideo

nie są już potrzebne żadne wtyczki
funkcje odtwarzania
dostępność

W poniższym minimalistycznym fragmencie kodu elementy ‹video› i ‹canvas› służą do połączenia się z kamerą urządzenia i narysowania migawki:

<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. Wiele nowych tagów semantycznych

Przykłady:

‹stopka›
‹nawigacja›

Tagi semantyczne nadają stronom znaczenie i strukturę. Jest to ważne dla:

czytniki ekranu, roboty indeksujące i wtyczki
wyszukiwarki i optymalizacja wyszukiwarek (SEO)
stylizacja (CSS)

CSS powinien opierać się w jak największym stopniu na znaczących elementach HTML, a nie na atrybutach class i id elementów ‹div›. Nowe znaczniki semantyczne HTML5 pomagają uniknąć divitis:

(projektowanie stron internetowych, zwykle obraźliwe) Praktyka tworzenia kodu strony internetowej z wieloma elementami div zamiast znaczących semantycznych elementów HTML. (Wikipedia)

3. Ulepszenia wydajności

Przykłady ulepszeń wydajności to:

asynchroniczne ładowanie JavaScript: ‹script async›
wstępne ładowanie wideo: ‹wstępne ładowanie wideo›

4. Wsparcie offline

Funkcje wsparcia offline to: AppCache, Service Workers i lokalna pamięć masowa.

W 2010 roku toczyła się dyskusja pomiędzy WHATWG i W3C na temat wersjonowania HTML. W3C chciała podejścia kamienia milowego. WHATWG zależało na podejściu opartym na żywym dokumencie. Zaletą tego ostatniego jest to, że dostawcy przeglądarek mogą łatwiej dostosowywać się do iteracyjnych aktualizacji (zobacz wyzwania związane z implementacją HTML3). Wadą jest to, że trudniej jest zapewnić wsparcie, a ustalenie, które funkcje są dostępne w danym momencie, może stanowić wyzwanie.

Od 2019 roku WHATWG jest autorytetem standardu HTML i DOM. Specyfikacja HTML jest żywym dokumentem. Zobacz https://whatwg.org/

HTML6

Obecnie ludzie mówią o HTML6. Biorąc pod uwagę fakt, że HTML rozwija się poprzez iteracyjne aktualizacje, mówienie o wersji 6 jest problematyczne. Nowe funkcje są częściowo kontynuacją istniejącej ścieżki, jak komponenty natywne i rozszerzenie znaczników semantycznych, a częściowo nowymi pomysłami, jak tagi ekspresowe i przestrzenie nazw. Strona html6test.com mierzy, jak dobrze Twoja przeglądarka obsługuje HTML6. Sugeruje to, że istnieje zestaw funkcji uznawanych za HTML6.

Rzućmy okiem na te zupełnie nowe funkcje.

Więcej tagów semantycznych

Do specyfikacji HTML dodano jeszcze więcej znaczników semantycznych. Ponownie, znaczniki te nie zachowują się, a ich jedynym celem jest nadanie znaczenia dokumentowi. Tagi te mogą służyć jako haki dla CSS i oprogramowania zewnętrznego (parsery). Kilka przykładów:

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

Lista definicji

<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>

Postać

<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>

Kod

<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>

Definicja

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

Czas

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

Ten element reprezentuje znacznik czasu w formacie do odczytu maszynowego.

Ważne jest, aby mieć duży zestaw tagów, aby nadać znaczenie danym. W tym kontekście interesujące jest przyjrzenie się tak zwanym mikroformatom i tagom ekspresowym.

Mikroformaty to sposób na dodawanie znaczników do dokumentów. Umożliwia to oprogramowaniu (parserom) wyodrębnianie informacji oraz ich indeksowanie, wyszukiwanie lub przetwarzanie w inny sposób. Podobnie jak znaczniki semantyczne, mikroformaty dodają metainformacje do dokumentów. Zobacz https://microformats.org/

W Internecie można znaleźć uwagi na temat nowej, nadchodzącej funkcji HTML: tak zwanych tagów ekspresowych. Pomysł jest taki, że autor może tworzyć własne tagi. Ograniczyłoby to użycie ‹div› i dlatego dodałoby strukturę semantyczną. Przykładami takich znaczników DIY mogą być:

‹logo› zamiast ‹div id=”logo”›
‹pasek narzędzi› zamiast ‹div id=”pasek narzędzi”›
‹kontener› zamiast ‹div id=”kontener”›

Zakłada to przestrzenie nazw takie jak w XML:

‹html:tytuł›
‹html:a›
‹html:treść›
itp

Więcej komponentów natywnych

W kontekście ulepszeń, które rozpoczęły się od HTML5 w 2010 roku, stworzono więcej nowych, bogatych komponentów. Te elementy HTML wciągnęły (do cienia DOM) kod JavaScript i CSS, który w przeciwnym razie programiści musieliby napisać sami. Rzućmy okiem na kilka przykładów. Te fragmenty kodu są tak minimalistyczne, jak to tylko możliwe. To niesamowite widzieć funkcjonalność, jaką te elementy oferują od razu po wyjęciu z pudełka!

Detale

<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 danych (autouzupełnianie)

<input list="browsers">

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

Datalista połączona z selektorem daty i godziny:

<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>

Datalista połączona z suwakiem zakresu:

<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>

Datalista połączona z próbnikiem kolorów:

<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>

Metr

<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>

Pasek postępu

<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>

Plotki

Oprócz ciągłej pracy nad znacznikami semantycznymi i komponentami natywnymi, wprowadzono znacznie więcej ulepszeń. Na przykład: tag ‹picture› z precyzyjną kontrolą renderowania obrazów, tag ‹output› i nowy atrybut „hidden”. Ponadto niektóre blogi w Internecie opisują nowe funkcje, których status jest dla mnie niejasny:

Wtykowe języki. Na przykład ‹typ skryptu=”text/python”›. Dlaczego warto używać Pythona zamiast JavaScriptu?
Gwarancyjne biblioteki. Biblioteki udostępniane przez przeglądarki internetowe.
Wzmocnione uwierzytelnianie.
Włączenie kamery. Nie ma jeszcze natywnego komponentu „kamery” w formacie HTML. Ciekawym artykułem na temat używania elementu ‹input› bez JavaScript jest https://jakub-kozak.medium.com/how-to-open-the-native-camera-in-mobile-browsers-327820fa669a

Streszczenie

Współczesne życie w dużej mierze zależy od dostępu do Internetu. HTML należy do technicznego fundamentu sieci. To stary język, ale bardzo ważny i bardzo żywy. Jest używany przez miliony autorów i stale się rozwija i udoskonala.