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
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.