HTML odstavec
HTML značka <p> slouží k uspořádávání textu do odstavců.
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
alignpro 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:
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>:
„Ruční“ tvoření odstavce
Simulovat podobu odstavců jde teoreticky zalomením řádku značkou <br>.
Text
<br><br>
Další textVýsledek se potom vzhledově blíží k použití odstavců:
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 :
<p> </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.
Komentáře