<q>
Krótki cytat wpleciony w zdanie. Cudzysłowy dodaje sama przeglądarka.
- Wyświetlanie
- inline
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść frazowa (phrasing content)
Przykład
#<p>Mentor powtarzał nam: <q>Nie kopiuj kodu, którego nie rozumiesz</q>. Dziś wiem, że miał rację.</p>Definicja i zastosowanie
#Element <q> oznacza krótki cytat w środku zdania. Przeglądarka sama otacza go cudzysłowami, dlatego nie wpisuj ich ręcznie, bo zobaczysz je podwójnie.
Przeglądarki zwykle dobierają cudzysłowy do języka strony, więc przy lang="pl" zobaczysz polskie „…”. Inny kształt ustawisz właściwością CSS quotes. Adres źródła cytatu podasz w atrybucie cite, choć przeglądarka go nie wyświetla.
Dłuższy cytat, który zajmuje osobny blok, oznacz przez <blockquote>. Nie używaj też <q> do ironii ani do wyróżniania pojedynczych słów w cudzysłowie, bo to nie są cytaty.
Składnia
#<q>krótki cytat</q>Atrybuty
#URL
Adres dokumentu, z którego pochodzi cytat. Nie jest wyświetlany, służy skryptom i robotom. Widoczne źródło podaj w treści zdania.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#cite
URLAdres dokumentu, z którego pochodzi cytat. Nie jest wyświetlany, służy skryptom i robotom. Widoczne źródło podaj w treści zdania.
<p>
Dokumentacja CodeWorlds przypomina:
<q cite="https://www.codeworlds.com/dokumentacja/html/p">akapit może zawierać tylko treść frazową</q>.
</p>Więcej przykładów
#<p style="quotes: '»' '«';">
Instrukcja mówi: <q>zapisz plik jako index.html</q>, a potem odśwież stronę.
</p>Znaki »…« spotkasz w wielu polskich książkach. Właściwość quotes przyjmuje pary znaków: otwierający i zamykający.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie dopisuj własnych cudzysłowów wokół
<q>, przeglądarka robi to za Ciebie. - Długie cytaty umieszczaj w
<blockquote>. - Zwykle wystarczy
lang="pl"na elemencie<html>, żeby przeglądarka użyła polskich cudzysłowów. Własne znaki ustawisz w CSS, np.q { quotes: "»" "«"; }.
Powiązane hasła
#- <blockquote>Dłuższy cytat z innego źródła, wyświetlany jako osobny blok z wcięciem.
- <cite>Tytuł dzieła: książki, artykułu, filmu, piosenki, gry albo programu.
- <em>Akcent w zdaniu: słowo, które przy czytaniu na głos wymawia się z naciskiem.
- <i>Tekst w innym tonie lub głosie: obce wyrażenia, nazwy łacińskie, myśli bohatera, terminy techniczne.
Widzisz błąd albo brakuje przykładu? Napisz do nas.