Blockquote – opis i wyjaśnienie
Blockquote to element używany w HTML do oznaczania cytatów blokowych, czyli dłuższych fragmentów tekstu cytowanych z innego źródła. Jest on wyświetlany w sposób wizualnie wyróżniony, co pomaga użytkownikom zidentyfikować, że dany fragment pochodzi z innego miejsca.
Struktura i użycie
Element blockquote ma następującą strukturę:
<blockquote>
Tekst cytatu, np. fragment książki, artykułu lub innego źródła.
</blockquote>
Można także dodać atrybut cite, aby wskazać źródło cytatu:
<blockquote cite="https://example.com">
"To jest przykładowy cytat."
</blockquote>
Wartość atrybutu cite nie jest wyświetlana w przeglądarce, ale może być użyta przez narzędzia analityczne lub przeglądarki jako meta-informacja.
Cechy blockquote
- Stylizacja: Blockquote domyślnie wyróżnia tekst poprzez wcięcie lub inne formatowanie (to zależy od przeglądarki i stylów CSS).
- Znaczenie semantyczne: Element ten ma znaczenie semantyczne – informuje, że treść jest cytatem.
- Możliwość stylizacji CSS: Wygląd blockquote można łatwo dostosować za pomocą CSS. Przykład:
blockquote {
font-style: italic;
border-left: 4px solid #ccc;
padding-left: 10px;
color: #555;
}
Kiedy używać blockquote?
- Gdy chcesz wyróżnić fragment tekstu pochodzący z innego źródła.
- Do oznaczenia długich cytatów (dla krótkich można używać
<q>). - Gdy zależy Ci na zachowaniu semantyki strony.
Przykład w pełnym kontekście:
<!DOCTYPE html>
<html>
<head>
<title>Przykład Blockquote</title>
<style>
blockquote {
font-style: italic;
border-left: 4px solid #007BFF;
margin: 20px;
padding-left: 15px;
}
</style>
</head>
<body>
<h1>Przykład użycia blockquote</h1>
<p>Poniżej znajduje się cytat z artykułu:</p>
<blockquote cite="https://example.com">
"Nauka to proces ciągłego zdobywania wiedzy, który nigdy się nie kończy."
</blockquote>
</body>
</html>
W efekcie, użytkownik zobaczy wyróżniony tekst cytatu, a w kodzie znajdzie się informacja o jego źródle.