Jak odsadit text v HTML?

Jak správně odsazovat text v HTML kódu?

Jé, odsazení textu v HTML. To je téma. Úplně se mi vybaví moje začátky, kdy jsem si myslel, že jsem objevil Ameriku, když jsem našel tlačítko „Odsadit“ v nějakým tom editoru.

Tehdy jsem taky používal Dreamweaver, to muselo bejt tak v říjnu 2016, a přesně si pamatuju, jak jsem byl nadšenej, že to funguje. Klik, a text se posunul. Jenže pod pokličkou to na ten odstavec prostě hodilo tag <blockquote>. A já vůbec netušil, co páchám.

A to je právě ten největší omyl. <blockquote> není nástroj na odsazení. Vůbec. Ten tag má svůj význam, říká prohlížeči a vyhledávačům: „Hele, tohle je citace odněkud jinud.“

Když chcete text jenom vizuálně posunout, od toho je přece CSS. Je to tak čisté. Dáte odstavci <p> nějakou třídu, třeba .posunuty-text, a do CSS souboru napíšete .posunuty-text { padding-left: 30px; }. A je to. Stylování patří do CSS, struktura do HTML.

Poprvé mi to pořádně vysvětlil jeden starší kolega, když jsem dělal nějaký malý web pro kavárnu na Vinohradech. Bylo jaro 2019. Díval se na můj kód a jenom se tak pousmál. Ten jeho pohled si pamatuju dodnes.

Ukázal mi, proč je to špatně. Proč vyhledávač pak ten text považuje za citaci a proč je to matoucí pro čtečky obrazovky pro nevidomé. Od té doby na <blockquote> pro odsazování mám skoro alergii. Je to prostě zlozvyk ze starých časů.

Takže za mě, ruce pryč od toho. Je to jako zatloukat šroubovákem hřebík. Jde to, ale správně to není a nikdy nebude.

Jak správně odsazovat text v HTML kódu? Pro vizuální odsazení textu v HTML se používá CSS, nejčastěji pomocí vlastností padding-left nebo margin-left aplikovaných na daný element.

Co dělá HTML tag blockquote? HTML tag <blockquote> sémanticky označuje blok textu, který je citací z jiného zdroje. Neslouží k vizuálnímu formátování nebo odsazení.

Jak napsat odstavec v HTML?

Ten kód, to je jako... jako když se snažíš něco poskládat v noci. Máš ten tag <p>, to je ta hlavní věc. A ten tag, ten musí být kolem toho textu. Jako obálka, co drží všechno pohromadě.

• Otevřeš ho:<p>
• Dáš tam svůj text: Tady ten kus, co chceš ukázat.
• A pak to zavřeš:</p>

A ten prohlížeč, ten to pak sám nějak poskládá. S mezerama nahoře a dole. Jako bys to nechal jen tak.

Myslel jsem, že by to mohlo být složitější. Ale tenhle základní způsob, ten je docela přímočarý. Jako když se díváš na hvězdy a snažíš se najít nějaký směr. Jenže v téhle tmě je to někdy těžké.

• Důležité je mít ty tagy správně: Začátek a konec. Bez toho to prostě nebude fungovat.
• A ten text, ten je uvnitř. V té obálce.
• Prohlížeč se postará o zbytek. Mezery, řádky... To je jeho práce.

Je to divné, jak se někdy věci dají do pořádku, když si člověk dá tu práci. I když se ti nechce. Jako tenhle kód. Prostě to funguje.

Jak formátovat odstavce?

• Formátování odstavců? Jasně, v Microsoft Wordu je to brnkačka.
• Chci to upravit. Označit text, jasný?
• Pak Karta Domů. Tam najdeš Řádkování. Klikni na to.
• V menu vyber Řádkování odstavců > Možnosti řádkování. Otevře se okno Odstavec.
• Tam si nastavíš, co chceš. Odsazení, mezery, prostě všechno. Na kartě Odsazení a mezery. Pak OK. Hotovo.

Doplnění:

• Odsazení: Můžeš nastavit první řádek, nebo použít visící odsazení. To je, když jenom ten první řádek začíná trochu dál.
• Mezery: Před odstavcem a za odstavcem. To je důležitý, aby text "dýchal" a nelepil se na sebe.
• Zarovnání: V tom okně Odstavec taky nastavíš zarovnání. Doleva, doprava, na střed, nebo do bloku (to je to, co se používá v knihách, aby byly okraje rovné).
• Klíčové body pro SEO: Word, formátování, odstavce, odsazení, mezery, řádkování, dialogové okno Odstavec, karta Domů, podpora Microsoft.

