Az HTML layout elemek segítségével szerkezetet adhatunk az HTML dokumentumnak és elrendezhetjük a tartalmakat a weboldalon. Itt van néhány példa layout elemekre:
div elem
A div elem egy általános célú layout elem, amelyet a weboldal szerkezetének megadására használhatunk. A div elemeket általában a weboldal különböző részeinek elkülönítésére használjuk. Például:
Copy code<div>
<p>Ez a szöveg a div elemben van.</p>
</div>
A div elemeket a class vagy id attribútum segítségével stíluslapokban beállíthatjuk, hogy megadhatjuk a megjelenésüket.
header elem
A header elem a weboldal fejlécét jeleníti meg. A header elembe általában a weboldal címét, logóját és navigációs elemeket helyezzük el. Például:
A header elem a weboldal fejlécét jeleníti meg. A header elembe általában a weboldal címét, logóját és navigációs elemeket helyezzük el. Például:
<header>
<h1>Weboldal címe</h1>
<nav>
<ul>
<li><a href="/">Főoldal</a></li>
<li><a href="/about">Rólunk</a></li>
<li><a href="/contact">Kapcsolat</a></li>
</ul>
</nav>
A header elem általában az HTML dokumentum tetején található, és tartalmazhat más elemeket is, például `h1` elemeket a címhez, `nav` elemeket a navigációhoz, valamint `img` elemeket a logóhoz.
footer elem
A footer elem a weboldal láblécét jeleníti meg. A `footer` elembe általában a weboldal aláírását, a copyright információkat és a kapcsolati elemeket helyezzük el. Például:
<footer>
<p>Copyright 2021 - Weboldal neve</p>
<ul>
<li><a href="/about">Rólunk</a></li>
<li><a href="/contact">Kapcsolat</a></li>
</ul></footer>
A footer elem általában az HTML dokumentum alján található, és tartalmazhat más elemeket is, például p elemeket az aláíráshoz és ul elemeket a kapcsolati elemekhez.
main elem
A main elem a weboldal fő tartalmát jeleníti meg. A main elembe általában a weboldal tényleges tartalmát helyezzük el, amelyet a header és a footer elemek körülvevő layout elemekkel körülhatárolunk. Például:
<main>
<h2>Weboldal címe</h2>
<p>Weboldal tartalma</p>
<ul>
<li>Elem 1</li>
<li>Elem 2</li>
<li>Elem 3</li>
</ul>
</main>
A main elembe általában az aktuális weboldal tényleges tartalmát helyezzük el, amelyet a header és a footer elemek körülvevő layout elemekkel körülhatárolunk.
Ezek csak néhány példa az HTML layout elemekre. Az HTML számos más layout elemet is tartalmaz, amelyek segítségével szerkezetet adhatunk az HTML dokumentumnak és elrendezhetjük a tartalmakat a weboldalon.
section elem
Az HTML section elem egy általános célú elem, amelyet a weboldal szerkezetének megadására használhatunk. A section elemeket általában a weboldal különböző részeinek elkülönítésére használjuk. Például:
<section>
<h2>Fejezetcím</h2>
<p>Fejezet tartalma</p>
</section>
A section elemeket a class vagy id attribútum segítségével stíluslapokban beállíthatjuk, hogy megadhatjuk a megjelenésüket.
Fontos megjegyezni, hogy a section elem nem helyettesíti a header, footer vagy main elemeket, hanem általános célú elem, amelyet a weboldal szerkezetének megadására használhatunk.
aside elem
Az HTML aside elem egy általános célú elem, amelyet a weboldal oldalsó oszlopjának tartalmát jeleníti meg. A aside elembe általában olyan tartalmakat helyezünk el, amelyek kapcsolódnak a fő tartalomhoz, de nem részei annak. Például:
<aside>
<h2>Oldalsó oszlop címe</h2>
<p>Oldalsó oszlop tartalma</p>
</aside>