W tej części lekcji dowiesz się, jak tworzyć nagłówki i paragrafy w dokumencie HTML. Nagłówki służą do wyróżnienia ważnych tytułów i nagłówków sekcji na stronie, podczas gdy paragrafy pozwalają na organizowanie tekstu w spójne bloki. Ponadto, nauczysz się używać znaczników tekstowych, takich jak <strong> i <em>, aby wyróżnić treści i nadać im odpowiednią wagę.
Tworzenie Nagłówka za pomocą znacznika <h1>:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dodawanie Nagłówka i Paragrafów</title>
</head>
<body>
<h1>Witaj na Mojej Stronie!</h1>
<p>To jest przykład użycia znacznika h1 do stworzenia nagłówka strony.</p>
</body>
</html>
W tym przykładzie użyliśmy znacznika <h1> do stworzenia nagłówka głównego strony. Znacznik ten nadaje tekstowi większą wagę i wyświetla go w większym rozmiarze czcionki.
Dodawanie Paragrafów przy użyciu znacznika <p>:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dodawanie Nagłówka i Paragrafów</title>
</head>
<body>
<h1>Witaj na Mojej Stronie!</h1>
<p>To jest przykład użycia znacznika p do stworzenia paragrafu.</p>
<p>Możesz dodać więcej paragrafów, aby zorganizować treść strony.</p>
</body>
</html>
W tym przykładzie użyliśmy znacznika <p> do stworzenia dwóch paragrafów. Znacznik ten tworzy nowy blok tekstu, co pomaga w czytelności i organizacji treści.
Wykorzystanie znaczników tekstowych <strong> i <em>:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dodawanie Nagłówka i Paragrafów</title>
</head>
<body>
<h1>Witaj na Mojej Stronie!</h1>
<p>To jest <strong>ważny</strong> tekst, który jest wyróżniony jako ważny.</p>
<p>Tutaj używamy <em>kursywy</em> do podkreślenia pewnych słów.</p>
</body>
</html>
W tym przykładzie użyliśmy znacznika <strong> do wyróżnienia tekstu jako ważnego oraz znacznika <em> do nadania kursywy. Te znaczniki pomagają nadać odpowiednie znaczenie i wyróżnić pewne fragmenty tekstu na stronie.
O czym pamiętać dodając nagłówki i paragrafy?
Istnieje kilka dodatkowych kwestii, które warto wiedzieć na temat dodawania nagłówków i paragrafów w HTML, aby tworzyć bardziej czytelny i semantycznie poprawny kod:
- Hierarchia nagłówków: Nagłówki w HTML mają hierarchiczną strukturę, zaczynając od
<h1>(najważniejszy) i schodząc w dół do<h6>(najmniej ważny). Zaleca się stosowanie tej hierarchii w sposób logiczny, aby poprawić dostępność i semantykę strony. - Unikaj nadmiernego używania nagłówków: Nie używaj nagłówków tylko dla zwiększenia rozmiaru czcionki lub wizualnego efektu. Nagłówki powinny odzwierciedlać strukturę treści i nadawać jej hierarchię.
- Paragrafy dla tekstu: Zawsze umieszczaj tekst w paragrafach za pomocą znacznika
<p>. Unikaj umieszczania nagłówków wewnątrz paragrafów, zamiast tego stosuj je jako osobne elementy. - Znaczniki tekstowe: Znaczniki
<strong>i<em>służą nie tylko do wyróżniania tekstu wizualnie, ale także do nadawania znaczenia semantycznego.<strong>oznacza tekst jako ważny lub istotny, podczas gdy<em>oznacza tekst jako akcentowany lub skupiający uwagę. - Zgodność z HTML5: Współczesne strony internetowe powinny stosować standardy HTML5 i elementy semantyczne, takie jak
<header>,<nav>,<section>,<article>,<footer>itp., aby poprawić strukturę i znaczenie treści. - Wspieranie wersji językowych: Przy użyciu atrybutu
lang, możesz wskazać język strony, co jest ważne dla dostępności i indeksowania przez wyszukiwarki, zwłaszcza na wielojęzycznych stronach. - Pamiętaj o spójności: Staraj się zachować spójność stylu i formatowania nagłówków oraz paragrafów na stronie, aby tworzyć estetycznie przyjemne i czytelne treści.
- Praktykuj semantykę: Stosowanie odpowiednich znaczników znacznie poprawia semantykę strony, co wpływa na SEO i dostępność. Dlatego zawsze wybieraj odpowiednie znaczniki do opisywania treści.
