Podstawowe informacje o tekście

Podobnie jak edytor tekstu zapewnia nagłówki od <h1> do <h6> oraz zapewnia wiele sposobów formatowania sekcji tekstu w zrozumiały i wizualny sposób. HTML oferuje bardzo podobny zestaw elementów semantycznych i niesemantycznych do interpretowania prozy.

W tej sekcji opisano główne sposoby zaznaczania tekstu i jego podstawy. Potem omówimy atrybuty, a następnie omówimy dodatkowe sposoby oznaczania tekstu, takie jak listy, tabele i formularze.

Nagłówki, przegląd

Sekcja ma 6 elementów nagłówka: <h1>, <h2>, <h3>, <h4>, <h5> i <h6>, przy czym <h1> jest najważniejszy, a najmniej <h6>. Przez wiele lat programiści informowali programistów, że przeglądarki używały nagłówków do tworzenia konspektów dokumentów. Pierwotnie taki był cel, ale przeglądarki nie wdrożyły jeszcze funkcji opisujących funkcje. Jednak użytkownicy czytników ekranu korzystają z nagłówków do uzyskiwania informacji o treści strony, poruszając się po nagłówkach za pomocą klawisza h. Warto więc zadbać o to, aby poziomy nagłówków były wdrożone w taki sam sposób jak zarys dokumentu. To ułatwi dostęp do treści.

Domyślnie przeglądarki mają styl <h1> największy, <h2> – nieco mniejszy, a każdy kolejny poziom nagłówka jest domyślnie zmniejszany. Co ciekawe, przeglądarki domyślnie zmniejszają też rozmiar czcionki <h1> w zależności od liczby elementów <article>, <aside>, <nav> lub <section>, w których jest on zagnieżdżony.

Niektóre arkusze stylów klienta użytkownika zawierają selektory (lub podobne) służące do określania stylu zagnieżdżonych elementów <h1> w taki sposób, jakby były one mniej ważne:

h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

Jednak model obiektu ułatwień dostępu (AOM) nadal prawidłowo zgłasza poziom elementu – w tym przypadku „nagłówek, poziom 1”. Pamiętaj, że przeglądarka nie robi tego w przypadku innych poziomów nagłówków. Nie stosuj jednak stylów przeglądarki na podstawie nagłówka. Mimo że przeglądarki nie obsługują obrysowywania, udawaj, że tak są. Oznaczaj nagłówki treści tak, jakby robiły to za pomocą funkcji. Dzięki temu treść będzie zrozumiała dla wyszukiwarek, czytników ekranu i przyszłych pracowników.

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

Sekcja #about ma 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ć tę rolę w rolę region, która jest punktem orientacyjnym, możesz użyć 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>

Punkty orientacyjne twórz tylko wtedy, gdy są potrzebne. Zbyt duża liczba punktów orientacyjnych może być szybko dezorientująca dla użytkowników czytników ekranu.

Cytaty i cytaty

Oznaczając artykuł lub post na blogu, warto umieścić cytat lub cytat z widocznym cytatem lub bez niego. Istnieją elementy przypisane do tych 3 komponentów: <blockquote>, <q> i <cite> w przypadku widocznego cytowania, a atrybut cite, aby dostarczyć więcej informacji na potrzeby wyszukiwania.

Sekcja #feedback zawiera nagłówek i 3 recenzje. Są to cytaty blokowe, z których część zawiera cytaty, po których następuje akapit z cytatem. Aby zaoszczędzić miejsce, pominiesz 3 opinię. Aby zaoszczędzić miejsce, znaczniki są takie:

Informacje o autorze cytatu nie są częścią cytatu, więc nie występują w nim <blockquote>, lecz występują po zacytowaniu. Choć są to cytaty w łatwym sensie, w rzeczywistości nie cytują konkretnego zasobu, więc są ujęte w element <p> akapitu.

Cytat jest podzielony na 3 wiersze obejmujące imię i nazwisko autora, poprzednią rolę i aspirację zawodową. Podział wiersza <br> tworzy podział wiersza w bloku tekstu. Może być używany w adresach fizycznych, w poezji i w blokach podpisów. Podziałów wierszy nie należy używać do przechodzenia między poszczególnymi akapitami. Zamiast tego zamknij poprzedni akapit i otwórz nowy. Stosowanie akapitów na akapity nie tylko ułatwia ułatwienie dostępu, ale też ułatwia określenie stylu. Element <br> jest po prostu podziałem wiersza, na który ma wpływ bardzo mało właściwości CSS.

Informacje o cytacie podajemy w akapicie po każdym cytatie blokowym. Wcześniejsze cytaty są w ten sposób zakodowane, ponieważ nie pochodzą ze źródeł zewnętrznych. Jeśli tak, to należy podać źródło.

