Elementy blokowe
Elementy blokowe to elementy, które mają domyślnie ustawioną szerokość na 100% i zawsze zaczynają się od nowej linii. Oznacza to, że element blokowy zajmuje całą dostępną szerokość w bloku, w którym się znajduje, niezależnie od długości zawartości.
W HTML istnieją następujące elementy blokowe:
<address>
- definiuje sekcję z informacjami kontaktowymi autora strony.<article>
- definiuje artykuł lub sekcję artykułu.<aside>
- definiuje sekcję obok treści głównej, z informacjami pobocznymi.<blockquote>
- definiuje dłuższy cytat, zazwyczaj poprzedzony wcięciem.<canvas>
- umożliwia rysowanie grafiki wewnątrz elementu HTML.<div>
- definiuje sekcję lub blok kodu, który może być stylizowany za pomocą CSS.<dl>
- definiuje listę opisową, składającą się z par "term" i "definition".<fieldset>
- definiuje grupę elementów formularza.<figcaption>
- definiuje podpis dla elementu <figure>.<figure>
- definiuje ilustrację lub rysunek, z opcjonalnym podpisem.<footer>
- definiuje stopkę strony.<form>
- definiuje formularz, w którym użytkownik może wprowadzać dane.<h1>
-<h6>
- definiuje nagłówki poziomu 1-6.<header>
- definiuje nagłówek strony lub sekcji.<hr>
- definiuje linię poziomą.<li>
- definiuje element listy.<main>
- definiuje główną treść strony.<nav>
- definiuje nawigację strony.<ol>
- definiuje uporządkowaną listę.<p>
- definiuje akapit.<pre>
- definiuje wstępnie sformatowany tekst.<section>
- definiuje sekcję strony.<table>
- definiuje tabelę.<tfoot>
- definiuje stopkę tabeli.<ul>
- definiuje nieuporządkowaną listę.
Prosty blog wykorzystujący elementy blokowe
<div id="header">
<h1>Mój blog</h1>
</div>
<div id="main">
<p>Witaj na moim blogu! Na tej stronie znajdziesz ciekawe artykuły o różnych tematach.</p>
<div id="articles">
<h2>Artykuły</h2>
<ul>
<li>Jak zacząć swoją przygodę z programowaniem</li>
<li>10 sposobów na poprawienie swojej produktywności</li>
<li>Jak zdobyć pierwszy milion?</li>
</ul>
<h2>Najnowsze artykuły</h2>
<ol>
<li>Jak zdobyć pierwszy milion?</li>
<li>10 sposobów na poprawienie swojej produktywności</li>
<li>Jak zacząć swoją przygodę z programowaniem</li>
</ol>
</div>
</div>
<div id="sidebar">
<h2>Kategorie</h2>
<table>
<tr>
<th>Kategoria</th>
<th>Liczba artykułów</th>
</tr>
<tr>
<td>Programowanie</td>
<td>5</td>
</tr>
<tr>
<td>Produktywność</td>
<td>3</td>
</tr>
<tr>
<td>Biznes</td>
<td>2</td>
</tr>
</table>
<h2>Newsletter</h2>
<img class="icon-img-50px" src="/img/Icons/icon_book.png" alt="">
<form>
<label for="email">Podaj swój adres email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Zapisz się">
</form>
</div>
<div id="footer">
<p>Copyright © 2021 Mój blog</p>
</div>
Mój blog
Witaj na moim blogu! Na tej stronie znajdziesz ciekawe artykuły o różnych tematach.
Artykuły
- Jak zacząć swoją przygodę z programowaniem
- 10 sposobów na poprawienie swojej produktywności
- Jak zdobyć pierwszy milion?
Najnowsze artykuły
- Jak zdobyć pierwszy milion?
- 10 sposobów na poprawienie swojej produktywności
- Jak zacząć swoją przygodę z programowaniem
Notatka
Elementy blokowe są bardzo ważne, ponieważ umożliwiają tworzenie struktury i układu strony. Mogą być używane do tworzenia kompleksowych i pięknych stron internetowych, które są łatwe do nawigacji i przeglądania.