Aby dodać cytat do strony internetowej w HTML, należy wykorzystać odpowiednie znaczniki semantyczne – przede wszystkim <blockquote> oraz <q>. Każdy z nich służy do innego rodzaju cytatów i pozwala zachować przejrzystość oraz poprawność kodu. Poniżej znajdziesz szczegółowy przewodnik, przykłady zastosowań i praktyczne wskazówki dotyczące stylizacji oraz publikacji cytatów na stronie WWW.
Znacznik <blockquote> – cytat blokowy
Do czego służy –
- Umożliwia wyróżnienie dłuższego cytatu (np. fragment książki, wypowiedzi, artykułów),
- domyślnie prezentuje cytat jako osobny blok tekstu, zwykle z wcięciem.
Przykładowy kod –
<blockquote> "Cytaty są jak drogowskazy w labiryncie wiedzy." </blockquote> Dodawanie źródła cytatu –
- Oficjalnie źródło można umieścić w atrybucie
cite(adres widoczny w kodzie, ale nie dla użytkownika), - można ręcznie dodać podpis autora i źródło po cytacie:
<blockquote cite="https://adres-strony.pl/artykul"> Jeśli nie wiesz, dokąd zmierzasz, każda droga cię tam zaprowadzi. <cite>Lewis Carroll</cite> </blockquote> Praktyczny przykład ze stylizacją –
<blockquote style="border-left: 3px solid #ccc; padding-left: 1em; font-style: italic;"> "Tworzenie stron internetowych to nie tylko technika, to także sztuka." <cite style="display: block; font-size: 0.9em; color: #888;">– Jan Kowalski</cite> </blockquote> Znacznik <q> – cytat śródliniowy
Do czego służy –
- Do krótkich cytatów w ciągu zdania,
- automatycznie dodaje cudzysłów wokół treści cytatu.
Przykładowy kod –
<p>Albert Einstein powiedział, <q>Wyobraźnia jest ważniejsza od wiedzy</q>, co inspiruje do twórczego myślenia.</p> Wskazówki dotyczące cytowania
- Stosuj cytaty zgodnie z przeznaczeniem obu znaczników – długie cytaty –
<blockquote>, krótkie w zdaniu –<q>; - Dodaj informację o autorze – często realizuje się to przez element
<cite>, np. po cytacie lub osobno stylizując; - Źródło cytatu możesz wyróżnić przez podpis stylizowany CSS lub zwykły tekst;
- Atrybut
citew<blockquote>jest przydatny, ale nie wyświetla się użytkownikowi – traktuj go jako informację dla przeglądarek i wyszukiwarek; - Dodatki CSS – można podkreślić cytat przez ramkę, większe wcięcie, kursywę czy zmniejszoną czcionkę podpisu.
Stylizacja cytatów CSS (przykłady)
Chcesz zmienić wygląd cytatu? Poniżej kilka propozycji:
blockquote { border-left: 5px solid #1976d2; margin: 2em 0; padding-left: 20px; font-style: italic; background-color: #f7f7fa; } blockquote cite { display: block; font-size: 0.85em; color: #777; letter-spacing: 1px; margin-top: 0.5em; } Przykład użycia kilku cytatów w dokumencie
<h2>Słynne cytaty twórców WWW</h2>
<blockquote cite="https://www.w3.org/"> "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." <cite>Tim Berners-Lee</cite> </blockquote>
<p>Jak zauważył <q>Tim Berners-Lee</q>, dostępność stron dla wszystkich jest kluczowa.</p> Najczęstsze błędy i dobre praktyki
- Nie używaj znaczników cytatu tylko dla celów dekoracyjnych – mają znaczenie semantyczne,
- dodając źródło, preferuj
<cite>, nie zwykły tekst, - krótkie cytaty – zawsze
<q>, nie<blockquote>, by zachować poprawną strukturę HTML.
Dzięki temu poradnikowi możesz elegancko i poprawnie dodawać oraz stylizować cytaty w HTML, dbając zarówno o semantykę, jak i przejrzystość treści publikowanych w serwisie internetowym.
