HTML е прост език, но неговият речник е по-голям, отколкото може да си представите. Научете всичко за някои от по-необичайните тагове, които можете да използвате.

Ключови изводи

  • Използвайте и етикети, за да създадете разширяеми секции, осигурявайки удобно изживяване и поддържайки изчистен дизайн.
  • Маркирайте важно съдържание с маркера, привличайки вниманието към ключови думи, фрази или резултати от търсене на вашата уеб страница.
  • Добавете семантично значение към датите и часовете с помощта на етикета, подобрявайки достъпността за потребители с увреждания, които използват екранни четци.

Като уеб разработчик трябва да сте добре запознати с често срещаните HTML тагове като, , и които представляват структурата и съдържанието на вашите уеб страници. Езикът HTML обаче предлага много повече!

Като изследвате тези уникални тагове, можете да подобрите функционалността на вашите уеб приложения, като ги накарате да се открояват от тълпата.

1.
и

Представете си, че имате обширна информация или съдържание, с което не искате незабавно да затрупате читателя. The и етикетите идват на помощ!

instagram viewer

Тези тагове работят заедно, за да създадат разширяема секция със заглавие или резюме, което потребителите на вашия уебсайт могат да кликнат, за да разкрият. По подразбиране съдържанието в елемента с подробности няма да се показва, поддържайки страницата ви чиста и организирана.

Вашите посетители могат лесно да кликнат върху резюмето, за да получат достъп до скритата информация.

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

The маркер ви позволява да маркирате конкретни части от вашето съдържание, което ги прави визуално изпъкващи. Когато използвате елемент, браузърите обикновено прилагат жълт цвят на фона на текста вътре, привличайки вниманието на читателя към него.

Тази функция е особено полезна, когато искате да подчертаете ключови думи, важни фрази или резултати от търсене на вашата уеб страница.

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

Управлението на текст на множество езици на вашата уеб страница понякога може да бъде предизвикателство, особено когато всяка част изисква различно форматиране.

The идва на помощ, като изолира част от текста, която браузърът трябва да третира по различен начин поради различните езикови изисквания.

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

В този пример, елементът съдържа знака 漢 (канджи) и елемент съдържа произношението かん (кан). The елементите предоставят резервни скоби за браузъри, които не поддържат Ruby анотации.

7.

Когато имате дълги думи, които могат да нарушат оформлението ви, tag е тук, за да помогне. Той предлага възможност за прекъсване на ред (възможност за прекъсване на дума) в дълга дума, където браузърът може да избере да обвие текста.

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

В горния пример дългият URL адрес включва a елемент, който позволява на браузъра да го раздели на два реда, ако е необходимо, запазвайки оформлението на околното съдържание.

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 в H2O като долен индекс, докато таговете показват експонентите в Питагоровата теорема.

9.

Трябва да представите скаларни измервания в известен диапазон, като например използване на диска, оценки или резултати от изпити? The етикетът ви покрива.

Използвайки стойност, мин, и макс атрибути, можете да дефинирате съответно текущата стойност, минималната стойност и максималната стойност на измерването.

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

В този пример, елементът представлява резултат от изпит от 75%.

10.

Когато трябва създаване на диалогов прозорец или наслагване на прозорец за модали или добре поддържани модални изскачащи взаимодействия, на етикетът е правилният начин. Можете да използвате отворен атрибут за показване на диалоговия прозорец по подразбиране.

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

В този пример прост диалогов прозорец, съдържащ параграф и бутон за затваряне, показва кога страницата се зарежда, благодарение на отворен атрибут. Можете да персонализирате съдържанието и поведението на диалоговия прозорец с помощта на JavaScript за по-разширени взаимодействия.

11.

Използвай етикет за групиране на свързани опции в a падащ елемент. Тя ви позволява да организирате и категоризирате опции за по-лесна навигация и избор.

  • Theе контейнерен елемент, който групира свързани тагове в рамките на a елемент.
  • Помага за организиране на опции чрез създаване на визуално групиране или категоризиране в падащото меню.
  • The изисква атрибут label, който указва името или заглавието на групата опции.
  • Може да съдържа един или повече тагове като дъщерни елементи, представляващи отделните опции в рамките на групата.

Например:

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

Този пример групира падащото меню за избор в два раздела: Азия, и Европа. Всяка група съдържа етикети, представляващи различни държави в този регион.

Подобрете уменията си в уеб разработката

Научаването на тези по-малко известни HTML тагове може значително да подобри вашите умения за уеб разработка. Въпреки липсата на признание, те предлагат ценни функции за специфични контексти.

Добавянето на тези маркери към вашия набор от умения подобрява интерактивността, достъпността и рационализира процеса на уеб разработка. Не забравяйте, че дори и да са непознати, те оказват значително влияние върху вашето пътуване като уеб разработчик.