11 необичних ХТМЛ ознака за побољшање ваших вештина веб развоја

Кључне Такеаваис

• Користите и ознаке за креирање проширивих одељака, пружајући корисничко искуство и одржавање чистог дизајна.
• Истакните важан садржај помоћу ознаке, привлачећи пажњу на кључне речи, фразе или резултате претраге на вашој веб страници.
• Додајте семантичко значење датумима и времену користећи ознаку, побољшавајући приступачност за кориснике са инвалидитетом који користе читаче екрана.

Као веб програмер, требало би да сте добро упућени у уобичајене ХТМЛ ознаке као што су, , и који представљају структуру и садржај ваших веб страница. Међутим, ХТМЛ језик нуди много више!

Истражујући ове јединствене ознаке, можете побољшати функционалност својих веб апликација, чинећи их издвајањем из гомиле.

1.

и

Замислите да имате опсежне информације или садржај којим не желите да одмах затрпате читаоца. Тхе и ознаке долазе у помоћ!

Ове ознаке раде заједно да би направили прошириви одељак са насловом или резимеом на који корисници ваше веб локације могу да кликну да би их открили. Подразумевано, садржај унутар елемента детаља се неће приказати, одржавајући вашу страницу уредном и организованом.

Ваши посетиоци могу лако да кликну на резиме да би приступили скривеним информацијама.

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

Помоћу ових ознака можете сакрити велике делове текста, кода или других информација, пружајући кориснику прилагођено искуство уз одржавање чистог дизајна. Они вам могу чак помоћи да побољшате своје вештине као дизајнер интерфејса.

2.

Тхе ознака вам омогућава да истакнете одређене делове вашег садржаја, чинећи их визуелно истакнутим. Када користите елемента, претраживачи обично примењују жуту боју позадине на текст унутра, привлачећи пажњу читаоца на њега.

Ова функција је посебно корисна када желите да нагласите кључне речи, важне фразе или резултате претраге на вашој веб страници.

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

На пример, ако ваша веб локација има функцију претраживања, можете да користите да бисте истакли подударања упита за претрагу у резултатима, што корисницима олакшава проналажење релевантних информација.

3.

Да ли сте икада наишли на ситуације у којима садржај постаје застарео или више није релевантан, али и даље желите да га прикажете у историјске сврхе или да укажете на промене током времена?

Унесите таг! Важи за прецртано и приказује било који садржај унутар елемента са линијом кроз средину.

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

У овом примеру, нема на залихи текст ће се приказати са линијом кроз њега, што указује да се стање залиха производа променило.

4.

Када желите да додате семантичко значење датумима и времену у свој садржај, ознака добро дође.

Помоћу Датум време атрибута, можете навести машински читљиву верзију датума или времена, што помаже прегледачима, претраживачима и читачима екрана да разумеју контекст.

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

Коришћењем таг, дајете свом садржају већу структуру и чините га доступним ширем кругу корисника, укључујући оне са инвалидитетом који користе читаче екрана.

5.

Управљање текстом на више језика на вашој веб страници понекад може бити изазовно, посебно када сваки део захтева другачије форматирање.

Тхе таг долази у помоћ тако што изолује део текста који претраживач треба да третира другачије због различитих језичких захтева.

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

У овом примеру, елемент обавија број 5,000. Ово осигурава да, ако је околни текст на другом језику или захтева другачије форматирање, неће ометати број.

6. , ,

За источноазијску типографију, где се водичи за изговор, фуригана или друге напомене обично користе изнад или испод знакова,, , и ознаке долазе у игру.

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

У овом примеру, елемент садржи карактер 漢 (Кањи) и елемент садржи изговор かん (кан). Тхе елементи обезбеђују резервне заграде за претраживаче који не подржавају руби напомене.

7.

Када имате дугачке речи које могу да покваре ваш распоред, таг је ту да помогне. Предлаже могућност за прелом реда (прилика за прелом речи) у дугој речи, где претраживач може изабрати да премота текст.

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

У горњем примеру, дуга УРЛ адреса укључује а елемент који омогућава претраживачу да га разбије у два реда ако је потребно, чувајући изглед околног садржаја.

8. _и

За научне или математичке записе, хемијске формуле или фусноте можете користити и ознаке за индексни и суперсцрипт текст, респективно.

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

Овај пример користи ознаку за приказ 2 ин Х2О као индекс, док је ознаке приказују експоненте у Питагориној теореми.

9.

Требате да представите скаларна мерења унутар познатог опсега, као што су употреба диска, оцене или резултати испита? Тхе таг вас је покрио.

Помоћу вредност, мин, и мак атрибута, можете дефинисати тренутну вредност, минималну вредност и максималну вредност мерења, респективно.

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

У овом примеру, елемент представља испитни резултат од 75%.

10.

Када треба креирајте оквир за дијалог или прекривач прозора за модале или добро понашане модалне искачуће интеракције, тхе ознака је прави пут. Можете користити отворен атрибута да бисте подразумевано приказали оквир за дијалог.

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

У овом примеру, једноставан оквир за дијалог који садржи пасус и дугме за затварање приказује када се страница учита, захваљујући отворен атрибут. Можете да прилагодите садржај и понашање оквира за дијалог користећи ЈаваСцрипт за напредније интеракције.

11.

Користити таг за груписање повезаних опција у оквиру а падајући елемент. Омогућава вам да организујете и категоришете опције за лакшу навигацију и избор.

• Тхетаг је елемент контејнера који групише повезане ознаке унутар а елемент.
• Помаже у организовању опција креирањем визуелног груписања или категоризације у падајућем менију.
• Тхе таг захтева атрибут ознаке, који специфицира име или наслов групе опција.
• Може да садржи један или више ознаке као њени подређени елементи, који представљају појединачне опције унутар групе.

На пример:

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

Овај пример групише падајући мени за избор у два одељка: Азија, и Европа. Свака група садржи ознаке које представљају различите земље у том региону.

Побољшајте своје знање у веб развоју

Учење ових мање познатих ХТМЛ ознака може знатно побољшати ваше вештине веб развоја. Упркос њиховом недостатку препознавања, они нуде вредне карактеристике за специфичне контексте.

Додавање ових ознака вашем скупу вештина побољшава интерактивност, приступачност и поједностављује процес веб развоја. Запамтите, иако можда нису упознати, имају значајан утицај на ваше путовање као веб програмера.