Inne wbudowane elementy tekstu

Omówiliśmy większość, ale nie wszystkie elementy HTML. Jednym z obszarów, o których nie wspomnieliśmy, są elementy tekstowe w tekście. Wbrew powszechnemu przekonaniu HTML został pierwotnie stworzony do udostępniania dokumentów, a nie filmów z kotami. Istnieje wiele elementów, które zapewniają semantykę tekstu w dokumentacji.

Jest moduł dotyczący linków i elementu <a>. Pozostałe elementy zostały krótko omówione poniżej.

Przykłady kodu i dokumentacja techniczna

Podczas dokumentowania przykładów kodu używaj elementu <code>. Domyślnie treść tekstowa jest wyświetlana czcionką o stałej szerokości. Jeśli chcesz dodać kilka wierszy kodu, zagnieźdź element <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 dany fragment treści z tłumaczeniem zrozumiałym dla komputera. Atrybut value elementu zawiera zrozumiałe dla komputera tłumaczenie treści elementu. Jeśli treść <data> jest związana z czasem lub datą, zamiast niej należy użyć elementu <time>, który reprezentuje określony okres.

Element <time> może zawierać atrybut datetime, aby podawać daty i godziny w formacie czytelnym dla ludzi i komputerów. Atrybut datetime jest czytelny dla maszyn, co zapewnia przydatne informacje dla aplikacji, takich jak kalendarze i wyszukiwarki.

Podając przykładowe dane wyjściowe programu, użyj elementu <samp> do umieszczenia tekstu. Przeglądarka zwykle renderuje ten przykład lub cytowane dane wyjściowe czcionką o stałej szerokości.

Podczas podawania instrukcji dotyczących interakcji z klawiaturą można użyć elementu <kbd>. Reprezentuje tekst wprowadzony przez użytkownika z klawiatury, za pomocą rozpoznawania mowy lub innego urządzenia do wprowadzania tekstu.

Element <var> może być używany w przypadku wyrażeń matematycznych lub zmiennych programistycznych. Większość przeglądarek wyświetla tekst w wersji kursywą czcionki otaczającej. Jeśli piszesz dużo treści matematycznych, rozważ użycie MathML, czyli języka znaczników matematycznych opartego na XML, który służy do opisywania notacji matematycznej.

Potęga w twierdzeniu Pitagorasa używa elementu <sup> w indeksie górnym. Istnieje podobny element <sub>, który określa tekst w wierszu, który powinien być wyświetlany jako indeks dolny wyłącznie ze względów typograficznych. Indeksy górne i dolne to liczby, cyfry, symbole lub inne adnotacje, które są mniejsze niż normalna linia tekstu i znajdują się odpowiednio nieco powyżej lub poniżej tej linii.

Użyj <del>, aby wskazać tekst, który został usunięty lub „skasowany”. Opcjonalnie możesz dodać atrybut cite ustawiony na zasób, który wyjaśnia zmianę, oraz atrybut datetime z datą lub datą i godziną w formacie daty i godziny czytelnym dla komputera. Element przekreślenia <s> może służyć do oznaczania treści, które nie są już istotne, ale nie są usuwane z dokumentu.

Element <ins> jest przeciwieństwem elementu <del>. Ten element służy do wskazywania tekstu, który został dodany lub „wstawiony”, i opcjonalnie zawiera atrybuty cite lub datetime.

Definicje i obsługiwane języki

Jeśli używasz skrótów, przy pierwszym użyciu zawsze podaj pełną wersję terminu w formie zwykłego tekstu. Następnie wprowadź skróconą reprezentację terminu między otwierającym i zamykającym tagiem <abbr>. Symbol <abbr> jest potrzebny tylko przy pierwszym wystąpieniu skrótu, gdy jest on definiowany. Atrybut title nie jest konieczny ani przydatny.

Wyjątkiem od tej reguły jest sytuacja, gdy termin jest powszechnie znany czytelnikowi, np. HTML i CSS w tej serii.

Podczas definiowania terminu, który nie jest skrótem, użyj elementu definition <dfn> , aby wskazać definiowany termin w otaczających go treściach.

Jeśli definiowane pojęcie nie jest w tym samym języku co otaczający je tekst, pamiętaj, aby uwzględnić atrybut lang, aby określić język.

W przypadku języków pisanych w różnych kierunkach HTML udostępnia element <bdi>, który umożliwia traktowanie potencjalnie dwukierunkowego tekstu w izolacji od otaczającego go tekstu. Ten element internacjonalizacji jest szczególnie przydatny, gdy na stronie dynamicznie wstawiane są treści o nieznanym kierunku pisma. Element <bdo> zastępuje bieżący kierunek tekstu, wyświetlając tekst w innym kierunku. W3C udostępnia wprowadzenie do algorytmów dwukierunkowych.

Niektóre zestawy znaków zawierają małe adnotacje umieszczone nad znakami lub po ich prawej stronie, które zawierają informacje o wymowie. Element <ruby> to kontener, w którym umieszcza się adnotacje ułatwiające czytanie języków pisanych, takich jak koreański, chiński i japoński. Ruby może być również używany w przypadku języków hebrajskiego, arabskiego i wietnamskiego.

Nawiasy ruby (<rp>) zostały uwzględnione w specyfikacji, aby zawierać nawiasy otwierające i zamykające dla przeglądarek, które nie obsługują wyświetlania znaku <ruby>. Gdy przeglądarki obsługują element <ruby> (a wszystkie aktualizowane przeglądarki to robią), zawartość elementów <rp> nie jest wyświetlana. Element tekstu ruby (<rt>) zawiera rzeczywiste adnotacje. Oba te elementy są zagnieżdżone w elemencie <ruby>.