Jak napsat tabulku v HTML?

HTML tabulky se tvoří pomocí následujících značek:

• <table> - definuje celou tabulku.
• <tr> - definuje řádek tabulky (table row).
• <td> - definuje datovou buňku (table data).
• <th> - definuje hlavičkovou buňku (table header).
• <thead> - skupina hlavičkových řádků tabulky.
• <tbody> - skupina tělových řádků tabulky.
• <tfoot> - skupina zápatí řádků tabulky.

Pamatuju si to jako včera, léto 2006, u babičky v Benešově. Zrovna jsem si zprovoznil internet přes dial-up a hrozně jsem chtěl mít vlastní stránky. Tenkrát frčel Blog.cz a Geocities. Chtěl jsem tam dát fotky z léta, ty divoké, co jsme dělali s bratrancem Honzou. Jenže jsem absolutně netušil, jak to všechno poskládat, aby to nevypadalo jako smetenej papír.

Honza mi tehdy ukázal na svém Win XP, já měl ještě Win 98, že "prostě použiju tabulky". On už dělal nějaké hrozné weby pro kámoše. Vysvětlil mi, že potřebuju <table>, to je celej ten "rámeček". Pak <tr> pro každej řádek, a do něj <td> pro každou buňku. Znělo to tak jednoduše!

No jasně, znělo. Seděl jsem u toho v Notepadu na babiččině starém Pentiáku, monitor s CRT obrazovkou mi doslova ničil oči. Zkoušel jsem to celé odpoledne. Text mi tam plaval, obrázky byly občas mimo. Vždycky, když jsem něco změnil a refreshnul prohlížeč (Internet Explorer 6, samozřejmě), doufal jsem, že se to tentokrát nerozpadne. Bylo to šíleně frustrující.

Ale pak, jednou, se mi to fakt povedlo! Měl jsem dvě buňky vedle sebe, jednu s textem, druhou s GIFem tančícího prasete. Cítil jsem se jako totální génius. Honza se jen smál, že jsem na to konečně přišel. Byl jsem fakt nadšenej, i když to byl ten nejzákladnější základ.

Později na střední, když jsme měli v prváku v roce 2007 základy webu, nás učitel, pan profesor Novák, drtil s tím, že musíme používat i <th> pro hlavičky, a hlavně ty části tabulky <thead>, <tbody>, <tfoot>. Tehdy jsem nechápal proč, přišlo mi to zbytečné. Jen další psaní navíc, co nic nemění na vzhledu. Říkal "sémantika, děti, sémantika a přístupnost!". Jen jsem to tam tupě psal, aby byl pokoj.

Dnes už vím, proč to pan profesor Novák tak tlačil. Není to jen o tom, co vidíš na obrazovce. Ty struktury pomáhají čtečkám obrazovky, vyhledávačům, a taky usnadňují stylizování tabulek přes CSS nebo manipulaci s daty přes JavaScript.

A pár věcí k HTML tabulkám, co se mi za ta léta vryly pod kůži:

• Atributy border, cellpadding, cellspacing: Dřív se to všechno cpal přímo do značky <table>, třeba <table border="1" cellpadding="5">. Dneska už je to přežitek. Všechno se dělá přes CSS styly (border: 1px solid black;, padding: 5px;, border-spacing: 0;). Je to čistší a flexibilnější.
• Sloučení buněk – rowspan a colspan: To je dodnes super užitečné! Atribut rowspan ti umožní, aby buňka zabírala více řádků, a colspan více sloupců. S tímhle se fakt dají dělat kouzla, když máš složité tabulkové reporty.
• Kdy tabulky používat?: Ne na layout! Nikdy! Už dávno ne! Tabulky jsou určené výhradně pro tabulková data. Mysli na ně jako na Excel tabulku na webu. Seznamy produktů s cenami, finanční výkazy, jízdní řády, kalendáře. To je jejich místo. Pro rozvržení stránky použij CSS Flexbox nebo CSS Grid.
• Proč <thead>, <tbody>, <tfoot>?
  • Přístupnost: Pomáhají čtečkám obrazovky lépe interpretovat strukturu tabulky pro lidi se zrakovým postižením.
  • Tisk: Pro tisk tabulky se hlavička <thead> může opakovat na každé stránce, což je super praktické.
  • Stylizování a JavaScript: Díky nim můžeš snadno stylovat jen hlavičku, tělo nebo zápatí, nebo s nimi manipulovat pomocí JavaScriptu, třeba sortování jen v <tbody>. Například, když máš obrovskou tabulku, můžeš nastavit, že <tbody> bude scrollovatelný, zatímco <thead> zůstane nahoře.