HTML (HyperText Markup Language) oferuje różne elementy umożliwiające strukturyzowanie tekstu oraz dodawanie odniesień i cytowań w sposób, który jest zarówno semantycznie poprawny, jak i dostępny dla użytkowników oraz przeglądarek internetowych. W tej lekcji skupimy się na elementach takich jak blockquote, q, abbr, address, i cite, które służą do oznaczania cytatów, skrótów, adresów i odniesień do źródeł.
Cytaty: blockquote i q, blockquote – Cytaty blokowe
Element blockquote jest używany do oznaczania dłuższych cytatów, które zajmują własny blok tekstu. Przeglądarki domyślnie wciągają tekst w blockquote, aby wizualnie oddzielić cytat od reszty treści.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cytat blokowy w HTML</title>
</head>
<body>
<blockquote cite="http://przykladowy-źródło-cytatu.com">
To jest przykładowy długi cytat, który został umieszczony w elemencie blockquote,
aby zaznaczyć, że pochodzi z zewnętrznego źródła.
</blockquote>
</body>
</html>
q – Cytaty w linii
Element q służy do oznaczania krótkich cytatów, które są bezpośrednio wplecione w bieżący tekst. Przeglądarki zazwyczaj automatycznie otaczają tekst w q cudzysłowami.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Krótki cytat w HTML</title>
</head>
<body>
To jest przykład użycia elementu <q>q</q> do oznaczania krótkiego cytatu wewnątrz zdania.
</body>
</html>
Skróty: abbr
Element abbr jest używany do oznaczania skrótów lub akronimów. Atrybut title tego elementu powinien zawierać pełne rozszerzenie skrótu lub akronimu.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skróty i akronimy w HTML</title>
</head>
<body>
<p>Organizacja Narodów Zjednoczonych (ONZ) została założona w 1945 roku.
<abbr title="Organizacja Narodów Zjednoczonych">ONZ</abbr> ma na celu...</p>
</body>
</html>
Adresy: address
Element address służy do podawania informacji kontaktowych dla autora/strony internetowej. Może zawierać zarówno fizyczny adres, jak i linki do stron internetowych czy adresy e-mail.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adres w HTML</title>
</head>
<body>
<address>
Autora można skontaktować przez email na <a href="mailto:email@przyklad.com">email@przyklad.com</a>.
</address>
</body>
</html>
Odniesienia do źródeł: cite
Element cite jest używany do oznaczania tytułów dzieł, takich jak książki, artykuły, filmy, gry, muzyka, itp. Używanie cite pomaga wyróżnić te tytuły od reszty tekstu, a także semantycznie informuje przeglądarki i czytniki ekranowe, że dany fragment tekstu jest odniesieniem do innego dzieła.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Odniesienia do źródeł w HTML</title>
</head>
<body>
<p>Jednym z moich ulubionych filmów jest <cite>Skazani na Shawshank</cite>,
który opowiada historię Andy'ego Dufresne.</p>
</body>
</html>
Podsumowanie
W tej lekcji omówiliśmy podstawowe elementy HTML służące do oznaczania cytowań, skrótów, adresów i odniesień do źródeł. Użycie tych elementów nie tylko poprawia czytelność i strukturę dokumentu, ale także przyczynia się do lepszej semantyki i dostępności treści.
- Cytaty (
blockquoteiq) pozwalają na wyraźne oznaczenie wypowiedzi z zewnętrznych źródeł, odpowiednio dla dłuższych fragmentów tekstów oraz krótkich wplecionych w zdania. - Skróty (
abbr) pomagają w zrozumieniu znaczenia skrótów i akronimów, oferując pełną formę w atrybucietitle. - Adresy (
address) służą do prezentacji informacji kontaktowych w sposób semantycznie poprawny. - Odniesienia do źródeł (
cite) umożliwiają wyróżnienie tytułów dzieł, podkreślając ich znaczenie w kontekście prezentowanej treści.
Zachęcamy do eksperymentowania z tymi elementami w swoich projektach HTML, aby tworzyć bogate, dobrze strukturyzowane i dostępne treści internetowe. Pamiętaj, że prawidłowe stosowanie elementów semantycznych nie tylko pomaga czytelnikom, ale również przyczynia się do lepszej optymalizacji pod kątem wyszukiwarek internetowych (SEO).
Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.