Dokumenty HTML zawierają deklarację typu dokumentu i element główny <html>. W elemencie <html> znajdują się nagłówek i treść dokumentu.
Sekcja head dokumentu nie jest widoczna poza kodem, ale jest niezbędna do działania witryny. Zawiera wszystkie metadane, w tym informacje dla wyszukiwarek i wyników w mediach społecznościowych, ikony karty przeglądarki i skrótu na ekranie głównym urządzenia mobilnego oraz informacje o zachowaniu i prezentacji treści. W tej sekcji dowiesz się, które komponenty, choć niewidoczne, występują na prawie każdej stronie internetowej.
Aby utworzyć witrynę MachineLearningWorkshop.com (MLW), zacznij od uwzględnienia komponentów, które powinny być niezbędne na każdej stronie internetowej: typu dokumentu, języka treści, zestawu znaków i oczywiście tytułu lub nazwy witryny lub aplikacji.
Dodawanie do każdego dokumentu HTML
Istnieje kilka elementów, które są niezbędne na każdej stronie internetowej. Jeśli tych elementów brakuje, przeglądarki renderują treść, ale warto je uwzględnić.
<!DOCTYPE html>
Pierwszym elementem każdego dokumentu HTML jest preambuła. W przypadku HTML wystarczy <!DOCTYPE html>. Wygląda to jak element HTML, ale w rzeczywistości jest to specjalny węzeł o nazwie doctype. Definicja doctype informuje przeglądarkę, że ma używać trybu standardowego.
Jeśli go pominiesz, przeglądarki użyją innego trybu renderowania, zwanego trybem osobliwości.
Dodanie definicji doctype pomaga zapobiegać trybowi osobliwości.
<html>
Element <html> jest elementem głównym dokumentu HTML. Jest to element nadrzędny tagów <head> i <body>, który zawiera wszystko w dokumencie HTML oprócz deklaracji doctype. Jeśli ten atrybut zostanie pominięty, język jest domyślny, ale warto go uwzględnić, aby zadeklarować język dokumentu.
Język treści
Atrybut lang w tagu <html> określa główny język dokumentu. Wartość to kod języka ISO, po którym może występować region.
Na przykład francuski w Kanadzie to fr-CA, a w Burkina Faso – fr-BF. Ta deklaracja pomaga czytnikom ekranu, wyszukiwarkom i usługom tłumaczeniowym określić język dokumentu.
Możesz użyć atrybutu lang w innych tagach, aby wskazać wyjątki od głównego języka dokumentu. Podobnie jak w sekcji head, atrybut lang w sekcji body nie ma efektu wizualnego. Dodaje semantykę, dzięki czemu technologie wspomagające i usługi zautomatyzowane mogą identyfikować język określonych treści.
Oprócz ustawiania języka dokumentu i wyjątków od tego języka podstawowego atrybutu można używać w selektorach CSS.
<span lang="fr-fr">Ceci n'est pas une pipe.</span> można kierować za pomocą selektorów atrybutów i języków [lang|="fr"] i :lang(fr).
<head>
Pomiędzy tagami otwierającym i zamykającym <html> znajdują się 2 elementy podrzędne: <head> i <body>:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
<head> zawiera metadane witryny lub aplikacji, a <body>
– widoczne treści. Pozostała część tej sekcji jest poświęcona komponentom zagnieżdżonym w elemencie <head>.
Wymagane komponenty w sekcji <head>
Metadane dokumentu, w tym tytuł dokumentu, zestaw znaków, ustawienia widocznego obszaru, opis, podstawowy adres URL, linki do arkuszy stylów i ikony, znajdują się w elemencie <head>. Nie musisz używać wszystkich tych funkcji, ale zawsze uwzględniaj ustawienia zestawu znaków, tytułu i obszaru wyświetlania.
Kodowanie znaków
Pierwszym elementem w <head> powinna być deklaracja kodowania znaków charset. Występuje przed tytułem, aby przeglądarka mogła renderować znaki w tytule i wszystkie znaki w pozostałej części dokumentu.
Domyślne kodowanie w większości przeglądarek to windows-1252, w zależności od ustawień regionalnych. Zalecamy jednak używanie kodowania UTF-8, które umożliwia kodowanie wszystkich znaków za pomocą 1–4 bajtów.
Aby ustawić kodowanie znaków na UTF-8, dodaj:
<meta charset="utf-8" />
Deklarując UTF-8 (bez rozróżniania wielkości liter), możesz nawet dodać do tytułu emoji.
Kodowanie znaków jest dziedziczone we wszystkich elementach dokumentu, nawet w przypadku elementów <style> i <script>. Ta mała deklaracja oznacza, że możesz umieszczać emotikony w nazwach klas i w selectorAPI. Jeśli używasz emoji, pamiętaj, aby robić to w sposób, który zwiększa użyteczność, ale nie utrudnia dostępu.
Tytuł dokumentu
Każda strona, w tym strona główna i wszystkie dodatkowe strony, powinna mieć unikalny tytuł.
Treść tytułu dokumentu, czyli tekst między tagami otwierającym i zamykającym <title>, jest wyświetlana na karcie przeglądarki, na liście otwartych okien, w historii, w wynikach wyszukiwania oraz, o ile nie zostanie ponownie zdefiniowana za pomocą tagów <meta>, na kartach mediów społecznościowych.
<title>Machine Learning Workshop</title>
Metadane widocznego obszaru
Metatag viewport jest niezbędny do zapewnienia responsywności witryny, ponieważ gwarantuje prawidłowe renderowanie treści niezależnie od szerokości widocznego obszaru. Chociaż metatag viewport istnieje od 2007 roku, dopiero niedawno został opisany w specyfikacji. Określa rozmiar i skalę widocznego obszaru, zapobiegając zmniejszaniu się treści w celu dopasowania do mniejszych ekranów.
<meta name="viewport" content="width=device-width" />
Powyższy kod oznacza „spraw, aby witryna była elastyczna, zaczynając od ustawienia szerokości treści na szerokość ekranu”. Oprócz width możesz ustawić powiększenie i skalowalność, ale domyślnie mają one wartości zapewniające dostępność. Jeśli chcesz podać konkretne informacje, uwzględnij:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
Viewport jest częścią audytu dostępności Lighthouse. Twoja witryna przejdzie weryfikację, jeśli będzie skalowalna i nie będzie miała ustawionego maksymalnego rozmiaru.
Do tej pory zarys naszego pliku HTML wygląda tak:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
</body>
</html>
Inne treści w usłudze <head>
Na <head> składa się wiele elementów. Wszystkie metadane.
Większość elementów, które znajdziesz w <head>, omówimy w tym module, ale więcej informacji znajdziesz w module Metadane.
Widzisz zestaw znaków meta i tytuł dokumentu, ale poza tagami <meta> jest jeszcze wiele innych metadanych, które należy uwzględnić.
CSS
W miejscu <head> umieść style dla kodu HTML. Jeśli chcesz dowiedzieć się więcej o stylach, możesz skorzystać ze ścieżki szkoleniowej poświęconej CSS. Musisz jednak wiedzieć, jak uwzględniać style w dokumentach HTML.
Istnieją 3 sposoby dodawania CSS: <link>, <style> i atrybut style.
Style w pliku HTML możesz uwzględnić na 2 główne sposoby: dodając zasób zewnętrzny za pomocą elementu <link> z atrybutem rel ustawionym na stylesheet lub dodając CSS bezpośrednio w sekcji head dokumentu w tagach otwierającym i zamykającym <style>.
Tag <link> jest preferowaną metodą wstawiania arkuszy stylów. Połączenie z jednym lub kilkoma zewnętrznymi arkuszami stylów jest korzystne zarówno dla programistów, jak i dla wydajności witryny: możesz utrzymywać CSS w jednym miejscu, zamiast rozpraszać go po całej witrynie, a przeglądarki mogą buforować plik zewnętrzny, co oznacza, że nie trzeba go ponownie pobierać przy każdej nawigacji po stronie.
Składnia to <link rel="stylesheet" href="styles.css">, gdzie styles.css to nazwa pliku i względna lokalizacja arkusza stylów. Możesz zobaczyć atrybut type="text/css", ale nie jest on wymagany. Atrybut rel określa relację, która w tym przypadku jest stylesheet. Jeśli pominiesz atrybut rel, Twoja usługa porównywania cen nie zostanie połączona.
Wkrótce poznasz kilka innych wartości rel, ale najpierw dowiesz się, jak jeszcze można uwzględniać CSS.
Jeśli chcesz, aby style z zewnętrznego arkusza stylów znajdowały się w warstwie kaskadowej, ale nie masz dostępu do edytowania pliku CSS, umieść kod CSS z @import w <style>:
<style>
@import "styles.css" layer(firstLayer);
</style>
Gdy używasz reguły @import do importowania arkuszy stylów do dokumentu, opcjonalnie do warstw kaskadowych, instrukcje @import muszą być pierwszymi instrukcjami w arkuszu stylów <style> lub w połączonym arkuszu stylów, poza deklaracją zestawu znaków.
Warstwy kaskadowe są stosunkowo nowym rozwiązaniem i możesz nie zauważyć @import w sekcji head <style>, ale często zobaczysz zadeklarowane właściwości niestandardowe w bloku stylu head:
<style>
:root {
--theme-color: #226DAA;
}
</style>
Style dodane za pomocą <link>, <style> lub obu tych elementów powinny znajdować się w sekcji head. Działają one, gdy są umieszczone w treści dokumentu, ale ze względu na wydajność warto dodawać style w sekcji head. Może się to wydawać sprzeczne z intuicją, ponieważ możesz chcieć, aby Twoje treści wczytywały się jako pierwsze. Lepiej jednak, aby przeglądarka wiedziała, jak renderować treść po jej załadowaniu. Dodanie stylów w pierwszej kolejności zapobiega niepotrzebnemu ponownemu rysowaniu, które występuje, gdy element jest stylizowany po pierwszym renderowaniu.
Istnieje jeden sposób na uwzględnienie w <head> dokumentu stylów, których nigdy nie użyjesz: style wbudowane. Prawdopodobnie nigdy nie użyjesz stylów wbudowanych w sekcji head, ponieważ arkusze stylów agentów użytkownika domyślnie ukrywają tę sekcję. Jeśli jednak chcesz utworzyć edytor CSS bez JavaScriptu, np. aby przetestować elementy niestandardowe strony, możesz wyświetlić sekcję head za pomocą display: block, a następnie ukryć wszystko w tej sekcji i za pomocą atrybutu wbudowanego style wyświetlić blok stylu z możliwością edycji treści.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
Do elementu <style> możesz dodać style wbudowane.
Inne zastosowania elementu <link>
Element link służy do tworzenia relacji między dokumentem HTML a zasobami zewnętrznymi. Niektóre z tych materiałów można pobrać, a inne mają charakter informacyjny. Rodzaj relacji jest określany przez wartość atrybutu rel. Dostępnych jest 25 wartości atrybutu rel, których można używać z tagami <link>, <a> i <area> lub <form>. Kilka z nich można stosować ze wszystkimi tagami. Informacje związane z metadanymi lepiej umieszczać w sekcji head, a informacje związane z wydajnością – w sekcji <body>.
W nagłówku znajdą się teraz 3 inne typy: icon, alternate i canonical. W następnym module dodasz czwarty typ, rel="manifest".
Favikona
Użyj tagu <link> z atrybutem rel="icon", aby określić favikonę dla dokumentu. Favikona to mała ikona, która pojawia się na karcie przeglądarki, zwykle po lewej stronie tytułu dokumentu. Gdy karty się zmniejszają, tytuł może zniknąć, ale ikona pozostaje widoczna. Większość ikon to logo firmy lub aplikacji.
Jeśli nie zadeklarujesz ikony, przeglądarka będzie szukać pliku o nazwie favicon.ico w katalogu najwyższego poziomu (folderze głównym witryny). Za pomocą parametru
<link> możesz użyć innej nazwy pliku i lokalizacji:
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
Powyższy kod oznacza „użyj mlwicon.png jako ikony w przypadku scenariuszy, w których sensowne jest użycie ikony o rozmiarze 16 pikseli, 32 pikseli lub 48 pikseli”. Atrybut rozmiary akceptuje wartość any w przypadku skalowalnych ikon lub rozdzieloną spacjami listę kwadratowych wartości widthXheight, gdzie wartości szerokości i wysokości wynoszą 16, 32, 48 lub więcej w tej sekwencji geometrycznej, jednostka pikseli jest pomijana, a X nie uwzględnia wielkości liter.
<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />
Istnieją 2 specjalne, niestandardowe rodzaje ikon dla przeglądarki Safari:apple-touch-icon na urządzenia z iOS i mask-icon dla przypiętych kart w macOS.
apple-touch-icon jest stosowany tylko wtedy, gdy użytkownik dodaje witrynę do ekranu głównego: możesz określić wiele ikon z różnymi wartościami atrybutu sizes dla różnych urządzeń.
mask-icon będzie używany tylko wtedy, gdy użytkownik przypnie kartę w Safari na komputerze: ikona powinna być monochromatycznym plikiem SVG, a atrybut color wypełnia ikonę wymaganym kolorem.
Chociaż możesz użyć <link>, aby zdefiniować zupełnie inny obraz na każdej stronie lub nawet przy każdym wczytaniu strony, nie rób tego. Aby zapewnić spójność i wygodę użytkownikom, używaj jednego obrazu. Google używa różnych ikon dla poszczególnych aplikacji, np. ikony poczty czy kalendarza. Wszystkie ikony Google mają jednak ten sam schemat kolorów. Dzięki ikonie możesz dokładnie sprawdzić zawartość otwartej karty.
Alternatywne wersje witryny
Użyj wartości alternate atrybutu rel, aby zidentyfikować tłumaczenia lub alternatywne reprezentacje witryny.
Załóżmy, że mamy wersje witryny przetłumaczone na język francuski i portugalski (brazylijski):
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
Jeśli w przypadku tłumaczenia używasz wartości alternate, musisz ustawić atrybut hreflang.
Wartość alternatywna nie służy tylko do tłumaczeń. Na przykład atrybut type może definiować alternatywny identyfikator URI kanału RSS, gdy atrybut type ma wartość application/rss+xml lub application/atom+xml.
Link do wersji witryny w formacie PDF:
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
Jeśli wartość rel to alternate stylesheet, określa ona alternatywny arkusz stylów, a atrybut title musi być ustawiony, aby nadać temu alternatywnemu stylowi nazwę.
Wersja kanoniczna
Jeśli utworzysz kilka tłumaczeń lub wersji warsztatów dotyczących uczenia maszynowego, wyszukiwarki mogą nie rozpoznać wiarygodnego źródła. Użyj elementu rel="canonical", aby wskazać preferowany adres URL witryny lub aplikacji.
Umieść kanoniczny adres URL na wszystkich przetłumaczonych stronach i na stronie głównej, wskazując preferowany adres URL:
<link rel="canonical" href="https://www.machinelearning.com" />
rel="canonical" Link kanoniczny jest najczęściej używany do publikowania treści w wielu miejscach, np. w publikacjach i na platformach blogowych, aby podać źródło oryginalne. Gdy witryna rozpowszechnia treści, powinna zawierać link kanoniczny do oryginalnego źródła.
Skrypty
Tag <script> zawiera skrypty. Domyślny typ to JavaScript. Jeśli używasz innego języka skryptowego, dołącz atrybut type z typem MIME lub type="module" w przypadku modułu JavaScript.
Analizowane i wykonywane są tylko moduły JavaScript i JavaScript.
Tagi <script> mogą służyć do umieszczania kodu w kontenerze lub pobierania pliku zewnętrznego. W MLW nie ma zewnętrznego pliku skryptu, ponieważ wbrew powszechnemu przekonaniu do działania witryny nie jest potrzebny JavaScript. To jest ścieżka szkoleniowa dotycząca HTML-a, a nie JavaScriptu.
Później dodasz niewielki fragment kodu JavaScript, aby utworzyć easter egg:
<script>
document.getElementById('switch').addEventListener('click', function() {
document.body.classList.toggle('black');
});
</script>
Ten fragment kodu tworzy procedurę obsługi zdarzeń dla elementu o identyfikatorze switch.
W JavaScript unikaj odwoływania się do elementu, zanim on powstanie. Ponieważ element switch jeszcze nie istnieje, nie uwzględnimy jeszcze modułu obsługi zdarzeń.
Gdy dodamy element włącznika światła, umieścimy atrybut <script> u dołu elementu <body>, a nie w elemencie <head>. Dlaczego? Z 2 powodów. Chcemy mieć pewność, że elementy istnieją, zanim skrypt odwołujący się do nich zostanie napotkany, ponieważ nie opieramy tego skryptu na zdarzeniu DOMContentLoaded.
JavaScript nie tylko blokuje renderowanie, ale też powoduje, że przeglądarka przestaje pobierać wszystkie zasoby, gdy skrypty są pobierane, i nie wznawia pobierania innych zasobów, dopóki JavaScript nie zakończy wykonywania. Z tego powodu żądania JavaScript często znajdują się na końcu dokumentu, a nie w sekcji head.
Istnieją 2 atrybuty, które mogą zmniejszyć blokujący charakter pobierania i wykonywania JavaScriptu: defer i async. W przypadku defer renderowanie HTML nie jest blokowane podczas pobierania, a JavaScript jest wykonywany dopiero po zakończeniu renderowania dokumentu. W przypadku async renderowanie nie jest blokowane podczas pobierania, ale po zakończeniu pobierania skryptu renderowanie jest wstrzymywane na czas wykonywania JavaScriptu.
async. Uwaga: skrypty modułów wczytywane za pomocą <script type="module"> mają domyślnie włączoną funkcję defer.
Aby umieścić kod JavaScript MLW w pliku zewnętrznym, możesz napisać:
<script src="js/switch.js" defer></script>
Dodanie atrybutu defer
odkłada wykonanie skryptu do momentu, gdy wszystko zostanie wyrenderowane,
co zapobiega pogorszeniu wydajności przez skrypt. Atrybuty async i defer są prawidłowe tylko w przypadku skryptów zewnętrznych.
Podstawa
Jest jeszcze jeden element, który występuje tylko w <head>.. Rzadko używany element <base> umożliwia ustawienie domyślnego adresu URL linku i miejsca docelowego. Atrybut href określa podstawowy adres URL dla wszystkich linków względnych.
Atrybut target, który jest prawidłowy w przypadku elementu <base>, a także linków i formularzy, określa, gdzie mają się otwierać te linki. Domyślnie _self otwiera połączone pliki w tym samym kontekście co bieżący dokument. Inne opcje to _blank, która otwiera każdy link w nowym oknie, _parent bieżącej treści, która może być taka sama jak self, jeśli otwierający nie jest elementem iframe, lub _top, która znajduje się na tej samej karcie przeglądarki, ale jest wyodrębniona z kontekstu, aby zajmować całą kartę.
Większość deweloperów dodaje atrybut target do niewielkiej liczby linków (jeśli w ogóle), które mają się otwierać w nowym oknie, lub do samych formularzy, zamiast używać atrybutu <base>.
<base target="_top" href="https://machinelearningworkshop.com" />
Jeśli nasza witryna znajduje się w ramce iframe w witrynie takiej jak Yummly, umieszczenie elementu <base> spowoduje, że gdy użytkownik kliknie dowolny link w naszym dokumencie, link zostanie wczytany poza ramką iframe i zajmie całe okno przeglądarki.
Jedną z wad tego elementu jest to, że linki do kotwic są rozwiązywane za pomocą elementu
<base>. Znak <base> skutecznie przekształca link <a href="#ref"> w <a target="_top" href="https://machinelearningworkshop.com#ref">, co powoduje wysłanie żądania HTTP do podstawowego adresu URL z dołączonym fragmentem.
Kilka innych informacji o <base>:
- W dokumencie może być tylko jeden element
<base>. - Powinien on występować przed użyciem jakichkolwiek względnych adresów URL, w tym możliwych odwołań do skryptów lub arkuszy stylów.
Kod wygląda teraz tak:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
Komentarze HTML
Skrypt jest ujęty w nawiasy ostre, myślniki i wykrzyknik, czyli w sposób, w jaki komentuje się kod HTML. Wszystko, co znajduje się między <!-- a -->, nie jest widoczne ani parsowane. Komentarze HTML możesz umieszczać w dowolnym miejscu na stronie, z wyjątkiem bloków skryptów lub stylów, w których należy używać komentarzy JavaScript i CSS.
Znasz już podstawy tego, co znajduje się w <head>, ale chcesz dowiedzieć się więcej. W następnych sekcjach dowiesz się więcej o metatagach i o tym, jak kontrolować, co się wyświetla, gdy Twoja witryna jest połączona z mediami społecznościowymi.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o strukturze dokumentu.
Jak rozpoznajesz język dokumentu?
language do tagu HTML.lang do tagu HTML.Add the <lang> do <head>.Wybierz elementy, które można uwzględnić w <head>.
<p><title><meta>