Textový element

<p>

Odstavec. Nejběžnější element na webu, nese většinu textu.

V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.

Zápis

Odstavec je párový tag

Text odstavce patří mezi <p> a </p>. Pozor na jednu věc: prohlížeč ignoruje zalomení řádků a vícenásobné mezery v kódu.

V náhledu je to jeden souvislý řádek. Řádky se zalamují podle šířky okna, ne podle kódu.

Zápis

Nový odstavec, nový p

Každý odstavec má vlastní p. Prázdný řádek se nedělá pomocí <br><br>.

Element br zalomí řádek uvnitř odstavce. Hodí se jen tam, kde zalomení patří k obsahu: v adrese nebo v básni.

br je nepárový tag, nemá zavírací tag.

Atributy

Jazyk odstavce

Odstavec má jen globální atributy. Užitečný je lang: když je odstavec v jiném jazyce než zbytek stránky, screen reader ho přečte se správnou výslovností.

Styl

Text, který se dobře čte

Tři vlastnosti rozhodují o čitelnosti: velikost písma, řádkování a délka řádku.

65 znaků na řádek, řádkování 1,7násobek písma. Podrobněji v lekci Úzký sloupec.

Styl

Úvodní odstavec

První odstavec článku, takzvaný perex, bývá větší a uvádí celý text. Dostane třídu lead.

Responzivita

Odstavce na telefonu

Na úzkém displeji zmenšíme písmo a zapneme dělení slov. Řádky pak nemají velké mezery a dlouhá česká slova se rozdělí podle pravidel.

Dělení slov funguje díky jazyku stránky v <html lang="cs">. Bez něj by prohlížeč nevěděl, podle jakých pravidel dělit.

Shrnutí

Jak psát odstavce

Ano

• každý odstavec ve vlastním p
• br jen tam, kde zalomení patří k obsahu
• čitelnost: písmo, řádkování, délka řádku

Ne

• prázdné řádky pomocí <br><br>
• prázdný <p></p> jako mezera

Další: <a> →