Omówienie kodu HTML

HyperText Markup Language (hipertekstowy język znaczników) (HTML) to standardowy język znaczników używany do opisywania struktury dokumentów wyświetlanych w sieci. HTML składa się z serii elementów i atrybutów, które służą do zaznaczania wszystkich komponentów dokumentu, by nadać mu odpowiednią strukturę.

Dokumenty HTML to zasadniczo drzewo węzłów obejmujących elementy HTML i węzły tekstowe. Elementy HTML określają semantykę i formatowanie dokumentów, umożliwiając między innymi tworzenie akapitów, list i tabel oraz umieszczanie obrazów i elementów sterujących formularza. Każdy element może mieć określone wiele atrybutów. Wiele elementów może zawierać treść, w tym inne elementy i tekst. Pozostałe elementy są puste, a tag i atrybuty definiują ich funkcję.

Istnieje kilka kategorii elementów, w tym metadane, sekcje, tekst, semantyka w tekście, formularz, elementy interaktywne, multimedia, komponent i skrypty. Większość z nich omówimy w tej serii. Po pierwsze: czym jest element?

Elementy

HTML to seria elementów, które można zamykać lub pakować różne części treści tak, aby wyglądała lub działała w określony sposób. Elementy HTML są oznaczone tagami za pomocą nawiasów kątowych (< i >).

Tytuł naszej strony to nagłówek na pierwszym poziomie, w którym używamy tagu <h1>. Sam tytuł „Warsztaty systemów uczących się” to treść naszego elementu. Treść jest umieszczona między tagiem otwierającym a zamykającym. Cała rzecz – tag otwierający, tag zamykający i treść – to element.

Tag zamykający jest taki sam jak tag otwierający, poprzedzony ukośnikiem.

Elementy i tagi nie są dokładnie takie same, chociaż wiele osób używa tych terminów zamiennie. Nazwa tagu to treść w nawiasie. Tag zawiera nawiasy. W tym przypadku <h1>. „Element” to tag otwierający i zamykający oraz całą zawartość tych tagów, w tym elementy zagnieżdżone.

<p>This paragraph has some
  <strong><em>strongly emphasized</em></strong>
  content</p>

Ten element akapitu ma zagnieżdżone inne elementy. Gdy elementy są zagnieżdżane, muszą być prawidłowo zagnieżdżone. Tagi HTML należy zamknąć w odwrotnej kolejności, w jakiej zostały otwarte. Zwróć uwagę na to, że w powyższym przykładzie tag <em> jest otwierany i zamykany zarówno w otwierających i zamykających tagach <strong>, jak i otwarty i zamknięty <strong> w tagach <p>.

Przeglądarki nie wyświetlają tagów. Tagi służą do interpretacji zawartości strony.

HTML jest bardzo cenny. Jeśli np. pominiemy zamykające tagi </li>, tag zamykający zostanie zaproponowany.

<ul>
  <li>Blendan Smooth
  <li>Hoover Sukhdeep
  <li>Toasty McToastface
</ul>

Chociaż nie można zamknąć dokumentu <li>, nie jest to jednak dobra metoda. Zamknięcie </ul> jest obowiązkowe. Jeśli tag zamykający listy nieuporządkowanej zostanie pominięty, przeglądarka spróbuje określić, gdzie kończy się lista i elementy listy, ale możesz nie zgodzić się z tą decyzją.

Specyfikacja każdego elementu informuje, czy tag zamykający jest obowiązkowy, czy nie. Informacja „Żaden tag nie jest pominięty” w specyfikacji oznacza, że wymagane są zarówno tag otwierający, jak i zamykający. Specyfikacja zawiera listę wszystkich wymaganych tagów zamykających.

