Články - article

V hlavním bloku main může být jeden nebo více článků. Každý článek by měl mít hlavní nadpis, jeho případné podkapitoly by měly mít nadpisy druhé úrovně, text by měl být členěn do odstavců.

Do hlavního bloku (main) vložíme article. Do něj zapíšeme strukturovaný obsah - viz níže.

<main>
  <article>
    <h1>Sedm divů světa</h1>
    <p>Sedm divů světa je seznam unikátních starověkých staveb.</p>
    <h2>Pyramidy</h2>
    <p>Jediným dochovaným divem jsou pyramidy.</p>
    <h2>Ostatní divy světa</h2>
    <p>Existence zahrad Semiramidiných není prokázána a zbývajících
       pět divů světa bylo zničeno živelnými pohromami.</p>
  </article>
</main>

Skupiny článků - section

Máme-li ve stránce více článků, událostí, produktů apod., můžeme je seskupit do oddílů, neboli sekcí (section). Každá sekce pak bude fungovat jako flexbox kontajner a její styly budou určovat uspořádání a zarovnání článků vedle sebe (na širším monitoru nebo pod sebou (na mobilu).

Nadpisy

• Hlavní nadpis
  <h1>Nadpis první úrovně</h1>
• Podnadpisy
  <h2>Nadpis druhé úrovně</h2>
• Podnadpisy 3. úrovně
  <h3>Nadpis třetí úrovně</h3>

Úroveň nadpisu nevybíráme podle vzhledu, ten upravíme pomocí css. Vždy začínáme od 1. úrovně. Vzhled nadpisů určíme pomocí css stylů.

Podnadpisy lze vytvářet až do 6. úrovně. Úroveň neznamená pořadí na stránce.
Nadpis h1 použijeme pro hlavní nadpis článku, h2 pro nadpisy podkapitol.

Ukázka tří úrovní nadpisů

HTML kód ukázky:

<h1>Sedm divů světa</h1>
<h2>Pyramidy</h2>
<p>Nejstarším ze sedmi divů a jediným, který dodnes stojí, jsou pyramidy.</p>
<h3>Chufuova pyramida</h3>
<p>Chufuova pyramida byla do postavení Eiffelovy věže nejvyšší na světě.</p>
<h3>Rachefova pyramida</h3>
<p>V minulosti byla Rachefova pyramida obložena bílým vápencem.</p>

<h2>Visuté zahrady</h2>
<p>Celá stavba dosahovala výšky asi čtyřiceti metrů. Na jejích terasách rostly
   květiny, stromy a keře přivezené z&nbsp;celé říše.</p>

<h2>Artemidin chrám</h2>
<p>V chrámu vyzdobeném nádhernými sochami bylo 127 dvacetimetrových sloupů.</p>

Odstavce

<p>Text odstavce</p>

Odstavec se automaticky zalamuje podle velikosti okna. Tam, kde nechceme, aby k zalomení došlo (např. mezi číslem a jednotkou, použijeme pevnou mezeru.

Zvýraznění části textu odstavce

Část textu odstavce, např. nějaký název či pojem, může být zvýrazněn tučným písmem nebo kurzívou:

• tučné písmo

  <p>Text odstavce<strong>tučný text</strong>text odstavce</p>
  

  nebo

  <p>Text odstavce<b>tučný text</b>text odstavce</p>
  

• kurzíva

  <p>Text odstavce<em>kurzíva</em>text odstavce</p>
  

  nebo

  <p>Text odstavce<i>kurzíva</i>text odstavce</p>
  

Klademe-li na daný text důraz, použijeme značku <strong> či <em>, případně obojí. Čtečky pro zrakově postižené lidi čtou tyto značky důrazněji. Chceme-li pouze odlišit např. nějaký název od ostatního textu odstavce, použijeme <b> nebo <i> nebo <b> spolu s <i>.

Pomocí stylů pak můžeme např. definovat, že text v elementu em bude nejen kurzívou, ale i barevným písmem, nebo strong může sloužit ke zvýraznění části textu barevně místo tučným písmem.