HTML je jednoduchý jazyk, ale jeho slovní zásoba je větší, než si možná uvědomujete. Zjistěte vše o některých neobvyklých značkách, které můžete použít.

Klíčové věci

  • Pomocí značek a vytvořte rozšiřitelné sekce, které poskytují uživatelsky přívětivé prostředí a udržují čistý design.
  • Zvýrazněte důležitý obsah pomocí značky a upoutejte pozornost na klíčová slova, fráze nebo výsledky vyhledávání na vaší webové stránce.
  • Přidejte sémantický význam datům a časům pomocí značky, čímž se zlepší přístupnost pro uživatele se zdravotním postižením, kteří používají čtečky obrazovky.

Jako webový vývojář byste se měli dobře orientovat v běžných HTML značkách jako, , a které představují strukturu a obsah vašich webových stránek. Jazyk HTML však nabízí mnohem více!

Prozkoumáním těchto jedinečných značek můžete vylepšit funkčnost svých webových aplikací, aby vyčnívaly z davu.

1.
a

Představte si, že máte rozsáhlé informace nebo obsah, kterým nechcete čtenáře okamžitě zahltit. The a značky přijdou na záchranu!

instagram viewer

Tyto značky spolupracují a vytvářejí rozbalitelnou sekci s názvem nebo shrnutím, na kterou mohou uživatelé vašeho webu kliknout a zobrazit je. Ve výchozím nastavení se obsah v prvku podrobností nezobrazí, takže vaše stránka zůstane úhledná a organizovaná.

Vaši návštěvníci mohou snadno kliknout na souhrn a získat přístup ke skrytým informací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>

Pomocí těchto značek můžete skrýt velké části textu, kódu nebo jiných informací, což poskytuje uživatelsky přívětivé prostředí při zachování čistého designu. Mohou vám dokonce pomoci vylepšit vaše dovednosti jako designér rozhraní.

2.

The tag vám umožní zvýraznit konkrétní části vašeho obsahu, aby byly vizuálně vynikají. Když použijete Prohlížeče obvykle aplikují žlutou barvu pozadí na text uvnitř, čímž na něj upoutají pozornost čtenáře.

Tato funkce je zvláště užitečná, chcete-li na své webové stránce zdůraznit klíčová slova, důležité fráze nebo výsledky vyhledávání.

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

Pokud má váš web například funkci vyhledávání, můžete použít tag pro zvýraznění shod vyhledávacího dotazu ve výsledcích, což uživatelům usnadní nalezení relevantních informací.

3.

Setkali jste se někdy se situacemi, kdy obsah zastaral nebo přestal být relevantní, ale přesto ho chcete zobrazovat pro historické účely nebo naznačovat změny v průběhu času?

Zadejte štítek! Znamená přeškrtnout a vykreslí jakýkoli obsah v prvku čárou procházející středem.

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

V tomto příkladu je vyprodáno text se zobrazí s přeškrtnutým řádkem, což znamená, že se změnil stav skladu produktu.

4.

Pokud chcete datům a časům ve svém obsahu přidat sémantický význam, tag přijde vhod.

Za použití čas schůzky můžete zadat strojově čitelnou verzi data nebo času, která pomáhá prohlížečům, vyhledávačům a čtečkám obrazovky porozumět kontextu.

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

Pomocí dáte svému obsahu větší strukturu a zpřístupníte jej širšímu okruhu uživatelů, včetně těch se zdravotním postižením, kteří používají čtečky obrazovky.

5.

Správa textu ve více jazycích na vaší webové stránce může být někdy náročná, zvláště když každá část vyžaduje jiné formátování.

The tag přichází k záchraně tím, že izoluje část textu, se kterou by prohlížeč měl zacházet jinak kvůli různým jazykovým požadavkům.

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

V tomto příkladu je prvek zalomí číslo 5,000. To zajišťuje, že pokud je okolní text v jiném jazyce nebo vyžaduje jiné formátování, nebude rušit číslo.

6. , ,

U východoasijské typografie, kde se nad nebo pod znaky běžně používají vodítka výslovnosti, furigana nebo jiné anotace,, , a do hry vstupují značky.

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

V tomto příkladu je prvek obsahuje znak 漢 (Kanji) a prvek obsahuje výslovnost かん (kan). The prvky poskytují záložní závorky pro prohlížeče, které nepodporují rubínové anotace.

7.

Pokud máte dlouhá slova, která mohou narušit vaše rozvržení, tag je zde, aby pomohl. Navrhuje příležitost pro zalomení řádku (příležitost zalomení slova) v dlouhém slově, kde se prohlížeč může rozhodnout text zalomit.

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

Ve výše uvedeném příkladu dlouhá adresa URL obsahuje a prvek, který v případě potřeby umožní prohlížeči rozdělit jej na dva řádky, přičemž zachová rozložení okolního obsahu.

8. a

Pro vědecké nebo matematické zápisy, chemické vzorce nebo poznámky pod čarou můžete použít a značky pro 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 příklad používá tag pro zobrazení 2 v H2O jako dolní index, zatímco tagy zobrazují exponenty v Pythagorově větě.

9.

Potřebujete reprezentovat skalární měření ve známém rozsahu, jako je využití disku, hodnocení nebo skóre zkoušek? The štítek vás pokryl.

Za použití hodnota, min, a max atributů, můžete definovat aktuální hodnotu, minimální hodnotu a maximální hodnotu měření.

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

V tomto příkladu je prvek představuje skóre zkoušky 75%.

10.

Když potřebujete vytvořit dialogové okno nebo překrytí okna pro modály nebo dobře vychované modální vyskakovací interakce, tag je cesta. Můžete použít OTEVŘENO atribut pro zobrazení dialogového okna ve výchozím nastavení.

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

V tomto příkladu jednoduché dialogové okno obsahující odstavec a tlačítko pro zavření ukazuje, kdy se stránka načte, díky OTEVŘENO atribut. Obsah a chování dialogového okna můžete přizpůsobit pomocí JavaScriptu pro pokročilejší interakce.

11.

Použijte tag pro seskupení souvisejících možností v rámci a rozevírací prvek. Umožňuje vám organizovat a kategorizovat možnosti pro snazší navigaci a výběr.

  • Thetag je kontejnerový prvek, který seskupuje související značky v a živel.
  • Pomáhá organizovat možnosti vytvořením vizuálního seskupení nebo kategorizace v rozbalovací nabídce.
  • The tag vyžaduje atribut label, který specifikuje název nebo název skupiny možností.
  • Může obsahovat jeden nebo více tagy jako její podřízené prvky, představující jednotlivé možnosti v rámci skupiny.

Například:

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

Tento příklad seskupuje rozbalovací nabídku výběru do dvou sekcí: Asie, a Evropa. Každá skupina obsahuje značky představující různé země v rámci daného regionu.

Vylepšete svou odbornost ve vývoji webu

Naučit se tyto méně známé HTML tagy může výrazně zlepšit vaše dovednosti ve vývoji webu. Navzdory nedostatku uznání nabízejí cenné funkce pro konkrétní kontexty.

Přidání těchto značek do vaší sady dovedností zvyšuje interaktivitu, dostupnost a zefektivňuje proces vývoje webu. Pamatujte, že i když mohou být neznámí, mají významný vliv na vaši cestu webového vývojáře.