Sémantický element
<article>
Samostatný kus obsahu, který dává smysl i sám o sobě. Například článek, novinka nebo karta produktu.
V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.
Zápis
Obsah, který obstojí sám
Zeptejte se: dalo by se to vytrhnout a poslat kamarádovi nebo zobrazit na jiném webu? Pokud ano, je to article.
Zápis
Vlastní hlavička a patička
Článek může mít vlastní header s nadpisem a datem a vlastní footer s odkazem.
Atributy
Datum, kterému rozumí i stroj
article má jen globální atributy. Datum ale zabalíme do elementu time. Jeho atribut datetime zapisuje datum ve strojovém formátu rok-měsíc-den.
Člověk čte „18. října“, vyhledávač a kalendář čtou 2026-10-18.
Zápis
Výpis článků
Na stránce blogu je článků víc. Každý je samostatný article. Společný wrapper div využijeme za chvíli pro layout.
Styl
Článek jako karta
Border a zaoblené rohy oddělí články od sebe. Datum ztlumíme, aby nesoupeřilo s nadpisem.
Styl
Karty vedle sebe
Wrapper .cards rozdělíme gridem na tři stejné sloupce.
Responzivita
Tři karty na telefonu
Na šířce telefonu zůstaly tři sloupce. Karty jsou tak úzké, že se do nich nevejdou delší slova a grid přetéká přes pravý okraj.
Responzivita
Grid, který se přizpůsobí sám
Místo pevných tří sloupců řekneme: „vejde se tolik sloupců, kolik jich bude mít aspoň 220 pixelů“.
Tady nebylo potřeba ani @media. Přepněte náhled na desktop a karty budou zase tři vedle sebe.
Shrnutí
Kdy použít article
Ano
- článek na blogu, novinka
- karta produktu v e-shopu
- komentář nebo příspěvek ve fóru
Ne
- část textu, která sama nedává smysl. To je
section. - wrapper jen kvůli stylu. To je
div.