Elementy blokowe to takie fragmenty strony, które zajmują samodzielne miejsce, tzn, nie można ich umieścić obok siebie. Zawsze będą występowały jeden pod drugim.
W języku HTML jest wiele elementów blokowych. Poniżej zostaną one pokrótce przedstawione.

Akapity
<p>
Akapit jest podstawowym elementem zawierającym tekst i służy do wydzielania fragmentów zawierających jakąś myśl.
<p>treść akapitu</p>

Nagłówki <h1>...<h6>
Nagłówki służą do dzielenia tekstu na części, podobnie jak książka dzieli się na rozdziały. <h1> to nagłówek najwyższego poziomu, <h6> najniższego poziomu. Nagłówki różnią się od siebie wielkością i atrybutami czcionki.
<h1> nagłówek </h1>

Znacznik końca wiersza <br />
Służy do przełamywania wiersza i przenoszenia treści do następnego wiersza bez kończenia akapitu. Nowy wiersz jest wprowadzany bez dodatkowej interlinii. Znacznik końca wiersza jest pustym elementem, zatem nie może mieć żadnej zawartości i zamykającego znacznika </br>.

Linia pozioma <hr />

Służy do wizualnego oddzielania od siebie fragmentów strony www. Domyślnie linia zajmuje 100% szerokości strony.
<p>tekst</p>
<hr />
<p>tekst</p>

Listy
Jest kilka rodzajów list.
Lista wypunktowana
Tworzy się ją za pomocą znacznika <ul>, wewnątrz którego umieszcza się pozycje listy w znacznikach <li>.
<ul>
<li>pozycja 1
<li>pozycja 2
<li>pozycja 3
</ul>
W języku html nie jest wymagany znacznik zamykający , ale już w XHTML tak.
Lista numerowana
Tworzy się ją za pomocą znacznika <ol>, wewnątrz którego umieszcza się pozycje listy w znacznikach <li>, podobnie jak w liście wypunktowanej.
<ol>
<li>pozycja 1
<li>pozycja 2
<li>pozycja 3
</ol>

Lista definicji
Tworzy się ją za pomocą znacznika <dl>, wewnątrz którego umieszcza się nagłówek w znaczniku <dt> i pozycje listy w <dd>.
<dl>
<dt>nagłówek 1
<dd>pozycja 1
<dt>nagłówek 2
<dd>pozycja 2
</dl>

Lista zagnieżdżona
Zagnieżdżanie polega na umieszczaniu jednej listy wewnątrz drugiej.
<ul>nagłówek 1
<li>pozycja 1.1
<li>pozycja 1.2
<ul>nagłówek 1.2
<li>Pozycja 1.2.1
</ul>
<li>pozycja 1.3
</ul>

Tekst preformatowany <pre>
Tekst preformatowany to tekst napisany czcionką o stałej szerokości znaku. W tym elemencie uwzględniane są dodatkowe spacje, tabulatory i znaki końca linii. Tekst nie jest również automatycznie zawijany. Tekst między znacznikami <pre> i </pre> jest wyświetlany dokładnie tak, jak został zapisany w kodzie.
<pre> Tekst tekst
tekst</pre>

Blok cytowany
<blockquote>
Służy do oznaczania cytatów. Tekst zawarty między parą znaczników <blockquote> i </blockquote> ma jednakowe marginesy z lewej i prawej strony.
<blockquote> cytat </blockquote>

Adres <address>

Ten blok nie uwzględnia tabulatorów, dodatkowych spacji ani znaków końca linii. Najczęściej jest automatycznie napisany czcionką pochyłą. Pomiędzy znacznikami <address> i </address> mogą być jedynie elementy liniowe. Jeśli adres ma się składać z kilku linijek należy używać znacznika <br />.
<address>
Netstel Software <br />
ul. Zbożowa 3/18 <br />
Kraków
</address>

Blok dokumentu <div>
Znacznik <div> wydziela większy blok , np. fragment tekstu, a następnie można nadać mu jakiś rodzaj formatowania, np. wyśrodkowanie, kolor itd.
<div>
<h1> nagłówek</h1>
<p> krótki tekst</>
</div>

Obramowanie i grupowanie pól formularza <fieldset>
Służy do grupowania pól formularza i obramowania go. Wygląd takiego obramowania jest zależny od używanej przeglądarki. Efekt obramowania możemy uzyskać przy użyciu stylów CSS dlatego polecenie fieldset stosowane jest wraz ze znacznikiem <legend>, który nadaje tytuł ramki.
<fieldset>
<legend>formularz</legend>
<label for="imie">Imię: </label>
<input type="text" id="imie"><br>
<label for="nazwisko">Nazwisko: </label>
<input type="text" id="nazwisko"><br>
</fieldset>
fieldset.jpg