A HTML egy egyszerű nyelv, de szókincse nagyobb, mint gondolnád. Tudjon meg mindent a szokatlanabb címkékről, amelyeket használhat.

Kulcs elvitelek

  • Használjon és címkéket bővíthető szakaszok létrehozásához, amelyek felhasználóbarát élményt és letisztult megjelenést biztosítanak.
  • Emelje ki a fontos tartalmat a címkével, felhívva a figyelmet a kulcsszavakra, kifejezésekre vagy keresési eredményekre a weboldalán.
  • Adjon szemantikai jelentést a dátumokhoz és időpontokhoz a címke használatával, javítva a képernyőolvasót használó, fogyatékkal élő felhasználók hozzáférhetőségét.

Webfejlesztőként jól kell ismernie az olyan általános HTML-címkéket, mint például, , és amelyek a weboldalak szerkezetét és tartalmát képviselik. A HTML nyelv azonban sokkal többet kínál!

Ezen egyedi címkék felfedezésével javíthatja webalkalmazásainak funkcionalitását, és kiemelheti őket a tömegből.

1.
és

Képzelje el, hogy kiterjedt információval vagy tartalommal rendelkezik, amellyel nem akarja azonnal elárasztani az olvasót. A és címkék jönnek a mentő!

instagram viewer

Ezek a címkék együttesen létrehoznak egy kibontható részt címmel vagy összefoglalóval, amelyre a webhely felhasználói rákattinthatnak, hogy felfedjék. Alapértelmezés szerint a részletek elemen belüli tartalom nem jelenik meg, így az oldal rendezett és rendezett marad.

Látogatói egyszerűen az összefoglalóra kattintva hozzáférhetnek a rejtett információkhoz.

<details>
<summary>Click to reveal more informationsummary>
<p>This content will be hidden by default but will appear when the user
 clicks the summary.p>
details>

Ezekkel a címkékkel elrejtheti a szöveg, a kód vagy más információ nagy részeit, így felhasználóbarát élményt biztosít, miközben megőrzi a letisztult megjelenést. Még az is segíthet, hogy finomítsa interfész tervezői ismeretek.

2.

A címke segítségével kiemelheti a tartalom egyes részeit, így azok vizuálisan kiemelhetők. Amikor használja a elem, a böngészők jellemzően sárga háttérszínt alkalmaznak a benne lévő szövegre, felhívva rá az olvasó figyelmét.

Ez a funkció különösen akkor hasznos, ha kulcsszavakat, fontos kifejezéseket vagy keresési eredményeket szeretne kiemelni a weboldalán.

<p>
 You can use the <mark>markmark> tag to highlight important words or
 phrases.
p>

Például, ha webhelye rendelkezik keresési funkcióval, használhatja a címkével kiemelheti a keresési lekérdezés egyezéseit a találatok között, így a felhasználók könnyebben megtalálhatják a releváns információkat.

3.

Találkoztál már olyan helyzetekkel, amikor a tartalom elavulttá válik vagy már nem releváns, de továbbra is szeretné megjeleníteni történelmi célokra, vagy jelezni az idők során bekövetkezett változásokat?

Írd be a címke! Azt jelenti áthúzott és az elemen belüli bármely tartalmat a közepén áthaladó vonallal jeleníti meg.

<p>
 This product is <s>out-of-stocks> currently available at a discounted
 price!
p>

Ebben a példában a nincs raktáron szöveg jelenik meg egy vonallal, amely jelzi, hogy a termék raktári állapota megváltozott.

4.

Ha szemantikai jelentést szeretne adni a tartalomban szereplő dátumokhoz és időpontokhoz, a címke jól jön.

Használni a dátum idő attribútum, megadhatja a dátum vagy az idő géppel olvasható változatát, amely segít a böngészőknek, a keresőmotoroknak és a képernyőolvasóknak megérteni a kontextust.

<p>
 The Declaration of Independence was signed on
<timedatetime="1776-07-04">July 4, 1776time>.
p>

Használatával a címkével strukturáltabbá teszi a tartalmat, és a felhasználók szélesebb köre számára teszi elérhetővé, beleértve a képernyőolvasót használó fogyatékkal élőket is.

5.

A weboldal több nyelvű szövegének kezelése néha kihívást jelenthet, különösen akkor, ha az egyes részek eltérő formázást igényelnek.

A A címke a szöveg egy részének elkülönítésével segít, amelyet a böngészőnek az eltérő nyelvi követelmények miatt eltérően kell kezelnie.

<p>
<bdi>5,000bdi> people attended the conference.
p>

Ebben a példában a elem beburkolja a számot 5,000. Ez biztosítja, hogy ha a környező szöveg más nyelvű, vagy más formázást igényel, akkor nem zavarja a számot.

