SZEMANTIKUS ELEMEK HTML5-BEN tananyag.pptx

SZEMANTIKUS ELEMEK HTML5-BEN

1. SZEMANTIKUS ELEMEK HTML5-BEN A szemantikus elemek használata nemcsak a kódot teszi átláthatóbbá és szervezettebbé, hanem javítja az oldal keresőoptimalizálását (SEO) is, mivel a keresőmotorok könnyebben megértik az oldal tartalmát. Emellett a képernyőolvasók számára is hasznos, mert segítségükkel könnyebben navigálhatók a különböző részek, így a hozzáférhetőség is nő.

2. < article > <h2>új kutatások a mesterséges intelligencia területén</h2> <p>a legújabb tanulmány szerint a mesterséges intelligencia fejlődése ...</p> </ article > < article > Tulajdonságai: Az < article > elemet önálló, független tartalmi egységekhez használjuk, amelyek önállóan is értelmezhetők, vagy akár máshol (pl. RSS, hírgyűjtő oldalakon) újra felhasználhatók. Tipikus példák az online cikkek, blogbejegyzések, hírek vagy fórum hozzászólások. Alkalmazása : Egy weboldalon minden olyan tartalmi egységhez használhatjuk, amely önmagában is teljes értelmet hordoz. Például egy híroldalon az egyes cikkeket < article > elembe tehetjük.

3. < article > <h2>Hogyan készül a tökéletes pizza?</h2> <p>A pizzakészítés rejtelmei ...</p> < aside > <h3>Kapcsolódó receptek</h3> < ul > <li><a href ="# margherita "> Margherita </a></li> <li><a href ="# pepperoni "> Pepperoni </a></li> </ ul > </ aside > </ article > 2. < aside > Tulajdonságai: Az < aside > elem olyan tartalom számára készült, amely kapcsolódik ugyan a fő tartalomhoz, de kiegészítő vagy másodlagos jellegű. Ez lehet hirdetés, érdekességek, kapcsolódó cikkek vagy egyéb olyan információ, ami nem része a fő szöveges tartalomnak. Alkalmazása: Például egy cikk mellett található releváns érdekességek, szerzői megjegyzések vagy kapcsolódó linkek számára alkalmas.

4. <main> <h1>Üdvözöljük a receptoldalunkon</h1> <p>Itt megtalálhatók a legjobb ételek receptjei...</p> </main> 3 . <main > Tulajdonságai: A <main> elem az oldal fő tartalmát jelöli, amely közvetlenül kapcsolódik az oldal céljához. Az oldal navigációs részei, fejléc és lábléc elemei nem tartoznak bele a <main> elembe. Az oldalon csak egyetlen <main> elem használható. Alkalmazása: Az oldal központi tartalmi részét érdemes <main> elembe foglalni, hogy ezáltal a keresőmotorok és a segítő technológiák (pl. képernyőolvasók ) könnyebben tudják azonosítani az oldal lényeges részeit.

5. <header> <h1> Kedvenc receptjeink </h1> < nav > < ul > <li><a href ="#home"> Kezdőlap </a></li> <li><a href ="#about"> Rólunk </a></li> </ ul > </ nav > </header> 4 . < header > Tulajdonságai: A < header > elem általában egy szekció vagy egy oldal tetején található, és olyan tartalmakat tartalmaz, mint a logó, navigáció, címek vagy más bevezető elemek. Több < header > elem is lehet egy oldalon, például külön < header > elemet használhatunk az oldal egészére és az egyes szekciókra. Alkalmazása: Fő navigáció, weboldal logó, oldal címe és bevezető szöveg elhelyezésére alkalmas. Ha egy < section > vagy < article > elemen belül van, az adott szekció fejléceként funkcionál.

6. < footer > <p>& copy ; 2023 Receptoldal. Minden jog fenntartva.</p> </ footer > 5 . < footer > Tulajdonságai: A < footer > elem az oldal vagy egy szekció alján helyezkedik el, és olyan információkat tartalmazhat, mint a szerzői jogi adatok, kapcsolati információk, és egyéb záró elemek. Akárcsak a < header >, több < footer > elem is lehet egy oldalon. Alkalmazása: Az oldal alján található elemek, például hivatkozások, jogi nyilatkozatok, szerzői jogi információk és kapcsolati információk számára.

7. <section> <h2> Kiemelt receptek </h2> <p> Próbálja ki a legnépszerűbb receptjeinket ...</p> </section> 6 . < section > Tulajdonságai: A < section > elem tartalmi szekciókat jelöl, és tematikus blokkokba rendezi az oldal tartalmát. Jellemzően egy címmel (<h2>, <h3> stb.) együtt használjuk , amely meghatározza az adott szekció témáját. Az < article > elemhez képest kevésbé független, inkább egy téma része, például egy fejezet vagy egy rész az oldalon. Alkalmazása: Az oldal nagyobb részeit szekciókba oszthatjuk, hogy jobban átlátható legyen a tartalom, például szolgáltatások, termékek, galériák bemutatására.