Formatowanie tekstu w HTML
HTML oferuje szereg znaczników pozwalających na wyróżnianie fragmentów tekstu: pogrubienie, kursywę, podkreślenie oraz struktury takie jak listy czy cytaty.
Źródło:
Pogrubienie
Pogrubienie można osiągnąć za pomocą znacznika (semantyczny) lub (prezentacyjny). oznacza, że fragment jest ważny, podczas gdy zmienia wyłącznie wygląd.
<p>To jest normalny tekst, a to jest <strong>ważny tekst</strong> pogrubiony.</p>Źródło:
Kursywa (pochylenie)
Kursywę realizuje się za pomocą (semantyczny, emphasis) lub (prezentacyjny). dodatkowo przekazuje informację o akcentowaniu tekstu.
<p><em>Ten fragment tekstu jest napisany kursywą</em> dla podkreślenia.</p>Źródło:
Podkreślenie
Podkreślenie dostępne jest przez tag . Należy używać go ostrożnie, ponieważ podkreślenie zwykle kojarzy się z linkami — często lepiej zastosować CSS (np. text-decoration: underline;).
Źródło:
Listy
HTML oferuje listy uporządkowane (<ol>) i nieuporządkowane (<ul>). Każdy element listy znajduje się w tagu <li>.
Lista uporządkowana (numericzna)
<ol>
<li>Pierwszy element</li>
<li>Drugi element</li>
<li>Trzeci element</li>
</ol>Lista nieuporządkowana (wypunktowana)
<ul>
<li>Pierwszy element</li>
<li>Drugi element</li>
</ul>Listy zagnieżdżone
Można umieszczać listy wewnątrz elementów <li>, tworząc podlisty.
<ul>
<li>Pozycja 1
<ul>
<li>Podpozycja 1.1</li>
<li>Podpozycja 1.2</li>
</ul>
</li>
<li>Pozycja 2</li>
</ul>Źródło:
Cytaty
Do dłuższych cytatów używa się <blockquote>, który jest blokowym elementem zwykle wyświetlanym jako wcięty akapit. Dla krótkich cytatów inline można użyć <q>.
<blockquote>
To jest przykładowy cytat. Cały ten akapit będzie sformatowany jako cytat.
</blockquote><p>On powiedział: <q>To jest krótkie zdanie w cudzysłowie.</q></p>Źródło:
Znaczniki semantyczne: krótkie przypomnienie
Warto stosować znaczniki semantyczne, ponieważ nie tylko wpływają na wygląd, ale też przekazują sens fragmentu treści (np. i ), co pomaga czytnikom ekranu i wyszukiwarkom. Ogólnie zaleca się używać / gdy wyróżnienie niesie znaczenie, a / tylko dla czysto prezentacyjnych efektów.
Źródło:
Przykład: krótki fragment artykułu
<article>
<header>
<h2>Tytuł artykułu</h2>
</header>
<p>To jest normalny tekst, a to jest <strong>ważny tekst</strong> pogrubiony i traktowany jako istotny.</p>
<p><em>Ten fragment tekstu jest napisany kursywą</em> dla podkreślenia.</p>
<blockquote>To jest przykładowy cytat.</blockquote>
</article>Źródła: ,