Jeśli element <em> lub <strong> w poprzednim przykładzie nie został zamknięty, przeglądarka może go zamknąć, ale nie musi. Jeśli nie zamkniesz <em>, treści mogą być renderowane w sposób niezgodny z oczekiwaniami. Jeśli pominiesz element </ul>, a następny tag będzie tagiem zamykającym nadrzędnego kontenera listy, masz szczęście. Jeśli z drugiej strony jest to otwierający tag <h1>, przeglądarka przyjmie, że nagłówek znajduje się na liście, w tym dziedziczą style. Niektóre pominięte tagi zamykające powodują większe problemy: niezamykanie niektórych tagów, np. <script>, <style>, <template>, <textarea> i <title>, powoduje uszkodzenie kolejnych treści, jak pokazano w poniższym przykładzie.

Używanie niezamierzonych kursywy niektórych treści lub wcięcie nagłówka nie zniszczy Twojej firmy. Większość treści jest pozbawiona stylu w obszarze tekstowym o wymiarach 200 x 300, ponieważ użytkownik zapomniał dodać element </textarea> lub w ogóle się nie wyświetlił, bo zapomniał zamknąć </style>, sprawia, że witryna jest bezużyteczna.

W niektórych przypadkach przeglądarki uwzględnią elementy, nawet jeśli w znacznikach nie będzie odpowiednich tagów. Elementy mogą być domniemane, więc element może istnieć nawet wtedy, gdy nie ma tagów. Przeglądarka doda <body></body> wokół treści i <tbody></tbody> wokół wierszy tabeli, nawet jeśli tego nie zrobisz. Pamiętaj przy tym, że pomijanie tagów jest dozwolone, ale ich nie rób. Jak już wspomnieliśmy, upewnij się też, że są prawidłowo zagnieżdżone. Twoja przyszła osoba, która dba o tworzenie znaczników, i każda osoba pracująca nad Twoim kodem Ci za to podziękuje.

Istnieją 2 typy elementów: zastąpione i niewymienione.

Niezastąpione elementy

Akapit, nagłówek i listy oznaczone we wcześniejszej sekcji nie zostaną zastąpione. Niezastąpione elementy mają otaczające je tagi otwierające i (czasami opcjonalne) zamykające i mogą zawierać tekst oraz inne tagi jako elementy podrzędne. Te tagi mogą przekształcić wyrażenie lub obraz w hiperlink, zmienić zdanie w nagłówek, podkreślić słowa itp.

Elementy zastąpione i nieważne

Zastąpione elementy są zastępowane obiektami, niezależnie od tego, czy chodzi o widżet graficzny interfejsu użytkownika (w przypadku większości elementów sterujących) czy rastrowy lub skalowalny plik obrazu w przypadku większości obrazów. Gdy zostaną zastąpione obiektami, każdy z nich będzie miał domyślny wygląd. W zależności od typu obiektu i przeglądarki dostępne style są ograniczone. Na przykład większość przeglądarek umożliwia ograniczone style widżetów UI i powiązanych z nimi pseudoelementów. W przypadku obrazów rastrowych wysokość, szerokość, przycinanie i filtrowanie można łatwo wykonać za pomocą CSS, ale w niczym więcej. Z drugiej strony skalowalna grafika wektorowa wykorzystująca język znaczników oparty na języku XML podobnym do HTML daje pełną skalowalność (chyba że zawiera obrazy rastrowe). Można w nich też zmieniać styl. Pamiętaj, że możliwość zmiany stylu elementu SVG umieszczonego w kodzie CSS powiązanym z umieszczonym plikiem HTML zależy od konfiguracji SVG.

W tym przykładzie dwa zastąpione elementy <img> i <input> zostały zastąpione treściami nietekstowymi: odpowiednio obrazem i obiektem graficznym interfejsu użytkownika.

<input type="range">
<img src="switch.svg" alt="light switch">

Dane wyjściowe powyższego kodu HTML:

Elementy zamienne i puste elementy są często mylone. Elementy puste to takie, które automatycznie zamykają się i są reprezentowane przez jeden tag. Oznacza to, że nie ma czegoś takiego jak tag zamykający dla pustego elementu. Opcjonalnie możesz dodać ukośnik na końcu tagu, co ułatwi czytelnikowi odczytanie znaczników. W tym przykładzie sami zamykamy tag ukośnikiem:

