Biztosan sokan hallottátok már ezt a szót, kifejezést. Na de miben is különbözik a korábbi html verziótól? Egyszerűbb, rövidebb tagek, és ez rásegít a kereső optimalizálásra is. Nézzük is az első példát.
Egy html oldalt ugye a !doctype-al kezdünk el. A html5 esetében ez a dolog rövidebb lett:
Ezután az oldalunk felépítését folytatva html-nél megadhatjuk az oldalon használt nyelvet, például a mi esetünkben, most magyart:
A head részen belüli dolgok is lerövidültek, például a stylesheet a meta charset rész és még sok-sok minden. Nézzünk ezekre is egy-egy példát:
<link rel="stylesheet" href="style.css">
<meta charset="utf-8"> |
Fejlécünket header tagek közé helyezhetjük el:
<header>
<h1>Fejlécünk</h1>
</header> |
Az oldal tartalmát section tagbe helyezzük el:
<section>
Az oldal tartalma
</section> |
A content rész, úgy mond amiben a menüpontok tartalmai jelennek meg, azokat article tagekben helyezzük el. Lehet ugyan felcserélni a section-t és az article-t, ezen sokan veszekednek, hogy melyiket hogy, de mi most ezt alkalmazzuk:
<section>
<article>
<p>Menüpont tartalmának helye</p>
</article>
</section> |
A kevésbé fontos adatokat egy aside tagben helyezzük el, ez olyasmi mint egy sidebar:
<section>
<article>
<p>Menüpont tartalmának helye</p>
</article>
<aside>
<p>Kevésbé fontos adatok helye</p>
</aside>
</section> |
Láblécünket footer tagben helyezzük el:
<footer>
Lábléc szövege
</footer> |
Menüt nav tagekben helyezünk el, mi esetünkben egy számozatlan listában fogjuk megjeleníteni őket:
<nav>
<ul>
<li>
<a href="#">Menü 1.</a>
</li>
<li>
<a href="#">Menü 2.</a>
</li>
<li>
<a href="#">Menü 3.</a>
</li>
</ul>
</nav> |
Alapjáraton ennyit róla, legközelebb a többi újdonságot is megismerjük!
|