HTML je jednoduchý jazyk, ale jeho slovná zásoba je väčšia, ako by ste si mohli uvedomiť. Zistite všetko o niektorých nezvyčajnejších značkách, ktoré môžete použiť.

Kľúčové informácie

  • Pomocou značiek a vytvárajte rozšíriteľné sekcie, ktoré poskytujú užívateľsky prívetivý zážitok a zachovávajú čistý dizajn.
  • Zvýraznite dôležitý obsah pomocou značky a upozornite na kľúčové slová, frázy alebo výsledky vyhľadávania na svojej webovej stránke.
  • Pridajte sémantický význam dátumom a časom pomocou značky, čím sa zlepší dostupnosť pre používateľov so zdravotným postihnutím, ktorí používajú čítačky obrazovky.

Ako webový vývojár by ste sa mali dobre orientovať v bežných značkách HTML, napr, , a ktoré predstavujú štruktúru a obsah vašich webových stránok. Jazyk HTML však ponúka oveľa viac!

Preskúmaním týchto jedinečných značiek môžete vylepšiť funkčnosť svojich webových aplikácií, vďaka čomu budú vyčnievať z davu.

1.
a

Predstavte si, že máte rozsiahle informácie alebo obsah, ktorým nechcete čitateľa okamžite zahltiť. The a značky prídu na záchranu!

instagram viewer

Tieto značky spolupracujú pri vytváraní rozbaliteľnej sekcie s názvom alebo zhrnutím, na ktorú môžu používatelia vašej webovej lokality kliknúť a zobraziť ju. V predvolenom nastavení sa obsah v prvku podrobností nezobrazí, takže vaša stránka zostane prehľadná a usporiadaná.

Vaši návštevníci môžu jednoducho kliknúť na súhrn a získať prístup k skrytým informáciám.

<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>

Pomocou týchto značiek môžete skryť veľké časti textu, kódu alebo iných informácií, čo poskytuje užívateľsky prívetivý zážitok pri zachovaní čistého dizajnu. Môžu vám dokonca pomôcť vylepšiť vaše zručnosti ako dizajnér rozhrania.

2.

The tag vám umožňuje zvýrazniť konkrétne časti vášho obsahu, vďaka čomu budú vizuálne vynikať. Keď použijete Prehliadače zvyčajne používajú žltú farbu pozadia na text vo vnútri, čím naň upútajú pozornosť čitateľa.

Táto funkcia je užitočná najmä vtedy, keď chcete na svojej webovej stránke zdôrazniť kľúčové slová, dôležité frázy alebo výsledky vyhľadávania.

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

Ak má váš web napríklad funkciu vyhľadávania, môžete použiť značku na zvýraznenie zhody vyhľadávacích dopytov vo výsledkoch, čo používateľom uľahčuje hľadanie relevantných informácií.

3.

Stretli ste sa už niekedy so situáciami, kedy sa obsah stáva zastaraným alebo už nie je relevantný, no stále ho chcete zobrazovať na historické účely alebo naznačovať zmeny v priebehu času?

Zadajte tag! To znamená prečiarknutie a vykreslí akýkoľvek obsah v rámci prvku s čiarou cez stred.

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

V tomto príklade vypredané text sa zobrazí s prečiarknutým riadkom, čo znamená, že sa zmenil stav zásob produktu.

4.

Ak chcete dátumom a časom vo svojom obsahu pridať sémantický význam, tag príde vhod.

Pomocou Dátum Čas môžete zadať strojovo čitateľnú verziu dátumu alebo času, ktorá pomáha prehliadačom, vyhľadávačom a čítačkám obrazovky pochopiť kontext.

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

Pomocou dáte svojmu obsahu väčšiu štruktúru a sprístupníte ho širšiemu okruhu používateľov vrátane tých so zdravotným postihnutím, ktorí používajú čítačky obrazovky.

5.

Správa textu vo viacerých jazykoch na vašej webovej stránke môže byť niekedy náročná, najmä ak každá časť vyžaduje iné formátovanie.

