Každý prvek HTML má výchozí způsob zobrazení v závislosti na typu prvku.

Dva nejběžnější způsoby zobrazení jsou blokový způsob (block) a vložený způsob (inline).

Prvky zobrazované v bloku

Prvek zobrazovaný v bloku vždy začíná na novém řádku a prohlížeč před a za prvek automaticky přidá mezeru (okraj).

Prvek zobrazovaný v bloku vždy zabírá celou dostupnou šířku (roztahuje se doleva a doprava, jak nejvíce to jde).

Dva běžně používané blokové prvky jsou: <p> a <div>.

Prvek <p> definuje odstavec v dokumentu HTML.

Prvek <div> definuje rozdělení nebo sekci v dokumentu HTML.

Toto je blokový prvek. Je uzavřen mezi <div class="paragraph"> a </div>.

Prvek <div>

Prvek <div> se často používá jako kontejner pro jiné HTML prvky.

Prvek <div> nemá žádné povinné atributy, avšak style, class a id se často vyskytují.

Když je <div> použitý společně s CSS, tak může být použit jako blokový provek.

Další blokové prvky

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<filedset>
<figcaption>
<figure>
<footer>
<form>
<h1> až <h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

Vkládané prvky

Vkládaný prvek nezačíná na začátku řádky.

Vkládaný prvek je co nejméně široký.

Text: "co nejméně široký" je uvnitř vkládaného prvku <strong> a </strong>

Prvek <span>

Prvek <span> je řádkový kontejner, který se používá k označení části textu nebo částí dokumentu.

U prvku <span> nejsou povinné stributy, ale style, class a id se často vyskytují.

Když je <span> použitý společně s CSS, tak se používá ke stylování částí textu.

Další vkládáné prvky

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
Poznámka: Vkládaný prvek nemůže obsahovat blokový prvek.

Příklady

Příklad <div>
<!DOCTYPE html>
<html lang="cs">
    <head>
	<title>Stylování seznamu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        </head>
    <body>
    <h1>Příklad &lt;div&gt;</h1> (1)
    <div style="background-color:black;color:white;padding:20px">
    <h2>Nadpis2</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    </p>
    <p>
    Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
    </p>
    <p>
    Aliquam ut porttitor leo a.
    </p>
    <p>
    Turpis egestas integer eget aliquet nibh.
    </p>
    <p>
    Morbi tincidunt augue interdum velit euismod.
    </p>
    </body>
</html>
1 Všimněte si &lt; udělá v dokumentu < a &gt; udělá v dokumentu >.

block1.html

Příklad <span>
<!DOCTYPE html>
<html lang="cs">
    <head>
	<title>Stylování seznamu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        </head>
    <body>
    <h1>Příklad &lt;div&gt; &lt;span&gt;</h1>
    <div style="background-color:black;color:white;padding:20px">
    <h2>Nadpis2</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    </p>
    <p>
    Nulla posuere <span style="color:tomato;">sollicitudin aliquam</span> ultrices sagittis orci a.
    </p>
    <p>
    Aliquam ut porttitor leo a.
    </p>
    <p>
    Turpis egestas integer eget aliquet nibh.
    </p>
    <p>
    Morbi tincidunt augue interdum velit euismod.
    </p>
    </body>
</html>

block2.html