1. Wprowadzenie do HTML
  2. Szybki start
  3. Podstawowy dokument HTML
  4. Paragraf
  5. Formatowanie tekstu
  6. Komentarze
  7. Kolory
  8. Atrybuty
  9. Lista
  10. Linki
  11. Obrazy
  12. Tabele
  13. Symbole
  14. Cytaty
  15. Elementy Blokowe
  16. Elementy Liniowe
  17. Klasy oraz Id
  18. Układ strony
  19. Responsywność
  20. Podsumowanie

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