HTML - Formatowanie tekstu

Specyfikacja HTML przewiduje szereg elementów, dzięki którym możliwe jest formatowanie tekstu. Formatowanie to obywa się w przypadku HTML poprzez umieszczenie fragmentu tekstu, który chcemy wyróżnić, pomiędzy znacznikami definiującymi specyficzny sposób wyświetlania tekstu przez przegladarkę.

Zobacz:


Tekst ważny - strong, b

HTML pozwala na oznaczenie tekstu jako ważny poprzez wyświetlenie go pogrubioną czcionką.

Do oznaczenia tekstu jako ważny służy element strong. Domyślnie tekst oznaczany jako ważny jest pogrubiony. Obok elementu strong do pogrubienia tekstu w HTML służy również element b.

<p><strong>To jest tekst oznaczony jako ważny za pomocą elementu <code>strong</code>.</strong></p>
<p><b>To jest tekst pogrubiony za pomocą elementu <code>b</code>.</b></p>

To jest tekst oznaczony jako ważny za pomocą elementu strong.

To jest tekst pogrubiony za pomocą elementu b.

Specyfikacja HTML5 zaleca stosowanie elementu b tylko w szczególnych przypadkach. Do określania jako ważny zalecany jest element strong.


Tekst wyróżniony - em, i

HTML pozwala na oznaczenie tekstu jako wyróżniony poprzez wyświetlenie go pochyloną czcionką.

Do oznaczenia tekstu jako wyróżnony służy element em. Domyślnie tekst oznaczany jako wyróżniony jest pochylony. Obok elementu em do pochylenia tekstu w HTML służy również element i.

<p><em>To jest tekst oznaczony jako wyróżniony za pomocą elementu <code>em</code>.</em></p>
<p><i>To jest tekst pochylony za pomocą elementu <code>i</code>.</i></p>

To jest tekst oznaczony jako wyróżniony za pomocą elementu em.

To jest tekst pochylony za pomocą elementu i.

Specyfikacja HTML5 zaleca stosowanie elementu i tylko w szczególnych przypadkach. Do określania jako wyróżniony zalecany jest element em.


Cytaty - q, blockquote

Określenie fragmentu tekstu jako cytatu może się odbywać w zależności od tego, czy cytat jest krótki i mieści się w bloku tekstu, czy też jako cytat dłuższy sam ma stanowic odrębny blok treści. Cytat liniowy tworzny jest za pomocą elementu q, natomiast cytat blokowy za pomocą elementu blockquote.

<p>Cytat liniowy <q>tworzony jest wewnątrz bloku treści</q> i domyślnie umieszczany w cudzysłowie.</p>
<blockquote>Cytat blokowy tworzy własny blok treści i domyślnie ma przypisane marginesy zmieniające odstępy pomiędzy cytatem, a krawędziami bloku zawierającego.</blockquote>

Cytat liniowy tworzony jest wewnątrz bloku treści i domyślnie umieszczany w cudzysłowie.

Cytat blokowy tworzy własny blok treści i domyślnie ma przypisane marginesy zmieniające odstępy pomiędzy cytatem, a krawędziami bloku zawierającego.

Tekst mniejszy, podświetlony - small, mark

Obok oznaczenia jako ważny, bądź wyróżniony, tekst w HTML może również zostać wyróżniony poprzez zmniejszenie small lub podświetlenie mark.

<p><small>To jest tekst mniejszy</small></p>
<p><mark>To jest tekst podświetlony</mark></p>

To jest tekst mniejszy

To jest tekst podświetlony


Indeksy dolny i górny - sub, sup

Indeksy dolny i górny wyświetlane są z przesunięciem o połowę linii, odpowiednio w dół lub górę, względem linii tekstu w której się znajdują. Tekst indeksu górnego sup może być stosowany na przykład dla oznaczenia przypisów lub w działaniach matematycznych do oznaczania potęgowania, tekst indeksu dolnego sub sprawdza się na przykład we wzorach chemicznych.

Indeks górny - przypis<sup>1</sup>, wzór matematyczny a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
Indeks dolny - wzór chemiczny C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>
Indeks górny - przypis[1], wzór matematyczny a2+b2=c2
Indeks dolny - wzór chemiczny C6H12O6

Tekst wstawiony, usunięty - ins, del

Oznaczenia tekstu jako wstawiony elementem ins, bądź usunięty elementem del z założenia mają służyć do wskazania, który fragment w tekście został dodany, a który usunięty, w porównaniu do poprzedniej wersji.

