HTML Formatowanie

Elementy HTML są używane do strukturyzowania i stylizacji treści na stronach internetowych. Poniżej znajduje się opis wybranych elementów związanych z formatowaniem.

Elementy blokowe

The <p> element

Element <p> służy do definiowania akapitów tekstu:

<p>To jest przykład akapitu.</p>

The <hr> element

Reprezentuje poziomą linię, oddzielającą sekcje treści:

<hr>

The <pre> element

Wyświetla tekst w formacie preformatowanym, zachowując białe znaki i układ:

<pre>
  Linia 1
  Linia 2
</pre>

The <blockquote> element

Służy do oznaczania cytatów blokowych:

<blockquote>
  To jest cytat blokowy.
</blockquote>

The <ol> element

Reprezentuje uporządkowaną (numerowaną) listę:

<ol>
  <li>Punkt pierwszy</li>
  <li>Punkt drugi</li>
</ol>

The <ul> element

Reprezentuje nieuporządkowaną (punktowaną) listę:

<ul>
  <li>Punkt pierwszy</li>
  <li>Punkt drugi</li>
</ul>

The <menu> element

Reprezentuje menu, np. listę opcji:

<menu>
  <li>Opcja 1</li>
  <li>Opcja 2</li>
</menu>

The <li> element

Element <li> służy do definiowania punktów na liście (zarówno uporządkowanej, jak i nieuporządkowanej):

<li>Punkt na liście</li>

The <dl> element

Reprezentuje listę definicji:

<dl>
  <dt>Termin</dt>
  <dd>Definicja terminu</dd>
</dl>

The <dt> element

Element <dt> służy do oznaczania terminu w liście definicji:

<dt>Termin</dt>

The <dd> element

Element <dd> reprezentuje definicję terminu w liście definicji:

<dd>Definicja terminu</dd>

The <figure> element

Używany do grupowania zawartości, takiej jak obrazki, wykresy, itp:

<figure>
  <img src="obraz.jpg" alt="Opis obrazu">
</figure>

The <figcaption> element

Dodaje podpis do zawartości w elemencie <figure>:

<figcaption>Opis pod obrazem</figcaption>

The <main> element

Reprezentuje główną część zawartości dokumentu:

<main>Treść główna</main>

The <search> element

Używane do reprezentowania sekcji wyszukiwania w dokumencie:

<search>Formularz wyszukiwania</search>

The <div> element

Ogólny element blokowy, używany do grupowania zawartości w celu stylizacji lub strukturalizacji:

<div>Grupowanie zawartości</div>

Text-level semantics

The <a> element

Tworzy hiperłącze:

<a href="https://example.com">Link</a>

The <em> element

Wyróżnia tekst, zazwyczaj kursywą:

<em>Tekst wyróżniony</em>

The <strong> element

Wskazuje silne znaczenie, zazwyczaj poprzez pogrubienie tekstu:

<strong>Tekst pogrubiony</strong>

The <small> element

Zmniejsza rozmiar tekstu:

<small>Tekst mniejszy</small>

The <s> element

Reprezentuje tekst przekreślony:

<s>Usunięty tekst</s>

The <cite> element

Reprezentuje cytat zewnętrzny lub źródło:

<cite>Źródło cytatu</cite>

The <q> element

Reprezentuje krótki cytat wewnętrzny:

<q>Krótki cytat</q>

The <dfn> element

Definiuje termin w dokumencie:

<dfn>Definiowany termin</dfn>

The <abbr> element

Reprezentuje skrót z rozwinięciem:

<abbr title="HyperText Markup Language">HTML</abbr>

The <ruby> element

Reprezentuje elementy do zapisu japońskiego, jak rubi (furi):

<ruby>漢字<ruby>

The <rt> element

Reprezentuje tekst rubi (np. fonetyczny zapis obok znaku kanji):

<rt>kanji</rt>

The <rp> element

Reprezentuje nawiasy dla znaków rubi, gdy nie są wspierane przez przeglądarkę:

<rp>(</rp>
<ruby>漢字</ruby>
<rp>)</rp>

The <data> element

Reprezentuje dane powiązane z wartościami:

<data value="2025-01-01">1 stycznia 2025</data>

The <time> element

Reprezentuje datę lub godzinę:

<time datetime="2025-01-01">1 stycznia 2025</time>

The <code> element

Oznacza fragment kodu źródłowego:

<code>console.log('Hello, World!');</code>

The <var> element

Reprezentuje zmienną w matematycznych formułach:

<var>x</var>

The <samp> element

Reprezentuje przykład wyników programu:

<samp>Output: 10</samp>

The <kbd> element

Reprezentuje tekst wprowadzony przez użytkownika:

<kbd>Ctrl + C</kbd>

The <sub> and <sup> elements

Reprezentują indeks dolny i górny:

<sub>2</sub>, <sup>3</sup>

The <i> element

Reprezentuje tekst w kursywie:

<i>Tekst kursywą</i>

The <b> element

Reprezentuje pogrubiony tekst:

<b>Tekst pogrubiony</b>

<u> element

Reprezentuje podkreślony tekst:

<u>Tekst podkreślony</u>

The <mark> element

Wyróżnia tekst w celach uwagi:

<mark>Ważne</mark>

The <bdi> element

Izoluje fragment tekstu, aby zapobiec nieoczekiwanym zmianom kierunku:

<bdi>Tekst</bdi>

The <bdo> element

Określa kierunek tekstu (np. LTR lub RTL):

<bdo dir="rtl">Tekst od prawej do lewej</bdo>

The <span> element

Ogólny element do stylizacji fragmentów tekstu:

<span>Fragment tekstu</span>

The <br> element

Dodaje przerwę liniową:

Linia 1<br>Linia 2

The <wbr> element

Reprezentuje miejsce, w którym przeglądarka może złamać długi wyraz, aby przejść do nowej linii:

Supercalifragilistic<wbr>expialidocious