Jeśli opinia pochodzi z witryny z opiniami, książki lub innego dzieła, element <cite> może być używany jako tytuł źródła. <cite> może zawierać tytuł książki, tytuł strony internetowej lub programu telewizyjnego, a nawet nazwę programu komputerowego. Opcji <cite> można używać niezależnie od tego, czy źródło jest wymieniane podczas przekazywania, czy też jest cytowane lub przywoływane. Treść <cite> należy do utworu, a nie jego autora.

Gdyby cytat z Blendan Smooth został pobrany z jej czasopisma offline, blokowałby się w ten sposób:

Element cytatu <cite> nie ma roli pośredniej i powinien pobierać dostępną nazwę z treści. Nie używaj właściwości aria-label.

Aby podać informacje o sytuacji, gdy nie możesz wyświetlić treści, użyj atrybutu cite, który jako swoją wartość przyjmuje adres URL dokumentu źródłowego lub wiadomości wyświetlanej w cytowanych informacjach. Ten atrybut działa zarówno w przypadku <q>, jak i <blockquote>. Jest to adres URL, ale jest czytelny dla komputera, ale niewidoczny dla czytnika:

Chociaż tag zamykający </p> jest opcjonalny (i zawsze zalecany), tag zamykający </blockquote> jest zawsze wymagany.

Większość przeglądarek dodaje dopełnienie zarówno do kierunków w tekście <blockquote>, jak i do treści <cite> kursywą. Można to kontrolować za pomocą CSS. Pole <blockquote> nie zawiera cudzysłowów, ale można je dodawać za pomocą treści generowanych przez CSS. Element <q> domyślnie dodaje cudzysłowy, używając cudzysłowów odpowiednich dla języka.

W sekcji #teachers treść HAL jest cytowana jako: „Przepraszamy , ale nie mogę tego zrobić, ”. Kod w języku angielskim i francuskim to:

Element cudzysłowu <q> dodaje cudzysłowy dostosowane do języka. Domyślne style klienta użytkownika obejmują treść wygenerowaną z otwartym i zamkniętym cudzysłowem:

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

Dołącza się atrybut lang, który informuje 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 elementy sterujące, takie jak Siri, Alexa i VoiceOver, mogą używać wymowy francuskiej. Informuje także przeglądarkę o typie cudzysłowu do renderowania.

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

Encje HTML

Być może wiesz już, że występuje sekwencja zmiany znaczenia lub element „entity”. Parametr < jest używany w kodzie HTML, więc musisz zmienić jego znaczenie, używając parametru < lub mniej łatwego do zapamiętania kodowania <. W kodzie HTML są 4 zarezerwowane elementy: <, >, & i ". Odwołania do znaków to odpowiednio <, >, & i ".

Kilka innych elementów, z których często korzystasz, to © w przypadku praw autorskich (©), ™ dla znaku towarowego (TM) i   w przypadku odstępu nierozdzielającego. Spacje niełamiące są przydatne, gdy chcesz wstawić spację między 2 znakami lub słowami, a jednocześnie zapobiec podziałowi wiersza. Istnieje ponad 2000 odwołań do nazwanych znaków. W razie potrzeby każdy znak, w tym emotikony, ma zakodowany odpowiednik zaczynający się od &#.

W recenzji warsztatów ToastyMcToastface (nieuwzględnionej w przykładzie powyżej) znajdziesz kilka nietypowych znaków tekstowych:

<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 cytatie blokowym może zostać zapisane w ten sposób:

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

W tym bałaganie jest kilka znaków bez zmiany znaczenia i kilka nazwanych odwołań do znaków. Zestaw znaków to kod UTF-8, więc kilka ostatnich znaków w cudzysłowie blokowym nie wymaga zmiany znaczenia, jak w tym przykładzie. Tylko znaki nieobsługiwane przez zestaw znaków muszą zawierać znaki zmiany znaczenia. W razie potrzeby możesz skorzystać z wielu narzędzi do zmiany znaczenia różnych znaków. Możesz też po prostu uwzględnić zmienną <meta charset="UTF-8"> w elemencie <head>.

Nawet w przypadku wybrania zestawu znaków w formacie UTF-8, gdy chcesz wydrukować ten znak na ekranie, musisz zmienić znaczenie znaku <. Ogólnie nie musisz dodawać nazwanych odwołań do znaków >, " ani &. Jeśli jednak chcesz napisać samouczek na temat encji HTML, musisz napisać kod <, ucząc kogoś, jak kodować instrukcję <. 😀

Ten emotikon z emotikonem to 😀, ale ten dokument jest zadeklarowany jako UTF-8, więc nie ma znaków zmiany znaczenia.

Sprawdź swoją wiedzę

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