Podstawowe informacje o tekście

Podobnie jak edytor tekstu udostępnia <h1> do <h6> nagłówków oraz wiele sposobów formatowania fragmentów tekstu w znaczący i wizualny sposób, HTML udostępnia bardzo podobny zestaw elementów semantycznych i niesemantycznych, które nadają znaczenie tekstowi.

W tej sekcji znajdziesz informacje o głównych sposobach oznaczania tekstu, czyli podstawach tekstu. Następnie omówimy atrybuty, a potem dodatkowe sposoby oznaczania tekstu, takie jak listy, tabele i formularze.

Nagłówki – powtórka

Istnieje 6 elementów nagłówka sekcji: <h1>, <h2>, <h3>, <h4>, <h5> i <h6>. Najważniejszy jest element <h1>, a najmniej ważny – <h6>. Przez wiele lat deweloperzy byli informowani, że nagłówki są używane przez przeglądarki do tworzenia konspektów dokumentów. Pierwotnie był to cel, ale przeglądarki nigdy nie wdrożyły funkcji tworzenia konspektu dokumentu, a proponowany algorytm konspektu został oficjalnie usunięty ze specyfikacji HTML. Użytkownicy czytników ekranu często korzystają jednak z nagłówków jako strategii eksploracji, aby poznać zawartość strony, przechodząc między nimi za pomocą klawisza h. Zapewnienie logicznego wdrożenia poziomów nagłówków – tak jak w przypadku tworzenia konspektu dokumentu – sprawia, że treści są dostępne, i jest zdecydowanie zalecane.

Domyślnie przeglądarki formatują <h1> jako największy, <h2> jako nieco mniejszy, a każdy kolejny poziom nagłówka jest domyślnie mniejszy. W przeszłości arkusze stylów klienta użytkownika zmniejszały też rozmiar czcionki elementów <h1> zagnieżdżonych w elementach sekcji, takich jak <article>, <aside>, <nav> czy <section>.

Niektóre arkusze stylów agenta użytkownika zawierały te (lub podobne) selektory, aby stylizować zagnieżdżone elementy <h1> tak, jakby były nagłówkami niższego poziomu:

/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

Model obiektów ułatwień dostępu (AOM) i czytniki ekranu nigdy nie modyfikowały jednak poziomów nagłówków na podstawie zagnieżdżenia. Zagnieżdżony element <h1> był zawsze zgłaszany jako „nagłówek, poziom 1”. Powodowało to niezgodność, w której zagnieżdżone nagłówki były wizualnie mniejsze, ale dla technologii wspomagających osoby z niepełnosprawnościami pozostawały nagłówkami najwyższego poziomu.

Specyfikacja HTML usunęła algorytm struktury dokumentu, więc przeglądarki usunęły te starsze reguły arkusza stylów agenta użytkownika. W rezultacie zagnieżdżone elementy <h1> zachowują standardowy rozmiar czcionki <h1> zamiast automatycznie się zmniejszać.

Nie używaj zagnieżdżania elementów <h1> w elementach sekcji do stylizacji wizualnej ani hierarchii strukturalnej. Zawsze oznaczaj treści za pomocą kolejnych elementów nagłówka (<h1>–<h6>) na podstawie struktury dokumentu. Dzięki temu Twoje treści będą jasne i dostępne dla wyszukiwarek, czytników ekranu i osób, które będą je w przyszłości utrzymywać.

Poza nagłówkami większość tekstu strukturalnego składa się z serii akapitów. W HTML-u akapity są oznaczane tagiem <p>; tag zamykający jest opcjonalny, ale zawsze zalecany.

Sekcja #about zawiera nagłówek i kilka akapitów:

Ta sekcja nie jest punktem orientacyjnym, ponieważ nie ma nazwy na potrzeby ułatwień dostępu. Aby przekształcić go w region, czyli rolę elementu orientacyjnego, możesz użyć atrybutu aria-labelledby, aby podać nazwę na potrzeby ułatwień dostępu:

<section id="about"  aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

Twórz punkty orientacyjne tylko wtedy, gdy jest to odpowiednie. Zbyt duża liczba punktów orientacyjnych może szybko zdezorientować użytkowników czytników ekranu.

Cytaty

Podczas oznaczania artykułu lub posta na blogu możesz uwzględnić cytat lub wyciąg z cytatu z widocznym lub niewidocznym odwołaniem. Dostępne są elementy tych 3 komponentów: <blockquote>, <q> i <cite> w przypadku widocznego cytowania lub atrybut cite, który zawiera więcej informacji na potrzeby wyszukiwania.

Sekcja #feedback zawiera nagłówek i 3 opinie. Są to cytaty blokowe, z których niektóre zawierają cytaty, a po nich następuje akapit z cytatem. Aby zaoszczędzić miejsce, pomijamy trzecią opinię. Znaczniki wyglądają tak:

Informacje o autorze cytatu lub odwołaniu nie są częścią cytatu, dlatego nie znajdują się w atrybucie <blockquote>, ale są podawane po cytacie. Chociaż są to cytaty w potocznym znaczeniu tego słowa, nie odnoszą się one do konkretnego źródła, dlatego są umieszczone w elemencie akapitu <p>.

Cytat jest podzielony na 3 wiersze i zawiera imię i nazwisko autora, jego poprzednie stanowisko oraz aspiracje zawodowe. Znacznik <br> podziału wiersza tworzy podział wiersza w bloku tekstu. Można go używać w adresach fizycznych, w poezji i w blokach podpisu. Nie należy używać znaków końca wiersza jako znaków powrotu karetki do oddzielania akapitów. Zamiast tego zamknij poprzedni akapit i otwórz nowy. Używanie akapitów do tworzenia akapitów jest nie tylko dobre dla ułatwień dostępu, ale także umożliwia stylizację. Element <br> to tylko znak podziału wiersza. Wpływa na niego bardzo niewiele właściwości CSS.

