Textový element

<code>

Kód. Úryvek zdrojového kódu v textu nebo celý blok kódu.

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

Zápis

Kód uvnitř věty

code označí kus kódu v textu: název elementu, vlastnosti nebo příkazu. Prohlížeč ho zobrazí neproporcionálním písmem.

Zápis

Blok kódu

Víceřádkový kód patří do pre. Ten zachová mezery a zalomení řádků přesně tak, jak jsou v HTML. Uvnitř je code, který říká, že jde o kód.

pre je jediné místo, kde záleží na odsazení v HTML. Každá mezera se zobrazí.

Pozor

Jak ukázat HTML tag

Když do code napíšete <p>, prohlížeč z toho udělá skutečný odstavec. Znaky < a > se proto zapisují jako entity.

< je „menší než“ (less than), > „větší než“ (greater than).

Příbuzní

Klávesy: kbd

Pro klávesy a klávesové zkratky je element kbd. Vypadá podobně jako code, ale říká „tohle stiskněte“.

Styl

Kód v textu

Kód v textu dostane jemný podklad, aby byl vidět, ale nerušil. Klávesy vypadají jako klávesy.

Styl

Blok kódu

Blok kódu dostane vlastní podklad a padding. code uvnitř pre už podklad nepotřebuje, ten má celý blok.

Problém

Dlouhý řádek na telefonu

Přidáme do bloku delší řádek. pre řádky nezalamuje, a tak na telefonu přeteče přes okraj a s ním se rozjede celá stránka.

Responzivita

Blok, který se dá posunout

overflow-x: auto nechá dlouhý řádek uvnitř bloku a přidá vodorovný scrollbar. Stránka zůstane v pořádku a kód se dá posunout prstem do strany.

Kód se nezalamuje schválně. Zalomený řádek kódu by mohl změnit význam nebo by se špatně četl.

Shrnutí

Kdy použít code

Ano

• názvy elementů, vlastností a příkazů v textu
• pre + code pro bloky kódu
• kbd pro klávesy

Ne

• < a > přímo v kódu, patří tam entity
• blok kódu bez overflow-x: auto

Další: <form> →