6. , ,

A kelet-ázsiai tipográfia esetében, ahol a kiejtési útmutatókat, furiganát vagy más megjegyzéseket általában karakterek felett vagy alatt használnak, a, , és címkék lépnek életbe.

<p>
 I'm learning
<ruby>漢<rt>かんrt>ruby>字<rp>(rp><rt>Kanjirt><rp>)rp>.
p>

Ebben a példában a elem tartalmazza a karaktert 漢 (Kanji), és a elem tartalmazza a kiejtést かん (kan). A Az elemek tartalék zárójeleket biztosítanak azon böngészők számára, amelyek nem támogatják a rubin megjegyzéseket.

7.

Ha hosszú szavai vannak, amelyek megtörhetik az elrendezést, a címke segít. Sortörési lehetőséget (szótörési lehetőséget) javasol egy hosszú szóban, ahol a böngésző dönthet úgy, hogy tördeli a szöveget.

<p>
 This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a? query=string.
p>

A fenti példában a hosszú URL tartalmazza a elem, amely lehetővé teszi, hogy a böngésző szükség esetén két sorra bontsa, megőrizve a környező tartalom elrendezését.

8. és

Tudományos vagy matematikai jelölésekhez, kémiai képletekhez vagy lábjegyzetekhez használhatja a és címkéket az alsó és felső index szövegéhez.

<p>
 The chemical formula for water is H<sub>2sub>O,
 and the Pythagorean theorem is
 a<sup>2sup> + b<sup>2sup> = c<sup>2sup>.
p>

Ez a példa a címkét a megjelenítéséhez 2 ban ben H2O alsó indexként, míg a címkék megjelenítik a kitevőket a Pitagorasz-tételben.

9.

Ismert tartományon belüli skaláris méréseket kell ábrázolnia, például lemezhasználatot, értékeléseket vagy vizsgapontszámokat? A címke fedezett fel.

Használni a érték, min, és max attribútumok segítségével meghatározhatja a mérés aktuális értékét, minimális értékét, illetve maximális értékét.

<metervalue="75"min="0"max="100">75%meter>

Ebben a példában a elem vizsgapontszámát jelenti 75%.

10.

Amikor kell párbeszédpanel vagy ablakfedő létrehozása a modálisokhoz vagy jól viselkedett modális pop-up interakciók, a címke a járható út. Használhatja a nyisd ki attribútumot a párbeszédpanel alapértelmezés szerinti megjelenítéséhez.

<dialogopen>
<p>This is a dialog box!p>
<button>Closebutton>
dialog>

Ebben a példában egy egyszerű párbeszédpanel, amely egy bekezdést és egy bezárás gombot tartalmaz, megmutatja, mikor töltődik be az oldal, köszönhetően a nyisd ki tulajdonság. Testreszabhatja a párbeszédpanel tartalmát és viselkedését a JavaScript használatával a fejlettebb interakciók érdekében.

11.

Használja a címke a kapcsolódó opciók csoportosításához a legördülő elem. Lehetővé teszi a lehetőségek rendszerezését és kategorizálását a könnyebb navigáció és kiválasztás érdekében.

  • Acímke egy konténerelem, amely kapcsolódó csoportokat tartalmaz címkék a elem.
  • Segít a lehetőségek rendezésében azáltal, hogy vizuális csoportosítást vagy kategorizálást hoz létre a legördülő menüben.
  • A A címkéhez egy label attribútum szükséges, amely megadja a beállításcsoport nevét vagy címét.
  • Tartalmazhat egyet vagy többet is címkék gyermekelemeiként, amelyek a csoporton belüli egyedi opciókat képviselik.

Például:

<select>
<optgrouplabel="Asia">
<optionvalue="kr">South Koreaoption>
optgroup>
<optgrouplabel="Europe">
<optionvalue="de">Germanyoption>
optgroup>
select>

Ez a példa a kijelölés legördülő menüt két részre csoportosítja: Ázsia, és Európa. Minden csoport olyan címkéket tartalmaz, amelyek az adott régión belül különböző országokat képviselnek.

Növelje jártasságát a webfejlesztésben

Ezeknek a kevésbé ismert HTML-címkéknek a megtanulása nagymértékben javíthatja webfejlesztési készségeit. Az elismerés hiánya ellenére értékes funkciókat kínálnak meghatározott kontextusokhoz.

Ha ezeket a címkéket hozzáadja a készségkészletéhez, akkor az interaktivitást, a kisegítő lehetőségeket és a webfejlesztési folyamatot leegyszerűsíti. Ne feledje, még ha nem is ismerik, jelentős hatással vannak webfejlesztői útjára.