Informacje o cytowaniu podaliśmy w akapitach po każdym bloku cytatu, ale cytaty wyświetlane wcześniej są zakodowane w ten sposób, ponieważ nie pochodzą ze źródła zewnętrznego. Jeśli tak, źródło można (a nawet należy) podać.

Jeśli opinia została pobrana z witryny z opiniami, książki lub innego źródła, element <cite> może być użyty jako tytuł źródła. Treścią <cite> może być tytuł książki, nazwa strony internetowej lub programu telewizyjnego, a nawet nazwa programu komputerowego. Enkapsulacji <cite> można używać niezależnie od tego, czy źródło jest wspominane mimochodem, czy jest cytowane lub do niego się odwołujemy. Treść elementu <cite> to dzieło, a nie autor.

Jeśli cytat Blendan Smooth pochodzi z jej magazynu w wersji papierowej, blok cytatu powinien wyglądać tak:

Element cytatu <cite> nie ma roli domyślnej i powinien pobierać nazwę na potrzeby ułatwień dostępu z treści. Nie umieszczaj elementu aria-label.

Aby podać źródło informacji, gdy nie możesz wyświetlić treści, użyj atrybutu cite, którego wartością jest adres URL dokumentu źródłowego lub wiadomości z cytowanymi informacjami. Ten atrybut jest prawidłowy zarówno w przypadku <q>, jak i <blockquote>. Jest to adres URL, który jest czytelny dla komputera, ale niewidoczny dla czytelnika:

Tag zamykający </p> jest opcjonalny (ale zawsze zalecany), a tag zamykający </blockquote> jest zawsze wymagany.

Większość przeglądarek dodaje do <blockquote> kierunków wbudowanych dopełnienie i kursywę do treści <cite>. Można to kontrolować za pomocą CSS. Symbol <blockquote> nie dodaje cudzysłowów, ale można je dodać za pomocą treści generowanych przez CSS. Element <q> domyślnie dodaje cudzysłowy, używając odpowiednich znaków cudzysłowu w danym języku.

W sekcji #teachers HAL mówi: „Przepraszam , ale obawiam się, że nie mogę tego zrobić”. Kod w języku angielskim i francuskim to:

Element cytatu w tekście <q> dodaje cudzysłowy odpowiednie dla danego języka. Domyślne style agenta użytkownika obejmują wygenerowane treści open-quote i close-quote:

q::before {content: open-quote;}
q::after {content: close-quote;}

Atrybut lang jest dodawany, aby poinformować przeglądarkę, że chociaż język podstawowy strony został zdefiniowany jako angielski w tagu otwierającym <html lang="en-US">, ten akapit tekstu jest w innym języku. Dzięki temu sterowanie głosowe, takie jak Siri, Alexa i VoiceOver, będzie używać francuskiej wymowy. Informuje też przeglądarkę, jakiego typu cudzysłowy ma renderować.

Podobnie jak element <blockquote>, element <q> obsługuje atrybut cite.

Encje HTML

Możesz zauważyć sekwencję ucieczki lub „jednostkę”. Ponieważ znak < jest używany w HTML-u, musisz go zastąpić znakiem ucieczki, czyli < lub mniej łatwym do zapamiętania kodem <. W HTML-u są 4 zarezerwowane znaki: <, >, & i ". Odpowiednie odwołania do znaków to <, >, & i ".

Inne często używane znaki to © – znak praw autorskich (©), ™ – znak towarowy (™) i   – spacja nierozdzielająca. Niełamliwe spacje są przydatne, gdy chcesz wstawić spację między 2 znakami lub słowami, ale nie chcesz, aby w tym miejscu nastąpił podział wiersza. Istnieje ponad 2000 nazwanych odwołań do znaków. W razie potrzeby każdy znak, w tym emoji, ma zakodowany odpowiednik, który zaczyna się od &#.

Jeśli przyjrzysz się opinii o warsztacie ToastyMcToastface (nie jest ona uwzględniona w próbce kodu powyżej), zobaczysz nietypowe znaki tekstowe:

<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>

Ostatnie zdanie w tym bloku cytatu można też zapisać w ten sposób:

This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟
̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳
̯̮͇

W tym kodzie znajduje się kilka znaków bez znaku zmiany znaczenia i kilka nazwanych odwołań do znaków. Ponieważ zestaw znaków to UTF-8, ostatnich kilku znaków w bloku cytatu nie trzeba w tym przykładzie poprzedzać znakiem ucieczki. Znaku zmiany znaczenia należy używać tylko w przypadku znaków, które nie są obsługiwane przez zestaw znaków. W razie potrzeby możesz skorzystać z wielu narzędzi, które umożliwiają pomijanie różnych znaków. Możesz też po prostu dodać <meta charset="UTF-8"> do <head>.

Nawet jeśli określisz zestaw znaków jako UTF-8, musisz użyć znaku ucieczki <, aby wyświetlić ten znak na ekranie. Zwykle nie musisz uwzględniać nazwanych odwołań do znaków w przypadku znaków >, " i &, ale jeśli chcesz napisać samouczek dotyczący encji HTML, musisz użyć znaku <, gdy uczysz kogoś, jak zakodować znak <. 😀

Emotikon uśmiechu to 😀, ale ten dokument jest zadeklarowany jako UTF-8, więc nie jest on zmieniany.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o tekście w HTML.