<input type="range"/>
<img src="switch.svg" alt="light switch"/>

Ukośnik na końcu oznacza starą wersję: wskazuje, że element automatycznie się zamyka i nie ma dopasowanego tagu końcowego ani zamykającego.

Elementy puste nie mogą zawierać treści tekstowej ani elementów zagnieżdżonych. Brak elementów to między innymi: <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track> i <wbr>.

Większość zastępowanych elementów to puste elementy, ale nie wszystkie. Elementy video, picture, object i iframe zostają zastąpione, ale nie są nieważne. Wszystkie mogą zawierać inne elementy lub tekst, więc wszystkie mają tag zamykający.

Zastępowana jest większość pustych elementów, ale nie wszystkie, tak jak w przypadku base, link, param i meta. Dlaczego może mieć pusty element, który nie może mieć żadnej zawartości, który nie jest zastępowany i przez to niczego nie wyświetla na ekranie? Aby podać informacje o treściach! Informacje są dostarczane za pomocą atrybutów elementów.

Atrybuty

Jak można zauważyć, w przykładach <img> i <input> występuje więcej niż tylko typ elementu w tagu otwierającym. Te dodatkowe bity oddzielone spacjami par nazwa-wartość (choć czasami podawanie wartości jest opcjonalne) są nazywane atrybutami. To właśnie atrybuty sprawiają, że HTML jest tak wszechstronny. W tej serii omówimy setki atrybutów i ich wartości, ale w tym artykule skupimy się na ich ogólnych specyfikacjach i sposobie ich dodawania.

Atrybuty dostarczają informacji o elemencie. Ten atrybut, podobnie jak reszta tagu otwierającego, nie pojawi się w treści, ale pomoże określić sposób, w jaki treść będzie się wyświetlać zarówno użytkownikom, którzy widzą treści, jak i niewidomym (technologiom wspomagającym i wyszukiwarkom).

Atrybuty są widoczne tylko w tagu otwierającym. Tag otwierający zawsze zaczyna się od typu elementu. Po typie może występować 0 atrybutów lub większa ich liczba rozdzielonych spacjami. Po większości nazw atrybutów następuje znak równości oznaczający wartość atrybutu, ujęty w otwierający i zamykający cudzysłów.

W tym przykładzie mamy link do kotwicy z 2 atrybutami. Te 2 atrybuty sprawiły, że treść „Rejestracja” została przekonwertowana w wewnętrzny link zakotwiczony, który przewija się do atrybutu id="register" w bieżącej karcie przeglądarki, gdy link zostanie kliknięty, dotknięty lub aktywowany za pomocą klawiatury lub innego urządzenia.

Atrybuty definiują działanie, połączenia i funkcjonalność elementów. Więcej atrybutów znajdziesz w sekcji Atrybuty w tej serii. Na razie zwróć uwagę, że niektóre atrybuty są globalne, co oznacza, że mogą pojawiać się w tagu otwierającym dowolnego elementu. Niektóre mają zastosowanie tylko do kilku elementów, a inne do konkretnych elementów i dotyczą tylko jednego elementu.

Większość atrybutów to pary nazwa-wartość. Atrybuty logiczne, których wartość to prawda, fałsz lub jest taka sama jak nazwa atrybutu, można dodać tylko jako atrybut – wartość nie jest wymagana.

<img src="switch.svg" alt="light switch" ismap />

Ten obraz ma trzy atrybuty: src, alt i ismap. Atrybut src służy do określania lokalizacji zasobu graficznego SVG. Atrybut alt zawiera tekst zastępczy opisujący zawartość obrazu. Atrybut ismap jest wartością logiczną i nie wymaga wartości. To tylko wyjaśnienie, czym są atrybuty. Omówimy te atrybuty bardziej szczegółowo w sekcji obrazy.

