Inne wbudowane elementy tekstu

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

Jest moduł obejmujący linki i element <a>. Pozostałe elementy zostały tu krótko omówione.

Przykłady kodu i dokumentacja techniczna

Podczas dokumentowania przykładów kodu używaj elementu <code>. Domyślnie zawartość 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 daną część treści z tłumaczeniem zrozumiałym dla komputera. Atrybut value elementu zawiera tłumaczenie treści elementu, które jest zrozumiałe dla komputera. 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, który umożliwia podawanie dat i godzin w formacie zrozumiałym dla komputera. Atrybut datetime jest zrozumiały dla komputera, co zapewnia przydatne informacje dla aplikacji, takich jak kalendarze i wyszukiwarki.

Podczas podawania przykładowych danych wyjściowych programu użyj elementu <samp>, aby otoczyć tekst. Przeglądarka zwykle renderuje ten przykład lub cytowane dane wyjściowe również czcionką o stałej szerokości.

Podczas podawania instrukcji dotyczących interakcji z klawiaturą, <kbd> element można użyć. Reprezentuje on tekstowe dane wejściowe użytkownika z klawiatury, głosowe wprowadzanie tekstu lub dowolne inne urządzenie do wprowadzania tekstu.

Element <var> można używać w wyrażeniach matematycznych lub zmiennych programowania. Większość przeglądarek wyświetla zawartość tekstową w wersji kursywnej otaczającej czcionki. Jeśli piszesz dużo treści matematycznych, rozważ użycie MathML, czyli języka znaczników matematycznych opartego na XML , do opisywania notacji matematycznej.

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

Użyj <del>, aby wskazać tekst, który został usunięty. 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 zrozumiałym dla komputera. Element przekreślenia, <s>, może służyć do wskazywania, że treść nie jest już istotna, ale nie została usunięta z dokumentu.

<ins> jest przeciwieństwem elementu <del>. Ten element służy do wskazywania tekstu, który został dodany, opcjonalnie z atrybutami cite lub datetime.

Definicje i obsługa języków

Jeśli używasz skrótów lub akronimów, przy pierwszym użyciu zawsze podaj pełną wersję terminu w postaci zwykłego tekstu. Następnie wprowadź skróconą reprezentację terminu między tagami otwierającymi i zamykającymi <abbr> Element <abbr> jest potrzebny tylko przy pierwszym wystąpieniu, gdy definiowany jest skrót lub akronim. 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.

Jeśli definiujesz termin, który nie jest skrótem ani akronimem, użyj elementu definicji <dfn> , aby zidentyfikować definiowany termin w otaczającej go treści.

Jeśli definiowany termin nie jest w tym samym języku co otaczający go tekst, dodaj lang atrybut, aby określić język.

Podczas pisania w językach o różnych kierunkach HTML udostępnia <bdi> element, który umożliwia traktowanie potencjalnie dwukierunkowego tekstu w izolacji od otaczającego go tekstu. Ten element internacjonalizacji jest szczególnie przydatny, gdy treść o nieznanym kierunku jest dynamicznie wstawiana na stronę. Element <bdo> zastępuje bieżący kierunek tekstu, renderują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, aby podać informacje o wymowie. Element <ruby> to kontener, który zawiera te adnotacje ułatwiające czytanie języków pisanych takich jak koreański, chiński i japoński. Ruby można też używać w języku hebrajskim, arabskim i wietnamskim.

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

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

Wyróżnianie tekstu

Istnieje kilka elementów, których można użyć do wyróżnienia tekstu na podstawie semantycznego powodu wyróżnienia tekstu (a nie ze względów prezentacyjnych, ponieważ jest to zadanie CSS).

• Użyj elementu <em>, aby wyróżnić lub podkreślić fragment treści. Element <em> można zagnieżdżać, a każdy poziom zagnieżdżenia wskazuje większy stopień wyróżnienia. Ten element ma znaczenie semantyczne i może służyć do informowania agentów użytkownika, takich jak czytniki ekranu, Alexa i Siri, o wyróżnieniu.
• 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 można szybko zidentyfikować oznaczoną treść bez dodawania wyróżnienia ani znaczenia.
• Element <strong> identyfikuje 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 odniesień lub metadanych cytatów, np. numeru ISBN książki.

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

<i>

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

Tego elementu nie należy używać do pisania tekstu kursywą.

MLW używa elementu <span> w przypadku dziwnego tekstu u dołu recenzji warsztatu Toasty McToastface. Element <span> zapewnia ogólny kontener w tekście, który nie ma semantyki i niczego nie reprezentuje. Byłoby to też odpowiednie użycie <i>.

Domyślny styl elementu <i> to renderowanie elementu czcionką kursywną. W tym przykładzie ustawiamy font-style: normal, ponieważ używane znaki nie są dostępne w kursywie.

<u>

Element <u> służy do treści, która ma adnotację nietekstową. Możesz na przykład dodać adnotację do słów, które są celowo napisane niepoprawnie. Domyślnie treść jest podkreślona, ale można to kontrolować za pomocą CSS, np. dodając czerwone faliste podkreślenie, aby naśladować wskaźniki błędów gramatycznych w edytorze tekstu.

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

<b>

Elementu <b> można użyć, aby zwrócić uwagę na tekst, który nie jest inaczej ważny. Ten element nie przekazuje żadnych specjalnych informacji semantycznych i należy go używać tylko wtedy, gdy żaden z innych elementów w tej sekcji nie pasuje do 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 wierszy, np. podczas pisania wiersza lub adresu pocztowego, użyj samozamykającego się elementu końca wiersza, <br>, aby dodać znak powrotu karetki.

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

Aby dodać separator lub przerwę tematyczną między sekcjami treści tangencjalnej, np. między rozdziałami książki lub między monologiem o długości 5000 słów a przepisem, którego szukają użytkownicy, dodaj <hr> element. HR oznacza „linię poziomą”. 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 słów. Samozamykający się <wbr> element sugeruje przeglądarce, że jeśli słowo może przekroczyć swój kontener, jest to miejsce, w którym przeglądarka może opcjonalnie podzielić wiersz. Jest to często używane do dzielenia słów w długich adresach URL. Nie dodaje myślnika.

Na przykład w biografii Hala znajduje się tekst zapisany w kodzie bajtowym, a 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, dodajemy element <wbr> w każdym miejscu, w którym można go podzielić:

<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ć żadnych węzłów podrzędnych – ani zagnieżdżonych elementów, ani tekstu. Ponieważ żaden z nich nie ma „wnętrza”, w którym można by przechowywać treść, nie mają tagu zamykającego.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat tekstu w tekście.