Odstavec v HTML

U webových stránek bývá zvykem, že delší text bývá pro lepší přehlednost členěn do odstavců. Slouží k tomu bloková značka <p> (p pochází z anglického paragraph = odstavec).

Zápis odstavců

<p>
  Text v odstavci.
</p>

Odstavec má v HTML nepovinnou uzavírací značku – automaticky se uzavře o jiný blokový element. To může způsobovat problémy, protože se tak odstavec může uzavřít jinde, než autor stránky zamýšlel.

V následujícím příkladu bude odstavec ukončen seznamem <ul> a ukončovací značka „</p>bude ignorována.

<p>
  Text v odstavci.
  <ul>
    <li>Pokus o položku seznamu v odstavci
  </ul>
  Domnělé pokračování odstavce
</p>

Stejně tak dokáže odstavec předčasně ukončit i značka <div>, nadpisy <h1–6>, seznamy, tabulky, bloková citace, další spousta značek a nebo jiný odstavec – není tedy možné vytvořit odstavec v odstavci.

<p>První odstavec
<p>Druhý odstavec ukončí ten první

Pokud je potřeba stylovat blok, kde má být text i například seznam, nezbývá než použít jako obal element <div>.

Blokový element v HTML a CSS

Je rozdíl mezi blokovým elementem v HTML a blokovou hodnotou block u CSS vlastnosti display.

Zda nějaká značka odstavec ukončí, není závislé na CSS. Pro vložení visuálního bloku do odstavce jde tedy použít řádkovou značku – např. <span> – a nastavit ji display: block.

<p>
  Text v odstavci.
  <span style="display: block">
    Jako blok.
  </span>
  Pokračování odstavce.
</p>

Atributy odstavce

Odstavec podporuje pouze obecné atributy. K tomu navíc:

align

Dřívější HTML specifikace uváděly atribut align pro zarovnání obsahu v odstavci. Atribut stále funguje, jde nahradit CSS vlastností text-align. V HTML5 je nevalidní.

Odstavec zarovnaný vlevo (výchozí chování).

Odstavec zarovnaný vpravo.

Odstavec zarovnaný na střed.

Styl odstavce

Ve výchozích stylech má odstavec horní a dolní odsazení (CSS vlastnost margin).

Symbolický zápis:

p {
  margin: 1em 0;
}

Při umístění dvou odstavců za sebou se potom odsazení tzv. slévá. Tj. mezi dvěma odstavci nebude mezera 2em, ale jen 1em, protože se v takovém případě používá hodnota rovna vyššímu marginu z obou elementů.

CSS reset

Řada tvůrců u stránek odsazení odstavce resetují na nulu.

/* spousta elementů*/, 
p {
  margin: 0;
}

A následně si odsazení nastavují podle umístění odstavce.

V praxi se nezdá být problém odstavci globálně vůbec nic nenastavovat a ponechat mu výchozí hodnoty, které jsou zpravidla použitelné.

Odsazení prvního řádku

U textů v českých knihách nebo novinách bývá zvykem, že se odstavec tvoří odsazením začátku řádku:

Příklad odstavců v novinách

Na webu není potřeba šetřit papírem a místem, takže styl odstavců zpravidla sestává z horního a dolního odsazení realisované CSS vlastností margin.

První odstavec.

Druhý odstavec.

Případné odsazení prvního řádku jde ale snadno vytvořit vlastností text-indent.

Delší první odstavec, který je přes více řádků. První řádek odstavce je odsazen pomocí CSS.

Krátký odstavec.

Občas se toto odsazování ještě vylepšuje tak, že se zleva neodsazuje první odstavec po nadpisu nebo jiném bloku; jde toho docílit CSS selektorem přímého sourozence (funkční od IE 7).

p + p {
 text-indent: 1em;
}

Zleva bude odsazen pouze odstavec, který následuje po odstavci. Ukázka.

Text mimo odstavec

Odsazení odstavce se často hodí, takže je docela pohodlné do něj obalovat jakýkoliv text. Třeba položky formuláře:

<p>
  <label>Jméno: <input name="jmeno"></label>
</p>

Striktní specifikace HTML 4.01 dokonce zakazovala do některých kontextů obsah bez použití odstavce vůbec umístit.

Třeba při vložení prostého textu přímo do <body>:

Zakázaný text mimo odstavec

„Ruční“ tvoření odstavce

Simulovat podobu odstavců jde teoreticky zalomením řádku značkou <br>.

Text
<br><br>
Další text

Výsledek se potom vzhledově blíží k použití odstavců:

Text

Další text

Jedná se ale o nouzové řešení, když není možné odstavec použít, jinak je dobré se tomu vyhnout.

Značka <br> by se nikdy neměla používat k visuálnímu odsazování, ale skutečně jen k zalomení.

Odsazení odstavcem

Vytvářením prázdných odstavců jde rychle zvyšovat svislý odstup mezi částmi webu.

Dosahuje se toho prázdným odstavcem s pevnou mezerou &nbsp;:

<p>&nbsp;</p>

Občas takový kód leze z WYSIWYG editorů. V praxi je dobré se tomu vyhnout – takové „odsazení“ je do budoucna většinou špatně udržovatelné.

Obsah.

 

 

Další obsah odsazený odstavci.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Podmíněné komentáře pro IE

Podmíněné komentáře pro Internet Explorer

Jak rychle a snadno hackovat HTML a CSS v různých historických versích Internet Exploreru.

Tag <label> a atribut for

Značka <label> a atribut for

Značka <label> slouží ke svázání popisku s formulářovým prvkem. Kdy použít atribut for?

Doctype

HTML značka <!doctype>

Jaký (a jestli vůbec) psát <!doctype> do stránky?

Značka <base href>

HTML značka <base>

K čemu využít a na co si dát pozor u HTML tagu <base>?

Meta tag viewport

Značka <meta name=viewport>

K čemu používat <meta> tag name=viewport.

Komentáře