Atrybuty cytowania nie zawsze są wymagane, ale czasami tak jest. Jeśli wartość zawiera spację lub znaki specjalne, potrzebne są cudzysłowy. Z tego względu zawsze zalecamy cytowanie. Co najmniej jedna spacja między atrybutami, jeśli jest wskazana w cudzysłowie, nie jest faktycznie wymagana, ale ze względu na bezpieczeństwo i czytelność zalecamy stosowanie cudzysłowów i spacji.

W kodzie HTML wielkość liter nie jest rozróżniana, ale niektóre wartości atrybutów już tak. W wartościach zdefiniowanych w specyfikacji wielkość liter nie jest rozróżniana. W ciągach znaków, które nie są zdefiniowane jako słowa kluczowe, wielkość liter jest zwykle rozróżniana, m.in. w wartościach id i class.

Pamiętaj, że jeśli w wartości atrybutu HTML rozróżniana jest wielkość liter, jest ona rozróżniana, gdy używasz jej w selektorze atrybutu w CSS i JavaScript.

Aby zwiększyć czytelność znaczników, zalecamy, ale nie wymagane, zaznaczanie kodu HTML przy użyciu małych liter w przypadku nazw wszystkich elementów i atrybutów w tagach oraz cudzysłowów wszystkich wartości atrybutów. Jeżeli kiedykolwiek spotkacie się z terminem „znaczniki stylu XHTML”, to właśnie one mogą oznaczać, że są to samozamykające się puste elementy z ukośnikiem na końcu.

Wygląd elementów

Domyślny wygląd elementów semantycznych są określane przez arkusze stylów klienta użytkownika. Większość przeglądarek używa do tego celu rzeczywistych arkuszy stylów, podczas gdy inne symulują je w kodzie. Efekt końcowy jest taki sam. Chociaż niektóre ograniczenia dotyczące arkuszy stylów klienta użytkownika są określone w specyfikacji HTML, przeglądarki mają dużą szerokość geograficzną, co oznacza, że między przeglądarkami występują pewne różnice.

Wybrany element, a tym samym używane tagi, powinny być odpowiednie do wyświetlanej treści, ponieważ tagi mają znaczenie semantyczne. Semantyka (role) elementu jest ważna dla technologii wspomagających, a w niektórych przypadkach dla wyszukiwarek. Kod HTML powinien służyć do określania struktury treści, a nie do definiowania jej wyglądu. CSS to kwestia wyglądu. Chociaż wiele elementów zmieniających wygląd treści, np. <h1>, <strong> i <em>, ma znaczenie semantyczne, ale wygląd może i zasadniczo się zmieniać w zależności od stylu autora.

<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>

Element, atrybuty i JavaScript

DOM to reprezentacja danych struktury i zawartości dokumentu HTML. W trakcie analizowania kodu HTML przeglądarka tworzy obiekt JavaScript dla każdego napotkanego elementu i sekcji tekstu. Obiekty te nazywamy węzłami, czyli węzłami elementów, a także węzłów tekstowych.

Każdy element HTML ma interfejs określający funkcje. Interfejs API HTML DOM zapewnia dostęp do każdego elementu HTML i kontrolę nad nim za pomocą interfejsu DOM. Zapewnia interfejsy do elementu HTML i wszystkich klas HTML, które z niego dziedziczą. Interfejs HTMLElement reprezentuje element HTML i wszystkie jego węzły podrzędne. Każdy inny element implementuje ją przez interfejs, który z niego dziedziczy. Każdy interfejs dziedziczący ma konstruktor, metody i właściwości. Dzięki dziedziczonym właściwościom HTMLElement masz dostęp do wszystkich atrybutów globalnych, a także do zdarzeń input, pointer, transition i animation. Za pomocą podtypów poszczególnych elementów, takich jak HTMLAnchorElement i HTMLImageElement, możesz uzyskać dostęp do wartości atrybutów i metod związanych z konkretnymi elementami.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o języku HTML