<p><ins>To jest tekst wstawiony</ins></p>
<p><del>To jest tekst usunięty</del></p>

To jest tekst wstawiony

To jest tekst usunięty


Tekst preformatowany - pre

Typowy HTML usuwa białą przestrzeń w dokumencie. Oznacza to, że przełamanie wiersza, spacje i tabulatory są usuwane, a zawartość jest zsunięta do jednej przestrzeni. Tekst preformatowany tworzony za pomocą elementu pre pozwala zachować oryginalne odstępy, przełamania wierszy i tabulatory jakie zostały wprowadzone w tekście, bez konieczności wykorzystania specjalnych elementów HTML do tego przeznaczonych.

<pre>To jest tekst preformatowany
     w którym nie ma potrzeby
dodawać    elementów przeznaczonych
  do przełamywania wiersza,
dodatkowych    spacji,
     bądź tabulatora.</pre>
To jest tekst preformatowany
     w którym nie ma potrzeby
dodawać    elementów przeznaczonych
  do przełamywania wiersza,
dodatkowych    spacji,
     bądź tabulatora.

Tekst preformatowany wyświetlany jest czcionką o stałej szerokości, co oznacza że do wyświetlenia rezerwowana jest taka sama szerokość na każdą literę.


Kod komputerowy - code, kbd, samp, var

W HTML zostało określonych kilka elementów liniowych domyślnie wyświetlanych czcionką monotypiczną (o stałej szerokości znaków), posiadających znaczenie semantyczne. Tymi elementami są: code dla kodu komputerowego, kbd dla danych wprowadzanych z klawiatury, samp dla przykładowego kodu oraz var dla zmiennej.

<p>Tutaj jest tekst zwykły, <code>a tutaj wyświetlany czcionką monotypiczną</code>.</p>
Tutaj jest tekst zwykły, a tutaj wyświetlany czcionką monotypiczną.

Zawartość elementów code, kbd, samp oraz var domyślnie wyświetlana jest w taki sam sposób.


Skrót lub akronim - abbr

Oznaczanie skrótów lub akronimów w tekście odbywa się za pomocą elementu abbr. Dodatkowo po zastosowaniu w elemencie atrybutu title, można uzyskać rozwinięcie skrótu lub akronimu, wyświetlanego po najechaniu na element kursorem.

<p>Język <abbr title="HyperText Markup Language">HTML</abbr> jest rodzajem języka komputerowego...</p>

Język HTML jest rodzajem języka komputerowego...


Informacje kontaktowe - address

Element address reprezentuje informacje kontaktowe dla artykułu, elementu przodka, lub całego dokumentu, w zależności od tego gdzie się znajduje. Element ten nie może być wykorzystywany do reprezentowania dowolnych adresów (np. adresów pocztowych), chyba że adresy te stanowią istotne informacje kontaktowe.

Element address powinien być ujmowany w elemencie footer.

<footer>
   <address>
      Kontakt <a href="mailto:Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript.">e-zoner.pl</a>.
   </address>
   <p>© copyright 2014 e-zoner.pl</p>
</footer>
Kontakt Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript..

© copyright 2014 e-zoner.pl


Elementy formatujące tekst

Tag pocz. Tag końc. Opis
<abbr> </abbr> Definiuje tekst skrótu lub akronimu
<address> </address> Definiuje informacje kontaktowe autora / właściciela dokumentu
<b> </b> Definiuje tekst pogrubiony
<bdo> </bdo> Definiuje kierunek tekstu
<blockquote> </blockquote> Definiuje tekst cytowany z innego źródła
<code> </code> Definiuje tekst kodu komputerowego
<cite> </cite> Definiuje tekst tytułu pracy
<del> </del> Definiuje tekst usunięty
<dfn> </dfn> Definiuje tekst definicji
<em> </em> Definiuje tekst wyróżniony
<i> </i> Definiuje tekst pochylony
<ins> </ins> Definiuje tekst wstawiony
<kbd> </kbd> Definiuje tekst wprowadzany z klawiatury
<mark> </mark> Definiuje tekst oznaczony / podświetlony
<pre> </pre> Definiuje tekst preformatowany
<q> </q> Definiuje tekst krótkiego cytatu w linii
<samp> </samp> Definiuje tekst przykładowego kodu kompterowego
<small> </small> Definiuje tekst mniejszy
<strong> </strong> Definiuje tekst ważny
<sub> </sub> Definiuje tekst indeksu dolnego
<sup> </sup> Definiuje tekst indeksu górnego
<var> </var> Definiuje tekst zmiennej