| <!DOCTYPE html> | a dokumentumban használt HTML nyelv verziója (HTML 5) |
| <head> ... </head> | a HTML dokumentum fejrésze, amely elsősorban a dokumentumra vonatkozó információkat (ún. metainformációkat) tartalmaz |
| <title>Könyvajánló</title> | a dokumentum címe (title), amely a böngészőablak fülsorában (tab) jelenik meg |
| <style> ... </style> | a "style" blokk a HTML dokumentum globális (a teljes dokumentumra vonatkozó) formátumbeállításait tartalmazza CSS nyelven; itt beállíthatjuk például az egyes HTML tagok és formátumosztályok megjelenítési formátumát |
| body { counter-reset:titles; } | a böngésző a "titles" változó kezdőértékét 1-re állítja a dokumentum törzsrészének ("body") betöltésekor (azaz a weblap megjelenítésekor) |
| h2 { counter-increment:titles; } | a böngésző a "titles" változó értékét minden "h2" elem megjelenítésekor megnöveli 1-gyel |
| h2::before { content:"(" counter(titles) ") "; } | a böngésző a "h2" elem megjelenítésekor a megjelenítendő tartalom elé beszúr két zárójelet, és közéjük a "titles" változó aktuális értékét |
| h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #00FF00; } | a böngésző a "h1" elem szövegében levő karaktereket árnyékosan jelenítni meg; egy árnyék beállításakor – az első és második paraméter az árnyék vízszintes és függőleges szélességét, – a harmadik paraméter az árnyék elmosódásának nagyságát, – a negyedik paraméter pedig az árnyék színét állítja be; a példában két (egymást átfedő) árnyékot adunk a szöveghez |
| span.cim { border:gray solid 1px; font-size:larger; } span.cim:hover { background-color:black; color:white; } | a "span" elem "cim" formátumosztályához tartozó elemek alapesetben szürke színű, 1 képpont szélességű tömör keretben és a dokumentum alapértelmezett betűméretéhez képest nagyobb betűméretben jelennek meg; az egérkurzort az elem felé mozgatva a formátum megváltozik, és az elem tartalma fekete háttéren és fehér betűszínnel ("előtéren") fog megjelenni |
| table.tablazat { margin:auto; ... } | a "table" elem "tablazat" formátumosztályához tartozó táblázat középre igazítva jelenik meg |
| table.tablazat tr:first-child { background-color:#204020; color:white; } | a "table" elem "tablazat" formátumosztályához tartozó táblázat első "tr" eleme (azaz első sora) sötétszürke háttérrel és fehér betűszínnel fog megjelenni |
| table.tablazat tr:nth-child(even) { background-color:#ffff80; } | a "table" elem "tablazat" formátumosztályához tartozó táblázat minden páros "tr" eleme (azaz minden páros sora) világossárga háttérrel fog megjelenni |
| <body> ... </body> | a HTML dokumentum törzsrésze, ahol a weblap által megjelenített tartalmat adjuk meg |
| <table border="1" class="tablazat"> ... </table> |
táblázat létrehozása a keretvonalak (a táblázatot és a cellákat keretező vonalak) megjelenítésével; a létrehozott táblázat formátumosztálya "tablazat"
Megjegyzés: a border="1" attribútum korábban a HTML 5 szabványban szerepelt, azonban a W3C Validator szerint már elavult (obsolete); helyette használhatunk CSS formázást⇒ |