3.1 Element <p>
Elementy blokowe w HTML są używane do tworzenia struktury i organizacji zawartości strony internetowej. Pomagają podzielić treść na logiczne bloki i segmenty. Te elementy zaczynają nową linię i zajmują całą dostępną szerokość. Przeanalizujmy szczegółowo trzy często używane tagi: <p>, <div>, i <span>.
Tag <p>
Tag <p> jest używany do tworzenia akapitów tekstu. Jest to element blokowy: oznacza to, że każdy akapit zaczyna się nową linią i ma odstępy na górze i na dole.
Przykład użycia:
<p>
To pierwszy akapit tekstu. Akapity są używane do podziału tekstu na logiczne bloki,
poprawiając jego czytelność.
</p>
<p>To drugi akapit tekstu. Każdy akapit zaczyna się nową linią.</p>
Właściwości:
- Element blokowy: Umieszczony na nowej linii i zajmuje całą dostępną szerokość.
- Automatyczne odstępy: Zwykle przeglądarki dodają odstępy przed i po akapicie.
- Zagnieżdżenie: Tag
<p>nie może zawierać innych elementów blokowych.
Stylizacja za pomocą CSS:
p {
color: #333;
font-size: 16px;
line-height: 1.5;
margin-bottom: 15px;
}
3.2 Element <div>
Tag <div> jest uniwersalnym kontenerem blokowym, który jest używany do grupowania innych elementów i stosowania do nich stylów. Nie posiada wbudowanych stylów i jest używany wyłącznie do strukturyzacji treści.
Przykład użycia:
<div class="container">
<h2>Nagłówek bloku</h2>
<p>Jakiś tekst wewnątrz bloku div.</p>
</div>
Właściwości:
- Element blokowy: umieszczony na nowej linii i zajmuje całą dostępną szerokość
- Uniwersalność: może zawierać dowolne inne elementy, w tym blokowe i liniowe
- Stylizacja i skrypty: często używany do stosowania stylów CSS i skryptów JavaScript
Stylizacja za pomocą CSS:
.container {
border: 1px solid #ccc;
padding: 20px;
background-color: #f9f9f9;
}
3.3 Element <span>
Tag <span> jest elementem liniowym i jest używany do wyróżnienia części tekstu lub innej zawartości wewnątrz elementów blokowych. Nie posiada wbudowanych stylów i służy do stosowania stylów CSS i skryptów JavaScript do określonych części tekstu.
Przykład użycia:
<p>Ten tekst zawiera wyróżnione <span class="highlight"> słowo</span>, które różni się od reszty tekstu.</p>
Właściwości:
- Element liniowy: nie tworzy nowej linii i zajmuje tylko niezbędną szerokość
- Elastyczność: używany do stosowania stylów do pojedynczych części tekstu lub innych elementów
- Często używany w połączeniu z CSS i JavaScript: pomaga dokładnie stylizować lub manipulować częściami tekstu
Stylizacja za pomocą CSS:
.highlight {
color: red;
font-weight: bold;
}
3.4 Porównanie <div> i <span>
<div>:
- Element blokowy
- Zaczyna się od nowej linii
- Może zawierać inne elementy blokowe i liniowe
- Używany do grupowania i strukturyzacji treści
<span>:
- Element liniowy
- Nie narusza przepływu tekstu
- Używany do stylizacji pojedynczych części tekstu
- Często stosowany do wyróżnienia i pracy z JavaScript
Przykład połączonego użycia <div> i <span>:
.article {
border: 1px solid #ddd;
padding: 10px;
}
.keyword {
color: blue;
font-style: italic;
}
<div class="article">
<h2>Nagłówek artykułu</h2>
<p>
To akapit tekstu artykułu z kluczowym <span class="keyword">słowem</span>, które jest wyróżnione, aby przyciągnąć uwagę.
</p>
</div>
Tagi <p>, <div> i <span> są podstawowymi elementami budulcowymi HTML, które umożliwiają tworzenie strukturalnych, stylizowanych i interaktywnych stron internetowych. Zrozumienie ich cech i poprawne użycie pomaga tworzyć użyteczne i funkcjonalne interfejsy.
GO TO FULL VERSION