10 рідкісних HTML тегів про які вам варто знати
Мітки: html, теги
10 редких HTML тегов, о которых вам стоит знать
10 Rare HTML Tags You Really Should Know
| ← Zend Framework і переклад | Два (або більше) проекти Zend Framework на спільному хостингу → |
На сьогоднішній день від веб-розробників часто очікують, що вони будуть працювати в декількох мовах програмування. В результаті, досить складно вивчити все, що нам може запропонувати мова і легко опинитися в ситуації, коли ти не використовуєш весь потенціал деяких більш специфічних, але дуже корисних тегів.
На жаль, ми не наведемо весь той величезний потенціал цих тегів, які залишилися в тіні. Але ніколи не пізно повернутися в гру і почати писати код, який включає всю ту силу, яка міститься в не надто часто використовуваних тегах.
Хочемо представити вам теги HTML, які використовуються рідше всього і залишилися незрозумілими. До тих пір, доки вони можуть бути менш популярними, вони залишаються зручними в певних ситуаціях.
1. <cite>
Всі ми знайомі з тегом <blockquote>, але чи знаєте ви про його молодшого брата <cite>? Тег <cite> дозволяє визначати текст всередині елемента як посилання. Зазвичай браузер відображає текст всередині тега <cite> курсивом, але це легко можна змінити за допомогою CSS.
Тег <cite> є дуже корисним для цитування бібліографія та інших посилань сайту.
2. <optgroup>
Тег <optgroup> надає можливість додати невеликий опис між групами варіантів випадаючого списку. Наприклад, якщо вам потрібно згрупувати список фільмів за часом, це буде виглядати так:
Прибрати підсвітку коду
Це дозволяє візуально розділити список фільмів.
Живий приклад:
3. <acronym>
За допомогою тега <acronym> можна давати визначення або розширене пояснення групі слів. Коли ви наводите курсор на текст, який знаходиться в тезі <acronym>, з'являється підказка з текстом з атрибуту title. Наприклад:
Прибрати підсвітку коду
Живий приклад:
The microblogging site Twitter has recently struggled with downtimes.
4. <address>
Тег <address> досить невідомий, але це не означає, що немає сенсу ним користуватися! Як нам підказує назва тега <address>, він дозволяє нам семантично позначити адреси в HTML. Цей прекрасний маленький тег також виділить курсивом все, що знаходиться в дужках, хоча стилі запросто можна змінити через CSS.
Прибрати підсвітку коду
Живий приклад:
Glen Stansberry 1234 Web Dev Lane Anywhere, USA
5. <ins> і <del>
Якщо ви хочете відобразити виправлення за допомогою розмітки, теги <ins> і <del> - це те, що вам потрібно. Судячи з назви, <ins> виділяє те, що було додано в документ, за допомогою підкреслення, а <del> показує, що було видалено, за допомогою закреслення.
Прибрати підсвітку коду
Живий приклад:
Johnlikes LOVES his new iPod. John LOVES his new iPod.
6. <label>
Елементи форм найпростіше вилітають з голови, при розбивці документа. Серед елементів форми один з найбільш забуваємих - це тег <label>. Це не тільки швидкий спосіб давати позначки елементів форми, тег <label> також може містити атрибут for, щоб визначати для якого елементу дається позначка. Теги <label> не тільки виконують хорошу стилізації, вони також дозволяють робити текст клікабельним для його асоціації з елементом форми.
Прибрати підсвітку коду
Живий приклад:
7. <fieldset>
Fieldset це маленький атрибут, який може додати вашим формам властивість логічної угрупованості елементів. Після застосування, тег <fieldset> малює рамку навколо елементів разом з міткою. Бонус від застосування тега <legend> разом з fieldset в тому, що ви можете визначати назву групи.
Прибрати підсвітку коду
Живий приклад:
8. <abbr>
Тег <abbr> схожий на тег <acronym>, за винятком того, що <abbr> використовується тільки для визначення абревіатур. Також, як і з тегом <acronym>, ви можете визначати заголовок всередині тега. Коли користувач наводить курсор на абревіатуру, знизу з'являється повне значення. Тег <abbr> рідко використовується, але він дуже корисний для швидкого читання, орфографічного контролю та пошукових механізмів.
Прибрати підсвітку коду
Живий приклад:
Sgt. Pepper's Lonely Hearts Club is my favorite album.
9. rel
Rel просто неймовірно корисний атрибут, так як його можна застосувати до будь-якого елементу HTML. Це допомагає визначати додаткові змінні, які ніяк не позначені спеціальним чином. Це зручно, коли ви використовуєте JavaScript у своєму HTML. Якщо ви хочете мати посилання, яке ви могли б редагувати, ви можете додати:
Прибрати підсвітку коду
JavaScript може шукати посилання зі значенням "clickable" в атрибуті rel, а потім вже застосовувати деякий Ajax для її редагування. Це одна з багатьох технік, яку ви можете використовувати з атрибутом rel, можливості безмежні.
10. <wbr>
Тег <wbr> зовсім невідомий. Чесно кажучи, я сумніваюся, що ви його коли-небудь зустрічали, тому що він майже ніколи не використовується. Взагалі-то я сам його ніколи не бачив до того, як став готувати цю статтю. По суті, тег дозволяє визначити місце, у якому потрібно зробити скидання рядку, але тільки якщо це необхідно. Цей тег унікальний, так як він довіряє вирішення браузера вставити обрив рядку там, де це необхідно. Це ідеально для створення розміток, у яких не буде горизонтальних прокруток.
Приклад використання:
Прибрати підсвітку коду
Оригінал: 10 Rare HTML Tags You Really Should Know
На жаль, ми не наведемо весь той величезний потенціал цих тегів, які залишилися в тіні. Але ніколи не пізно повернутися в гру і почати писати код, який включає всю ту силу, яка міститься в не надто часто використовуваних тегах.
Хочемо представити вам теги HTML, які використовуються рідше всього і залишилися незрозумілими. До тих пір, доки вони можуть бути менш популярними, вони залишаються зручними в певних ситуаціях.
1. <cite>
Всі ми знайомі з тегом <blockquote>, але чи знаєте ви про його молодшого брата <cite>? Тег <cite> дозволяє визначати текст всередині елемента як посилання. Зазвичай браузер відображає текст всередині тега <cite> курсивом, але це легко можна змінити за допомогою CSS.
Тег <cite> є дуже корисним для цитування бібліографія та інших посилань сайту.
2. <optgroup>
Тег <optgroup> надає можливість додати невеликий опис між групами варіантів випадаючого списку. Наприклад, якщо вам потрібно згрупувати список фільмів за часом, це буде виглядати так:
Прибрати підсвітку коду
1 2 3 4 5 6 7 8 9 10 | <label for="showtimes"> Showtimes </label> <select id="showtimes" name="showtimes"> <optgroup label="1PM"> </optgroup> <option value="titanic"> Twister </option> <option value="nd"> Napoleon Dynamite </option> <option value="wab"> What About Bob? </option> <optgroup label="2PM"> </optgroup> <option value="bkrw"> Be Kind Rewind </option> <option value = " stf "> Stranger Than Fiction </option> </select> |
Це дозволяє візуально розділити список фільмів.
Живий приклад:
3. <acronym>
За допомогою тега <acronym> можна давати визначення або розширене пояснення групі слів. Коли ви наводите курсор на текст, який знаходиться в тезі <acronym>, з'являється підказка з текстом з атрибуту title. Наприклад:
Прибрати підсвітку коду
1 2 | The microblogging site <acronym title="Founded in 2006"> Twitter </acronym> has recently struggled with downtimes. |
Живий приклад:
The microblogging site Twitter has recently struggled with downtimes.
4. <address>
Тег <address> досить невідомий, але це не означає, що немає сенсу ним користуватися! Як нам підказує назва тега <address>, він дозволяє нам семантично позначити адреси в HTML. Цей прекрасний маленький тег також виділить курсивом все, що знаходиться в дужках, хоча стилі запросто можна змінити через CSS.
Прибрати підсвітку коду
1 2 3 4 | <address> Glen Stansberry 1234 Web Dev Lane Anywhere, USA </address> |
Живий приклад:
Glen Stansberry 1234 Web Dev Lane Anywhere, USA
5. <ins> і <del>
Якщо ви хочете відобразити виправлення за допомогою розмітки, теги <ins> і <del> - це те, що вам потрібно. Судячи з назви, <ins> виділяє те, що було додано в документ, за допомогою підкреслення, а <del> показує, що було видалено, за допомогою закреслення.
Прибрати підсвітку коду
1 | John <del> likes </del> <ins> LOVES </ins> his new iPod. |
Живий приклад:
John
6. <label>
Елементи форм найпростіше вилітають з голови, при розбивці документа. Серед елементів форми один з найбільш забуваємих - це тег <label>. Це не тільки швидкий спосіб давати позначки елементів форми, тег <label> також може містити атрибут for, щоб визначати для якого елементу дається позначка. Теги <label> не тільки виконують хорошу стилізації, вони також дозволяють робити текст клікабельним для його асоціації з елементом форми.
Прибрати підсвітку коду
1 2 | <label for="username"> Username </label> <input id="username" type="text"> |
Живий приклад:
7. <fieldset>
Fieldset це маленький атрибут, який може додати вашим формам властивість логічної угрупованості елементів. Після застосування, тег <fieldset> малює рамку навколо елементів разом з міткою. Бонус від застосування тега <legend> разом з fieldset в тому, що ви можете визначати назву групи.
Прибрати підсвітку коду
1 2 3 4 5 6 | <form> <fieldset> <legend> Are You Smarter Than a 5th Grader? </legend> Yes <input name="question" value="yes" type="radio"> No <input name="question" value="no" type="radio"> </fieldset> </form> |
Живий приклад:
8. <abbr>
Тег <abbr> схожий на тег <acronym>, за винятком того, що <abbr> використовується тільки для визначення абревіатур. Також, як і з тегом <acronym>, ви можете визначати заголовок всередині тега. Коли користувач наводить курсор на абревіатуру, знизу з'являється повне значення. Тег <abbr> рідко використовується, але він дуже корисний для швидкого читання, орфографічного контролю та пошукових механізмів.
Прибрати підсвітку коду
1 | <abbr title="Sergeant"> Sgt. </abbr> Pepper's Lonely Hearts Club is my favorite album. |
Живий приклад:
Sgt. Pepper's Lonely Hearts Club is my favorite album.
9. rel
Rel просто неймовірно корисний атрибут, так як його можна застосувати до будь-якого елементу HTML. Це допомагає визначати додаткові змінні, які ніяк не позначені спеціальним чином. Це зручно, коли ви використовуєте JavaScript у своєму HTML. Якщо ви хочете мати посилання, яке ви могли б редагувати, ви можете додати:
Прибрати підсвітку коду
1 | <a rel="clickable" href="page.html"> This link is editable </a> |
JavaScript може шукати посилання зі значенням "clickable" в атрибуті rel, а потім вже застосовувати деякий Ajax для її редагування. Це одна з багатьох технік, яку ви можете використовувати з атрибутом rel, можливості безмежні.
10. <wbr>
Тег <wbr> зовсім невідомий. Чесно кажучи, я сумніваюся, що ви його коли-небудь зустрічали, тому що він майже ніколи не використовується. Взагалі-то я сам його ніколи не бачив до того, як став готувати цю статтю. По суті, тег дозволяє визначити місце, у якому потрібно зробити скидання рядку, але тільки якщо це необхідно. Цей тег унікальний, так як він довіряє вирішення браузера вставити обрив рядку там, де це необхідно. Це ідеально для створення розміток, у яких не буде горизонтальних прокруток.
Приклад використання:
Прибрати підсвітку коду
1 | <span> How do you say Supercalifragilistic<wbr>expialidocious? </span> |
Оригінал: 10 Rare HTML Tags You Really Should Know
Рейтинг:
<< Ви можете поставити оцінку цій статтіОбговорення статті:
sNICkers [2009-07-07]
Дуже хороша стаття
ieroglyph [2009-10-20]
насчет тега <address>, не лучше использовать микроформаты?
Ну а если просто адрес в контенте то обычного p с css-классом должно хватить. Думаю сложно заставить текстовый редактор в кмс-ке отображать этот тег.
kunik [2009-11-08]
ідея не в тому, щоб стилізувати адерсу а в тому, щоб надати семантики адресі. А це потрібно для того, що, наприклад, бравзер зрозумів що це адреса. На сьогодні IE8 підсвічує адреси спеціальним чином і дозволяє знайти їх на карті. Це корисна штука і, думаю, інші бравзери зовсім скоро навчаться робити те ж саме.