Szemantikus HTML5 elemek magyarázata

Programozás

A szemantikus HTML elemek azok, amelyek világosan leírják jelentésüket emberileg és géppel olvasható módon.

Az olyan elemek, mint például , és mind szemantikusnak számítanak, mert pontosan leírják az elem célját és a bennük lévő tartalom típusát.

Mik azok a szemantikai elemek?

A HTML-t eredetileg jelölőnyelvként hozták létre a korai interneten található dokumentumok leírására. Az internet növekedésével és többen elfogadták az igényeit.

Ahol az internetet eredetileg tudományos dokumentumok megosztására szánták, most az emberek más dolgokat is meg akartak osztani. Nagyon gyorsan az emberek azt akarták, hogy szebbé tegyék a webet.

Mivel a webet eredetileg nem úgy tervezték, hogy tervezzék, a programozók különböző hackeket használtak, hogy a dolgok különböző módon kerüljenek kidolgozásra. Ahelyett, hogy a

az információk táblázat segítségével történő leírására a programozók felhasználnák őket más elemek elhelyezésére az oldalon.

A vizuálisan megtervezett elrendezések használatának előrehaladtával a programozók elkezdtek egy általános „nem szemantikus” címkét használni . Ők gyakran adnak ezek az elemek egy classvagy idattribútumot a céljuk. Például e helyett gyakran úgy írták .

Mivel a HTML5 még mindig viszonylag új, a nem szemantikai elemek használata ma is nagyon elterjedt a weboldalakon.

Új szemantikai elemek listája

A HTML5-be adott szemantikai elemek a következők:

Elemek, mint például , , , , , és jár többé-kevésbé hasonló elemeket. Más elemeket oldalrészekre csoportosítanak. Azonban ahol a címke bármilyen típusú információt tartalmazhat, könnyen meghatározható, hogy milyen információk kerüljenek egy szemantikai régióba.

Példa a w3schools szemantikai elemelrendezésére

Szemantikai elemek, amelyek a w3schools oldalát helyezik el

Miért érdemes szemantikai elemeket használni?

A szemantikai elemek előnyeinek áttekintéséhez íme két darab HTML-kód. Ez az első kódblokk szemantikai elemeket használ:

Míg ez a második kódblokk nem szemantikai elemeket használ:

Először is, sokkal könnyebb olvasni . Valószínűleg ez az első dolog, amelyet észrevesz, amikor szemantikai elemeket használva megnézi az első kódblokkot. Ez egy kicsi példa, de programozóként több száz vagy ezer sornyi kódot olvashat végig. Minél könnyebb elolvasni és megérteni ezt a kódot, annál könnyebbé teszi a munkáját.

Ez jobb hozzáférést . Nem csak te találod a szemantikai elemeket könnyebben érthetővé. A keresőmotorok és a segítő technológiák (például a képernyőolvasók a látássérült felhasználók számára) szintén képesek jobban megérteni webhelye kontextusát és tartalmát, ami jobb élményt jelent a felhasználók számára.

Összességében a szemantikai elemek következetesebb kódhoz is vezetnek . Amikor létrehoz egy fejléc nem-szemantikus elemek különböző programozók lehet írni ezt a , , vagy egyszerűen . Olyan sokféle módon lehet létrehozni egy fejléc elemet, és mindegyik a programozó személyes preferenciáitól függ. Szabványos szemantikai elem létrehozásával mindenki számára könnyebbé válik.

2014 októbere óta a HTML4 frissítve lett HTML5-re, néhány új „szemantikai” elemmel együtt. A mai napig néhányunkat még mindig zavarban lehet, hogy miért olyan sok különböző elem, amely látszólag nem mutat jelentős változásokat.

és

"Mi a különbség?", Kérdezheti. Mindkét elemet egy tartalom szakaszolására használják, és igen, mindenképpen felcserélhetők. Kérdés, hogy melyik helyzetben. A HTML4 csak egyetlen típusú tároló elemet kínált fel, ami az . Bár ezt még mindig használják a HTML5-ben, a HTML5 biztosította számunkra a cserét és annak módját .

Az és elemek fogalmilag hasonlóak és felcserélhetők. Ha el szeretné dönteni, melyiket választja, vegye figyelembe a következőket:

  1. Az árucikkeket önállóan forgalmazhatónak vagy újrafelhasználhatónak kell tekinteni.
  2. A szakasz a tartalom tematikus csoportosítása.
Top Stories
News
 Story 1 Story 2 Story 3   
Sport
 Story 1 Story 2 Story 3

és

Az elem általában egy dokumentum, egy szakasz vagy egy cikk tetején található, és általában a fő címsort, valamint néhány navigációs és kereső eszközt tartalmaz.

Company A

    
    
     
  • Home
    • 
     
  • About
    • 
     
  • Contact us
    •

Az elemet akkor kell használni, ha egy vagy több alcímmel rendelkező fő címet szeretne.

Heading 1
Subheading 1
Subheading 2

Ne feledje, hogy az elem bármilyen tartalmat tartalmazhat, de az elem csak más fejléceket tartalmazhat, vagyis

nak nek

és beleértve .

Az elem olyan tartalomra szolgál, amely nem része annak a szövegfolyamatnak, amelyben megjelenik, de mégis kapcsolódik valamilyen módon. Ez a fő tartalom oldalsávja.

This is a sidebar, for example a terminology definition or a short background to a historical figure.

A HTML5 előtt a menük a

    és
  • 's. Most, ezekkel együtt, különválaszthatjuk a menüpontjainkat a , segítségével az oldalai közötti navigáláshoz. Bármely elem lehet egy oldalon, például az általános, hogy globális navigáció van a tetején (a ) és a helyi navigáció az oldalsávon (egy elemben).

    
       
      
        
    • Home
      • 
        
    • About
      • 
        
    • Contact us
      •

    Ha van, akkor a . Az A általában egy dokumentum, egy szakasz vagy egy cikk alján található. Csakúgy, mint a tartalom általában metainformáció, például a szerző adatai, jogi információk és / vagy a kapcsolódó információkra mutató linkek. Érvényes elemeket is tartalmazni a láblécben.

    ©Company A

    Az elem gyakran megjelenik egy vagy olyan elemen belül, amely általában szerzői jogi információkat vagy jogi felelősség kizárását, valamint egyéb ilyen apró betűket tartalmazna. Ennek azonban nem célja, hogy kisebb legyen a szöveg. Csak a tartalmát írja le, nem írja elő a bemutatást.

    ©Company A Date

    Az elem lehetővé teszi az ISO 8601 egyértelmű dátumának csatolását a dátum ember által olvasható változatához.

    Tuesday, 31 October 2017

    Minek bajlódni ? Míg az emberek olvashatják az időt, amely a szokásos módon egyértelművé válhat a kontextusban, addig a számítógépek elolvashatják az ISO 8601 dátumot, és láthatják a dátumot, az időt és az időzónát.

    és

    a képtartalmad köré fonására szolgál, és a kép feliratozására szolgál.

    Shadow of Mordor Cover art for Middle-earth: Shadow of Mordor

    További információ az új HTML5 elemekről:

    • A w3schools egyszerű és világos leírást nyújt számos hírelemről, valamint arról, hogyan / hol kell használni őket.
    • Az MDN nagyszerű hivatkozást nyújt az összes HTML elemre, és mélyebben belemerül mindegyikbe.