Wydzielone bloki

Style możemy nadawać elementom dokumentu, posługując się bardzo elastycznym poleceniem bloku -  bardziej trafne jest w zasadzie określenie "warstwa", gdyż często wiąże się z pozycjonowaniem absolutnym elementów. Na sposób ten warto zwrócić szczególną uwagę, gdyż pozwala on bardzo elastycznie operować położeniem rozmaitych elementów na stronach. Warto zauważyć, że w ostatnich latach wydatnie zmniejszyła się rola ramek i tabel na stronach internetowych, zaś fachowcy coraz śmielej zalecają stosowanie warstw.

Na blokach div opiera się właśnie niniejsza część kursu HTML - są to trzy warstwy tworzące nagłówek, lewy panel nawigacyjny i część główną.

Blok wydzielamy za pomocą polecenia <div> </div>. Fragment dokumentu objęty blokiem możemy w swobodny sposób formatować za pomocą stylów. Możemy sobie wyobrazić, że w części nagłówkowej dokumentu znajdą się klasy tytułów czy akapitów, natomiast w bloku utworzonym doraźnie w dokumencie zdefiniujemy czcionki, barwy itp., a także powołamy się na klasy z nagłówka.

Przykład bloku ze stylami zdefniowanymi bezpośrednio w bloku:

<div style=""font-family: verdana, arial; color: olive; position: relative; left: 100px; width: 550px; ">
Fragment dokumentu objęty blokiem (tytuł, akapit i wykaz)
</div>

Przykład bloku ze stylami zdefiniowanymi w części nagłówkowej dokumentu:

Zakładamy, że w nagłówku (albo w arkuszu dołączanym lub importowanym) utworzyliśmy klasę o nazwie notatka.

.notatka {font-family: verdana, arial; font-weight: bold; color: blue; margin-left: 10%; margin-right: 10%; }

A teraz skorzystamy z tego stylu, wydzielając jakiś fragment dokumentu blokiem i przypisując mu klasę notatka:

<div class="notatka">
fragment dokumentu objęty blokiem
</div>

Wydzielane bloki są podobne w działaniu do span, ale obejmują szersze fragmenty dokumentu. Mogą zawierać w sobie tytuły, akapity, wykazy, a nawet inne bloki. Dzięki temu nadają się do wydzielania większych, logicznych fragmentów dokumentów i nadawania im specyficznego formatowania za pomocą stylów. W ostatnich latach służą wręcz do tworzenia całych layoutów stron internetowych