The tag prichádza na záchranu tým, že izoluje časť textu, s ktorou by prehliadač mal zaobchádzať odlišne z dôvodu odlišných jazykových požiadaviek.

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

V tomto príklade prvok zalomí číslo 5,000. To zaisťuje, že ak je okolitý text v inom jazyku alebo vyžaduje iné formátovanie, nebude zasahovať do čísla.

6. , ,

Pre východoázijskú typografiu, kde sa nad alebo pod znakmi bežne používajú vodítka výslovnosti, furigana alebo iné anotácie,, , a do hry vstupujú značky.

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

V tomto príklade prvok obsahuje znak 漢 (Kanji) a prvok obsahuje výslovnosť かん (kan). The prvky poskytujú záložné zátvorky pre prehliadače, ktoré nepodporujú rubínové anotácie.

7.

Ak máte dlhé slová, ktoré môžu narušiť vaše rozloženie, značka je tu, aby pomohla. Navrhuje príležitosť na zalomenie riadku (príležitosť na zalomenie slova) v dlhom slove, kde sa prehliadač môže rozhodnúť zalomiť text.

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

Vo vyššie uvedenom príklade dlhá adresa URL obsahuje a prvok, ktorý prehliadaču v prípade potreby umožňuje rozdeliť ho na dva riadky, pričom sa zachová rozloženie okolitého obsahu.

8. a

Pre vedecké alebo matematické zápisy, chemické vzorce alebo poznámky pod čiarou môžete použiť a značky pre text dolného a horného indexu.

<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>

Tento príklad používa tag na zobrazenie 2 v H2O ako dolný index, zatiaľ čo tagy zobrazujú exponenty v Pytagorovej vete.

9.

Potrebujete reprezentovať skalárne merania v známom rozsahu, ako je využitie disku, hodnotenia alebo skóre skúšok? The tag vás pokryl.

Pomocou hodnotu, min, a max atribúty, môžete definovať aktuálnu hodnotu, minimálnu hodnotu a maximálnu hodnotu merania.

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

V tomto príklade prvok predstavuje skóre skúšky 75%.

10.

Keď potrebujete vytvorte dialógové okno alebo prekrytie okna pre modály alebo dobre fungujúce modálne pop-up interakcie, tag je správna cesta. Môžete použiť OTVORENÉ atribút, aby sa predvolene zobrazilo dialógové okno.

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

V tomto príklade jednoduché dialógové okno obsahujúce odsek a tlačidlo na zatvorenie ukazuje, kedy sa stránka načíta, vďaka OTVORENÉ atribút. Obsah a správanie dialógového okna môžete prispôsobiť pomocou JavaScriptu pre pokročilejšie interakcie.

11.

Použi tag na zoskupenie súvisiacich možností v rámci a rozbaľovací prvok. Umožňuje vám organizovať a kategorizovať možnosti pre jednoduchšiu navigáciu a výber.

  • Thetag je kontajnerový prvok, ktorý zoskupuje súvisiace značky v rámci a element.
  • Pomáha organizovať možnosti vytvorením vizuálneho zoskupenia alebo kategorizácie v rozbaľovacej ponuke.
  • The tag vyžaduje atribút label, ktorý špecifikuje názov alebo názov skupiny možností.
  • Môže obsahovať jeden alebo viac tagy ako jeho podradené prvky, reprezentujúce jednotlivé možnosti v rámci skupiny.

Napríklad:

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

Tento príklad zoskupuje rozbaľovaciu ponuku výberu do dvoch sekcií: Ázie, a Európe. Každá skupina obsahuje značky reprezentujúce rôzne krajiny v rámci daného regiónu.

Zlepšite svoju odbornosť vo vývoji webu

Učenie sa týchto menej známych značiek HTML môže výrazne zlepšiť vaše zručnosti v oblasti vývoja webu. Napriek nedostatku uznania ponúkajú cenné funkcie pre konkrétne kontexty.

Pridanie týchto značiek do vašej sady zručností zvyšuje interaktivitu, dostupnosť a zefektívňuje proces vývoja webu. Pamätajte si, že aj keď môžu byť neznámi, majú významný vplyv na vašu cestu webového vývojára.