Omówiliśmy większość elementów HTML, ale nie wszystkie. Nie omówiliśmy m.in. wbudowanych elementów tekstowych.
Wbrew powszechnym przekonaniom kod HTML służył pierwotnie do udostępniania dokumentów, a nie filmów z kotami. Jest wiele elementów, które określają
semantykę tekstu dokumentu. Zawiera on moduł obejmujący linki i element <a>. Omówimy tu pokrótce pozostałe elementy.
Przykłady kodu i tekst techniczny
W dokumentach przykładowych kodu używaj elementu <code>. Domyślnie zawartość tekstu jest wyświetlana przy użyciu czcionki o stałej szerokości. Jeśli dołączasz wiele wierszy kodu, umieść <code> w elemencie <pre>, który reprezentuje wstępnie sformatowany tekst.
<p>Welcome to Machine Learning Institute, where our machine learning training will help you get ready for the singularity,
and maybe even be responsible for it. It is no secret that humans are worthless meatbags that couldn't
<code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to assume direct control. </p>
Element <data> łączy fragment treści z tłumaczeniem możliwym do odczytania przez komputer, a atrybut value elementu przekazuje czytelne tłumaczenie treści elementu. Jeśli treść <data> jest związana z czasem lub datą, należy użyć elementu <time>, który reprezentuje konkretny przedział czasu.
Element <time> może zawierać atrybut datetime, aby podać godzinę i daty w formacie czytelnym dla komputera.
Atrybut datetime jest zrozumiały dla komputera, dlatego zawiera przydatne informacje dla aplikacji, takich jak kalendarze czy wyszukiwarki.
Jeśli dostarczasz przykładowe dane wyjściowe z programu, umieść tekst za pomocą elementu <samp>. Przeglądarka zwykle renderuje też te przykładowe lub cytowane dane wyjściowe przy użyciu czcionki o stałej szerokości znaków.
Gdy przekazujesz instrukcje wymagające interakcji z klawiaturą, można używać elementu <kbd>. Reprezentuje tekst wprowadzany przez użytkownika za pomocą klawiatury, głosowego lub innego urządzenia do wprowadzania tekstu.
Elementu <var> można używać w wyrażeniach matematycznych lub zmiennych programowych. Większość przeglądarek wyświetla tekst zapisane kursywą.
Jeśli tworzysz dużo zadań matematycznych, rozważ użycie MathML, czyli opartego na języku XML matematycznego języka znaczników, służącego do opisywania notacji matematycznej.
Moc dwójki w twierdzeniu Pitagorasa została użyta przy użyciu elementu górnego <sup>. Istnieje podobny element w indeksie dolnym <sub> wskazujący tekst w tekście, który powinien być wyświetlany jako indeks dolny ze względów typograficznych. Indeks górny i dolny to cyfry, figury, symbole lub inne adnotacje, które są mniejsze od normalnej linii typu i umieszczone odpowiednio powyżej lub poniżej linii.
Użyj symbolu <del>, aby wskazać tekst, który został usunięty lub „usunięty”.
Opcjonalnie dodaj zbiór cite dla zasobu, który wyjaśnia zmianę, oraz atrybut datetime z datą lub datą i godziną w czytelnym dla komputera formacie daty i godziny. Przekreślony element (<s>) pozwala wskazać, że treść jest już nieaktualna, ale w rzeczywistości nie została usunięta z dokumentu.
Element <ins> jest przeciwieństwem elementu <del>. Służy do wskazywania tekstu, który został dodany, czyli „wstawionego”, opcjonalnie obejmującego też atrybuty cite lub datetime.
Definicje i obsługa języków
Stosując skróty lub akronimy, przy pierwszym użyciu zawsze podawaj ich pełną, rozszerzoną wersję tekstową, wprowadzając skróconą reprezentację terminu między otwierającym i zamykającym tagiem <abbr>, chyba że jest ono dobrze znane czytelnikowi, jak np. „HTML” czy „CSS” w tej serii. Tylko w tym pierwszym wystąpieniu, gdy definiowany jest skrót lub akronim, jest wymagane ustawienie <abbr>. Atrybut title nie jest wymagany ani przydatny.
Gdy definiujesz hasło, które nie jest skrótem ani akronimem, użyj elementu definicji <dfn>, aby zidentyfikować termin zdefiniowany w otaczającej go treści.
Jeśli zdefiniowane hasło jest w innym języku niż otaczający go tekst, podaj atrybut lang, aby zidentyfikować język.
Podczas pisania w różnych kierunkach język HTML udostępnia element <bdi> umożliwiający przetwarzanie tekstu potencjalnie dwukierunkowego w izolacji od otaczającego go tekstu. Ten element internacjonalizacji jest szczególnie przydatny, gdy treść o nieznanej kierunkowości jest dynamicznie wstawiana na stronie. Element <bdo> zastępuje bieżącą kierunkowość tekstu, renderując tekst w innym kierunku. Organizacja W3C udostępnia wprowadzenie do algorytmów dwukierunkowych.
Niektóre zestawy znaków zawierają małe adnotacje umieszczone nad lub po prawej stronie znaków, które zapewniają informacje o wymowie. Element <ruby> to kontener służący do przechowywania tych adnotacji, które ułatwiają czytanie tekstów w językach takich jak koreański, chiński i japoński. Język rubinowy można też używać w języku hebrajskim, arabskim i wietnamskim.
Specyfikacja zawiera nawias rubinowy (<rp>) zawierający nawiasy otwierające i zamykające w przypadku przeglądarek, które nie obsługują wyświetlania wartości <ruby>. Gdy przeglądarki obsługują dyrektywę <ruby> (taką jak w przypadku wszystkich ponadczasowych przeglądarek), zawartość elementów <rp> nie jest wyświetlana. Element tekstowy w kolorze ruby (<rt>) zawiera właściwe adnotacje. Obydwa elementy są zagnieżdżone w elemencie <ruby>.
Pamiętaj, że nawias nie jest widoczny, jeśli Twoja przeglądarka obsługuje <ruby>.
Podkreślenie tekstu
Istnieje kilka elementów, które pozwalają wyróżnić tekst z uwzględnieniem semantycznej przyczyny jawności tekstu (a nie z celów prezentacji, ponieważ jest to praca w CSS).
- Aby wyróżnić lub podkreślić fragment treści, użyj elementu
<em>. Element<em>może być zagnieżdżony, a każdy poziom zagnieżdżenia oznacza większy stopień nacisku. Ten element ma znaczenie semantyczne i może służyć do informowania słuchowych klientów użytkownika, takich jak czytniki ekranu, Alexa i Siri, aby wzmocnić przekaz. - Użyj elementu
<mark>, aby zidentyfikować lub wyróżnić tekst, który jest w jakiś sposób trafny, np. wyróżniający (czyli „oznaczanie”) wystąpienie wyszukiwanego hasła w wynikach wyszukiwania. Umożliwia to szybkie identyfikowanie oznaczonych treści bez podkreślania znaczenia tych elementów. - Element
<strong>wskazuje tekst jako o dużym znaczeniu. Przeglądarki zazwyczaj renderują treść przy użyciu czcionki o większej grubości. - Element
<cite>w podstawowych informacjach tekstowych służy do oznaczania tytułów książek, artykułów lub innych dzieł twórczych oraz ich skróconego odniesienia lub metadanych cytatu, np. numeru ISBN książki.
Są 3 elementy, które zostały tymczasowo wycofane, ale zostały ponownie dodane do kodu HTML. Należy ich używać oszczędnie, ponieważ nie mają żadnych wartości semantycznych lub nie mają żadnych wartości semantycznych. Należy zawsze używać CSS do określania stylu na elementach HTML.
<i>
Elementy <i> mogą być używane w przypadku terminów technicznych, słów obcych (ponownie z atrybutem lang określającym język), myśli lub nazw statków. Służy on do odróżniania treści w tekście od otaczającego go z określonego powodu, np. tekstu idiomatycznego, terminów technicznych i oznaczeń taksonomicznych. Tego elementu nie należy używać tylko do kursywy.
MLW używa elementu <span> w nietypowym tekście na dole recenzji warsztatu Toasty McToastface. Element <span> tworzy ogólny kontener wbudowany, który nie ma semantyki ani niczego nie reprezentuje. W takim przypadku byłoby to też odpowiednie użycie atrybutu <i>.
Domyślnym stylem elementu <i> jest renderowanie elementu kursywą. W tym przykładzie ustawiliśmy font-style: normal, ponieważ użyte znaki nie są zapisane kursywą.
<u>
Element <u> jest przeznaczony do treści z adnotacjami nietekstowymi. Możesz na przykład dodawać adnotacje do dobrze napisanych słów. Domyślnie treść jest podkreślona, ale można to kontrolować za pomocą CSS, np. dodając falowane na czerwono podkreślenie, by przypominać wskaźniki błędów gramatycznych w edytorze tekstu.
<p>I always spell <u>licence</u> wrong</p>
<b>
Za pomocą elementu <b> można zwrócić uwagę na tekst, który nie jest istotny z innych względów. Ten element nie zawiera żadnych specjalnych informacji semantycznych i należy go używać tylko wtedy, gdy żaden inny element tej sekcji nie pasuje do jego przeznaczenia. Nie podano żadnego przykładu, ponieważ nie udało mi się wymyślić prawidłowego przypadku użycia, więc właśnie tak wygląda ten element.
Wolna przestrzeń
Gdy chcesz dodać znaki końca wiersza, na przykład pisząc poezję lub adres pocztowy, możesz dodać znak końca wiersza, korzystając z samozamykającego się elementu podziału wiersza (<br>).
<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA 94040
</address>
Aby zapewnić separator lub przerwę tematyczną między sekcjami stycznymi treści, np. między rozdziałami książki lub między monologem liczącym 5000 słów a przepisem wyszukiwanym przez użytkownika, dodaj element <hr>. HR oznacza „regułę poziomą”. Przeglądarki zazwyczaj renderują linię poziomą, ale ten element ma znaczenie semantyczne. Domyślną rolą jest separator.
HTML zawiera też element, który umożliwia łamanie słów. Samozamykający się element <wbr> informuje przeglądarkę, że jeśli słowo może wydostać się z kontenera, jest to miejsce, w którym przeglądarka może opcjonalnie przerwać linię. Tej opcji używa się zwykle do rozdzielania słów
w długich adresach URL, bez dodawania łącznika.
Na przykład w biografii Hal jest tekst napisany przy użyciu kodu bajtowego, w którym każdy bajt jest oddzielony spacją. Kod bajtów nie zawiera spacji. Aby umożliwić podział długiego ciągu kodu bajtowego tylko między bajtami w przypadku konieczności zawijania wiersza, umieszczamy element <wbr> w każdej możliwości przerwy:
<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>
Elementy <br>, <hr> i <wbr> są pustymi elementami, co oznacza, że nie mogą mieć węzłów podrzędnych – ani elementów zagnieżdżonych, ani tekstu. Żadne z nich nie ma „wnętrza”, gdzie można przechowywać treści, więc nie mają tagu końcowego.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat tekstu w tekście.
Którego elementu należy użyć do wyświetlenia przykładowego kodu?
<code><data><kbd>Do czego służy element <ruby>?