Bevezetés a HTML5 szemantikai elemekbe

A következő cikk bemutatja a html5 különféle szemantikai elemeit. Kezdjük a szemantika megértésével. A szemantika a különféle típusú címkékről szól, amelyek funkcionalitása ugyanazt a funkciót ábrázolja és végrehajtja, mint a címke neve. A címke funkcionalitását a név könnyen megértheti; ami a felhasználó számára érthető név / formátum. A HTML-elemek többsége általában szemantikai elem.

A szemantikus elemek előnyei a HTML5-ben

A szemantikai elemek előnyei a következők:

  • Könnyű kódmegértés.
  • A karbantartás gyorsan és megfelelő módon elvégezhető.
  • Nincs szükség külön leírás hozzáadására egyetlen címkéhez sem.

Különböző szemantikai elemek a HTML5-ben

Most menjünk be a HTML5 szemantikai elemeibe.

1.

Ez a címke ad némi elképzelést arról, hogy a címkén belüli adatok kifejezetten hasonló tartalomra vonatkoznak. Ez attól függ, hogy milyen típusú cikkek vannak általában mi is. Lehet blog, fórumok, újságcikkek stb.

Kód:



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA

Kimenet:

2.

Ez a címke az összes adat szekcionált tartalmának biztosításáról szól. A cikk- és szakaszcímkék használatának ismeretében ezek a címkék felhasználhatók az egyes címkékben. Azazon szakaszcímke használható a cikkcímkén belül és fordítva.

Kód:


The section here is about:

Tanulás és gyakorlás

Kimenet:

3.

Ez a címke az összes fejlécet megadja. Bármely adat, amelyet fejléc formátumba szeretnénk helyezni, a fejléc címke alatt kerül felhasználásra. És ez a címke többször is használható a teljes HTML szkriptáláshoz. Nézzünk meg egy kis példát erről.

Kód:



This is header #1



This is header #1



This is header #1

Első

következő …

Ez a 2. fejléc


A második

Kimenet:

4.

Ez a HTML szkriptünk lábléc része. Általában az összes szerzői jogi adatot és a kis részt látjuk minden olyan ajánlatban, mint például „a feltételek érvényesek” minden ajánlatban. Tehát ezeket a dolgokat a lábléc címke határozza meg.

Kód:

A test belsejében és a lábléc felett

Belül a lábléc címke.


Egy másik lábléc címke


Feltételek érvényesek

Kimenet:

5.

Ez a címke adja meg a navigációs elemeket. Bármely HTML dokumentum szkriptjének URL-je, ahol általában az egyik oldalról a másikra szeretnénk navigálni ezen a címkén keresztül. A címke alatt megadott adatok hiperhivatkozásokként érhetők el. Ezek a hiperhivatkozások hasznosak lehetnek az egyik szakaszról a másikra való navigáláshoz. Egy kis példát a következőképpen határozunk meg:

Kód:


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2

Kimenet:

Gyakorlás közben kattintson azokra a hivatkozásokra, és ellenőrizze, hogy a hiperhivatkozás színe megváltozik-e a kattintással.

6.

Ez egy címke, amelyet HTML-dokumentumaink oldalán az adatok megjelenítésére használunk. Sok webhelyen található olyan oldalsávban létező tartalom, amelyet e félrejelző címke segítségével jelenítünk meg. Ennek a tartalomnak összhangban kell lennie a dokumentumban szereplő többi adattal. Nézzünk meg egy kis példát erről.

Kód:

Hogyan használják félre a tagot?

Belül félrecímke


Tartalom a címkén belül

Kimenet:

A pontos tartalmat nem lehet pontosan meghatározni ugyanúgy, csak a teljes HTML oldal használatakor dokumentálható és érthető.

7.

Ez a címke meghatározza, hogy csatolunk egy képet. Ez a címke felhasználható egy képforrás megadására és egy gif vagy kép megjelenítésére.

Kód:





Mint fentebb említettük, így határozhatjuk meg az ábracímkét. Az ábracímkén belül a forráscímkével megadhatjuk a képparancsunkat. Ezen az ábracímkén belül viszont használhatjuk az ábrafelirat címkét.

8.

Ezt a címkét feliratok készítésére használják a rendelkezésre álló kép alatt. Az ábracímkén belül használható. Ennek felhasználása az alábbi példában látható.




This is description of the image attached.

Megpróbálhatja ugyanezt végrehajtani egy képforrás megadásával, és ellenőrizheti, hogy a kimenet hogyan jelenik meg.

9.

Ez a címke a HTML-webhely összes attribútumát és teljes tartalmát meghatározza. Az egyedi tartalmat tartalmazza. Fontos észrevenni az adott címke esetében, hogy ezt a címkét csak egyszer lehet használni a teljes oldal létrehozásánál. Megállapítottuk, hogy más címkék többször is használhatók egy weboldal létrehozásában, de ez a fő címke egyetlen időhasználati címke.

Kód:



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying

Az olvasás segít megérteni a különböző témákat



Gyakorló


A tanulással a gyakorlás kötelező teendő a tanulásban

Kimenet:

10.