Pamiętaj, że nawiasy nie są widoczne, jeśli Twoja przeglądarka obsługuje znak <ruby>.

Wyróżnianie tekstu

Istnieje kilka elementów, których można użyć do wyróżnienia tekstu ze względu na semantyczny powód wyróżnienia (a nie ze względów prezentacyjnych, ponieważ tym zajmuje się CSS).

• Użyj elementu <em>, aby podkreślić lub wyróżnić fragment treści. Element <em> może być zagnieżdżony, a każdy poziom zagnieżdżenia oznacza większy nacisk. Ten element ma znaczenie semantyczne i może być używany do informowania agentów użytkownika, takich jak czytniki ekranu, Alexa i Siri, o tym, że należy położyć nacisk na dany fragment.
• Użyj elementu <mark>, aby zidentyfikować lub wyróżnić tekst, który jest w jakiś sposób istotny, np. wyróżnić (lub „oznaczyć”) wystąpienie wyszukiwanych haseł w wynikach wyszukiwania. Dzięki temu oznaczone treści można szybko zidentyfikować bez dodawania do nich wyróżnień ani podkreśleń.
• Element <strong> oznacza tekst jako bardzo ważny. Przeglądarki zwykle renderują treść z większą grubością czcionki.
• Element <cite>, omówiony w podstawach tekstu, służy do oznaczania tytułów książek, artykułów lub innych dzieł twórczych albo skróconych odwołań lub metadanych cytatów, takich jak numer ISBN książki.

Istnieją 3 elementy, które zostały tymczasowo wycofane, ale ponownie dodano je do HTML. Należy ich używać oszczędnie, a nawet wcale, ponieważ mają niewielką wartość semantyczną lub nie mają jej wcale. Do stylizowania elementów HTML zawsze należy używać CSS.

<i>

Elementy <i> mogą być używane w przypadku terminów technicznych, słów obcych (z atrybutem lang określającym język), myśli lub nazw statków. Element ten służy do odróżniania treści w tekście od otaczającego go tekstu z określonego powodu, np. w przypadku tekstu idiomatycznego, terminów technicznych i oznaczeń taksonomicznych.

Nie należy używać tego elementu do pisania tekstu kursywą.

MLW używa elementu <span> w przypadku dziwnego tekstu u dołu opinii o warsztacie Toasty McToastface. Element <span> jest ogólnym kontenerem wbudowanym, który nie ma semantyki i niczego nie reprezentuje. To również byłoby odpowiednie użycie atrybutu <i>.

Domyślny styl elementu <i> to wyświetlanie go kursywą. W tym przykładzie ustawiamy font-style: normal, ponieważ użyte znaki nie są dostępne w kursywie.

<u>

Element <u> jest przeznaczony do treści, które mają adnotacje nietekstowe. Możesz na przykład oznaczać słowa, które zostały celowo napisane z błędami. Domyślnie treść jest podkreślona, ale można to kontrolować za pomocą CSS, np. dodając czerwone faliste podkreślenie, aby imitować wskaźniki błędów gramatycznych w edytorze tekstu.

<p>I always spell <u>licence</u> wrong</p> 

<b>

Element <b> może służyć do zwrócenia uwagi na tekst, który nie jest inaczej ważny. Ten element nie przekazuje żadnych specjalnych informacji semantycznych i powinien być używany tylko wtedy, gdy żaden z pozostałych elementów w tej sekcji nie pasuje do danego celu. Nie podaję przykładu, ponieważ nie udało mi się znaleźć prawidłowego przypadku użycia. To pokazuje, jak bardzo ten element jest „ostatnią deską ratunku”.

Odstęp

Jeśli chcesz dodać podziały wiersza, np. podczas pisania wiersza lub adresu pocztowego, użyj elementu podziału wiersza zamykanego samodzielnie, <br>, aby dodać znak powrotu karetki.

<address> Machine Learning Workshop<br /> 100 Google Drive <br /> Mountain View, CA  94040 </address> 

Aby oddzielić od siebie sekcje treści pobocznych, np. rozdziały książki lub 5000-słowny monolog od przepisu, którego szukają użytkownicy, użyj elementu <hr>. HR to skrót od „horizontal rule” (linia pozioma). Chociaż przeglądarki zwykle renderują linię poziomą, ten element ma znaczenie semantyczne. Domyślna rola to separator.

HTML ma też element, który umożliwia dzielenie wyrazów. Element zamykający się samodzielnie <wbr> sugeruje przeglądarce, że jeśli słowo może wyjść poza kontener, jest to miejsce, w którym przeglądarka może opcjonalnie podzielić wiersz. Jest to często używane do dzielenia długich adresów URL między słowami. Nie dodaje łącznika.

Na przykład w biografii Hala znajduje się tekst zapisany w kodzie bajtowym, w którym każdy bajt jest oddzielony spacją. Kod bajtowy nie zawiera spacji. Aby umożliwić podział długiego ciągu kodu bajtowego tylko między bajtami, jeśli wiersz musi zostać zawinięty, wstawiamy element <wbr> w każdym miejscu, w którym może nastąpić podział:

<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> to elementy puste, co oznacza, że nie mogą mieć węzłów podrzędnych – ani zagnieżdżonych elementów, ani tekstu. Żaden z tych tagów nie ma „wnętrza”, w którym można by przechowywać treści, więc nie mają one tagu zamykającego.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o tekście wbudowanym.