Pojedyncze słowa lub całe fragmenty można bardzo łatwo wyróżnić kursywą i pogrubieniem. Najpierw przejdźmy do wariantu pogrubiającego. Do dyspozycji mamy w zasadzie dwa elementy HTML, czyli b oraz strong.
Witaj na <b>PSD-Tutorials.de</b>! <br /> Witaj na <strong>PSD-Tutorials.de</strong>!
Spójrzmy teraz na rezultat w przeglądarce:
Wyraźnie oba elementy zapewniają identyczne wyświetlenie. Dlaczego jednak istnieją dwa różne elementy? Faktycznie istnieją inne rodzaje prezentacji dla stron internetowych niż te znane z przeglądarek standardowych. Pomyśl np. o czytnikach dla osób niewidomych lub o urządzeniach mobilnych. Elementy HTML oferowane przez W3C mają na celu wspieranie semantyki. Zatem element b nie oznacza już, że coś ma być wyświetlone pogrubionym tekstem. Raczej oznacza on tekst wizualnie wyróżniony, nie posiadający zwiększonej ważności. Mogą to być na przykład nazwy produktów lub słowa kluczowe w dokumentach.
Element strong dotychczas służył do wzmocnienia tekstu. Z kolei em był wykorzystywany do akcentowania ważnego tekstu (emfatycznie). W starszych wersjach HTML strong był wzmocnieniem dla em. W HTML5 obu elementom nadano inne znaczenie.
Najpierw tekst z normalnym akcentowaniem.
<p> Koty są urocze. </p>
Teraz ten sam tekst, jednak z akcentem na pierwszym słowie.
<p> <em>Koty</em> są urocze. </p>
Poprzez użycie em akcent jest kierowany na słowo Koty. Możliwe jest to na przykład w dyskusji, gdzie mówi się o tym, czy psy czy koty są słodsze.
Teraz w tym przykładzie można również zastosować element em do słowa są.
<p> Koty <em> są </em> urocze. </p>
To mogłaby być odpowiedź w dyskusji, gdzie ktoś twierdzi, że koty są zupełnie niesłodkie.
Faktycznie fragmenty oznaczone za pomocą em są wyświetlane kursywą w przeglądarce. Ten sam efekt wizualny uzyskuje się za pomocą elementu i.
Według projektu roboczego HTML5 element i teraz nie oznacza już kursywy.
<p> Serdecznie witamy na <i>PSD-Tutorials.de</i> </p>
Tym samym element ten teraz oznacza, że chcemy komunikować inną atmosferę. Element i jest interesujący na przykład do oznaczania terminów technicznych lub określeń taksonomicznych.
To wszystko jest strasznie teoretyczne, wiem. Zasadniczo powinniście starać się trzymać wymagań HTML5. Z drugiej strony nikt nie urwie wam głowy, jeśli użyjecie elementu strong zamiast b.
<p> <em>Wiersz z em</em><br /> <i>Wiersz z i</i><br /> <strong>Wiersz z strong</strong><br /> <b>Wiersz z b</b> </p>
Ostatecznie producenci przeglądarek muszą tu działać.
W rzeczywistości za właściwe przystosowanie tekstu oznaczonego wymienionymi elementami odpowiada w końcu CSS.
Akronimy z użyciem abbr
Aby wyróżnić akronim, używa się tego samego elementu, który do tej pory służył do skrótów, czyli abbr.
Biuro Deutsch-Österreichische <abbr title="World Wide Web Consortium">W3C</abbr> od kwietnia 2009 roku mieści się w Fachhochschule Potsdam.
Przeglądarki, które prawidłowo interpretują element abbr, podkreślają tekst zawarty w elemencie abbr.
Dodatkowo warto przypisać elementowi abbr atrybut title. Zazwyczaj umieszcza się tam pełne wyrażenie odpowiadające akronimowi. Gdy odwiedzający najedzie kursorem na akronim, pełne wyrażenie zostanie wyświetlone w oknie podpowiedzi.
Adresy z użyciem address
Za pomocą elementu address można wyróżnić informacje adresowe.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
Przeglądarki zazwyczaj wyświetlają zawartość elementu address kursywą.
Oznaczanie kodu za pomocą elementu code
Element code jest używany do wyróżniania kodu programu. W tym sensie, w porównaniu do wcześniejszych wersji HTML, nic się nie zmieniło. Nadal code jest używany do tego celu.
<pre>
Das ist ein HTML-Kopfbereich:
<code>
<html>
<head>
<title></title>
</head>
</code>
</pre>
Zazwyczaj kod jest łączony z elementem pre, aby zachować wcięcia użyte w kodzie programu.
Specyfikacja HTML5 zaleca stosowanie atrybutu class w kontekście elementu code. Do tego atrybutu można przypisać język użyty wewnątrz elementu code. Oto kilka typowych przykładów, jak mogą wyglądać takie wyróżnienia:
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
To, czy i jak przeglądarki interpretują te instrukcje, nie jest określone przez W3C.
<pre>
Das ist ein HTML-Kopfbereich:
<code class="language-html">
<html>
<head>
<title></title>
</head>
</code>
</pre>
Obecnie atrybut class nie ma żadnego widocznego efektu w przeglądarce. Jednak ludzie mogą rozpoznać, język, na którym jest napisany kod programu, zaglądając do kodu źródłowego strony.
Małe litery za pomocą elementu small
Element small pierwotnie służył do wyświetlania tekstu mniejszego niż normalnie. W HTML5 element small jest specjalnie przeznaczony dla tekstu w małym druku. Taki tekst może obejmować na przykład:
• informacje o prawach autorskich
• wyłączenia odpowiedzialności
• warunki licencyjne
• regulaminy
W3C wyraźnie zaznacza, że elementu small nie należy używać do długich fragmentów tekstu.
<small> Copyright by PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Podkreślanie tekstów
Możecie podkreślać słowa za pomocą elementu u. Oto przykład:
<p>Willkommen bei <u>PSD-Tutorials.de</u></p>
Wynik w przeglądarce będzie wyglądał następująco:
Po zobaczeniu wyniku, faktycznie będzie to pożądany efekt. Jednak sprawa ma haczyk. W Internecie podkreślony tekst zazwyczaj oznacza hiperłącza. Jeśli teraz podkreślicie tekst lub słowo, odwiedzający mogą pomyśleć, że jest to hiperłącze. Próba kliknięcia w nie zakończy się sukcesem. Dlatego powinniście zrezygnować z podkreślenia.