Ez a címke az adott tartalom vagy adatok kiemelésére szolgál. Más szavakkal: ez a címke hasznos az adatok megjelölésében. Lássunk alább egy kis példát erre:

Kód:

Ebben a teljes szövegben, amelyet most írok, meg akarom jelölni ezt a szöveget

Kimenet:

11.

Ez a címke további részleteket tartalmaz, amelyekkel a felhasználók bármilyen részletet elrejthetnek kívánságuk alapján. Ezen a címkén keresztül a felhasználók bármilyen tartalmat megnyithatnak / bezárhatnak. Ha azt szeretnénk, hogy ez a címke maga a kezdetben közölje részleteit, akkor az „open” attribútum használható.

Az alábbiakban egy kis példa erre:

Kód:

Megjelenik ez?

Kimenet:

Most mi lenne a kimenet, ha nem használnánk a nyílt attribútumot?

Megjelenik ez?

1. kimenet:

2. kimenet:

12.

Ezt a címkét a részletek címkéjében használják. A részletcímke alatt lehet egy összefoglaló címke, amely meghatározza a weboldal vagy a HTML-dokumentum teljes összegzését. Fontos dolog itt megjegyezni, hogy az összefoglaló címke az első gyermekcímke, amelynek a részletcímke alá kell tartoznia. Nézzünk meg egy kis példát az alábbiakban:

Kód:



Have written this inside summary tag which is inside details tag

Ez a szöveg csak részletcímke alá tartozik

Ezeket a szöveges adatokat a részletek címkéjének kitöltése után írják

1. kimenet:

A fenti kimenetben kiemeljük a nyilat, mivel a 2. kimenetet kapjuk, ha kibővítjük.

2. kimenet:

Lehet, hogy ez a címke nem hoz különbséget

13.

Ez a címke olyan formátumban határozza meg a dátumot és az időt, amelyet a felhasználók könnyen megérthetnek. De érdemes megjegyezni, hogy ez a címke sok böngészőben nem biztos, hogy megváltoztatja a kimenetet.

Kód:

Jelenleg éjjel 11:00 van.

Kimenet:

14.

Ahogy a neve már sugallja, ez a címke bármilyen tartalom dobozba írására szolgál. Ennek a címkének nyitott attribútummal kell rendelkeznie a párbeszédpanel megjelenítéséhez, amint a forráskód végrehajtásra került. Találjon egy példát az alábbiakban:

Az itt írt adatok megjelennek egy párbeszédpanelen

Kimenet:

15.

Ez a címke egy grafikus ábrázolásban megadja egy bizonyos feladat előrehaladását. Itt kell lennie annak a maximális számnak, amelyre a haladást képviselni kell. Ez a címke főleg két attribútumból áll. A Max és az érték a két attribútum. A Max a teljes kitöltendő számot jelöli, és az Érték adja meg a befejezett százalékos értéket a maximális számértékhez viszonyítva. Példa erre az alábbiakban:

Kód:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:

Kimenet:

16.

Ez a címke mérésre szolgál. Ezt fel lehet használni a lekérdezés által igénybe vett területre vagy a lemezterület felhasználására is. Van néhány attribútum, amelyet ezzel a címkével kell használni. Az attribútumok max, min és value. Használatuk alapján határozottan kitalálhatjuk azok rendeltetését és felhasználását.

Kód:


EDCUBA


EDCUBA


EDCUBA

Meter címke használata

Egy 6 emeletes apartmanban a 2. emeleten lakom:
2-ből 6-ból

Kimenet:

17.

Ez egy olyan címke, amelyet bevezettek, hogy videofájlokat adjunk HTML-oldalunkhoz. A címke bevezetéséig a fejlesztők plug-inek segítségével videofájlokat vezettek be a HTL oldal tartalmába. Néhány attribútum használható a címkével együtt. Ezek közül néhány az automatikus lejátszás, az előtöltés és a némítás.

Kód:


Csak egy forráscímkére van szükségünk, hogy a forrást megkapjuk, ahonnan fel kell töltenünk a videotartalmat az oldalunkra.

18.

Ez a címke audiofájlok hozzáadására szolgál a Html oldalunkon. A felhasználás és a forráscímke megegyezik a videócímkével. Gyakorlatként próbálja meg használni az összes szemantikai elemet, és hozzon létre egy e HTML 5 verziószámú weboldalt a jobb és gyorsabb tanuláshoz.

Következtetés

Ebben a cikkben sok szemantikai elemet és azok használatát láttuk a HTML5-ben. Fontos megjegyezni, hogy ezeknek a címkéknek a nagy részét a 9-nél nagyobb Internet Explorer verziók és a 3-nál nagyobb króm verziók támogatják. Tehát folytasd a tanulást és a gyakorlást, hogy jobban megértsd a címkék használatát a HTML 5-ben.

Ajánlott cikkek

Ez egy útmutató a HTML5 szemantikai elemekhez. Itt tárgyaljuk a HTML5 bevezetését és a szemantikai elemeket, valamint a kód megvalósítását. A következő cikkben további információkat is megnézhet -

  1. A 10 legnépszerűbb HTML5 új elem
  2. HTML5 címkék
  3. HTML5 webes dolgozók
  4. Különböző típusú HTML események

Kategória:

Szoftverfejlesztés