Bloki HTML i elementy wbudowane
Każdy element HTML ma domyślną wartość wyświetlaną, w zależności od typu elementu.
Istnieją dwie wyświetlane wartości: blokowa i inline.
Elementy blokowe
Element blokowy zawsze zaczyna się w nowej linii.
Element blokowy zawsze zajmuje całą dostępną szerokość (rozciąga się w lewo iw prawo tak daleko, jak to możliwe).
Element na poziomie bloku ma górny i dolny margines, podczas gdy element śródliniowy nie.
Przykład
<div>Hello World</div>
Oto elementy blokowe w HTML:
Elementy wbudowane
Element inline nie zaczyna się w nowym wierszu.
Element śródliniowy zajmuje tylko tyle szerokości, ile jest to konieczne.
To jest element <span> wewnątrz akapitu.
Przykład
<span>Hello World</span>
Oto elementy wbudowane w HTML:
Uwaga: Element wbudowany nie może zawierać elementu blokowego!
Element <div>
Element <div>jest często używany jako kontener dla innych elementów HTML.
Element <div>nie ma wymaganych atrybutów, ale stylei classsą idwspólne.
W połączeniu z CSS <div>element może być używany do stylizowania bloków treści:
Przykład
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
Element <span>
Element <span>jest wbudowanym kontenerem używanym do oznaczania części tekstu lub części dokumentu.
Element <span>nie ma wymaganych atrybutów, ale stylei classsą idwspólne.
W połączeniu z CSS <span>element może służyć do stylizowania części tekstu:
Przykład
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes
and my father has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>
Podsumowanie rozdziału
- Dostępne są dwie wartości wyświetlane: blok i inline
- Element blokowy zawsze zaczyna się w nowej linii i zajmuje całą dostępną szerokość
- Element śródliniowy nie zaczyna się w nowej linii i zajmuje tylko tyle szerokości, ile to konieczne
- Element
<div>jest na poziomie bloku i jest często używany jako kontener dla innych elementów HTML - Element
<span>jest wbudowanym kontenerem używanym do oznaczania części tekstu lub części dokumentu
Tagi HTML
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
Pełną listę wszystkich dostępnych tagów HTML można znaleźć w naszym podręczniku HTML Tag Reference .