Полезные, но забытые Html теги. Блог для вебмастеров

Полезные, но забытые Html теги

23 Ноябрь 2008 просмотров 5,066 комментариев 46

Язык HTML (4+), использует более 100 тегов. Естественно, что при верстке сайта мы используем лишь часть из них. Кроме того, любой блочный (и не только) элемент можно “превратить” с помощью CSS в любой другой элемент. Например, font мы заменяем на span; span на div; code на pre и т.п.

Однако, в HTML предусмотрены теги для самых различных ситуаций. Знакомы ли вам такие теги, как samp, var, q, cite, abbr, acronym..? Думаю, что многие из вас слышат эти названия впервые, поэтому я составила таблицу с описанием и примерами для чего нужны эти теги и как их лучше стилизовать.

Где купить автомобильный багажник? Звоните, не раздумывая! Тел. в Москве (495) 729-9-728

Компания CLOVER Group – это профессиональная уборка офисов, витрин, окон и других помещений.

Заказать комплексное поисковое продвижение сайтов по выгодной цене!

Услуги гражданского адвоката. Профессионально.

Несколько примечаний:

Все браузеры – это IE6+, FireFox, Opera, Safari, Chrome.

Базовый – это шрифт браузера, установленный по умолчанию, обычно Times New Roman, 16px/1em/12pt.

Поддержка элементов и их рендеринг * в различных браузерах
Элемент	Браузеры	Описание	Стили
<small>	Все: 13px/0.8em/10pt, valid	Пример: Примечание 1.	small::before { content:”* “; } small { border-top: solid 1px #777; padding-top:5px; }
<big>	Все: 18px/1.1em/13.5pt valid	Пример: Рост прибыли	`big { font-weight:600; }`
<var>	Все: базовый, italic valid	Для обозначения переменных, формул и т.п. (не для кода) Пример: `F=m*a`	`var { text-align:center; display:block; margin:10px auto; }`
<samp>	Все: моноширинный, Courier New valid	Для обозначения в тексте примеров результата исполнения скриптов, программ и т.д. Пример: `/home/user/www/`	`samp { background:#CF6;` }
<kbd> спасибо Octane	Все: моноширинный, Courier New valid	Для обозначения теста, который должен ввести пользователь Пример: Пожалуйста, введите код: `E-999hs-Oj`	`samp { background:#333; color:#fff; }`
<cite>	Все: базовый, italic valid	Для выделения в тексте каких-либо названий (компаний, журналов, магазинов и т.п.) Пример: Гигант Google еще удивит нас	`cite { font-variant: small-caps; font-size:14px; }`
<q>	IE6, IE7: базовый Остальные: базовый, в кавычках valid	Для обозначения коротких цитат (начиная c HTML 4.01). В качестве аттрибута исп-ся `cite="url_here"` Пример: Как сказали по новостям, сегодня доллар вырастет как репка в сказке	q::before { content:’”‘; } q::after { content:’”‘; } q { font-style:italic; }
<abbr title=””>	IE6: — IE7, Safari, Chrome: базовый Opera, FireFox: базовый, dotted valid	Для обозначения аббревиатуры, если она произносится точно также и пишется, в `title` указывается ее расшифровка Пример: А вы сталкивались с ФСБ?	`abbr { speak: spell-out; cursor:help; border-bottom: dotted 1px #090;` }
<acronym title=””>	IE6, IE7: базовый Остальные: базовый, dotted valid	Для обозначения определений и аббревиатур, если они произносятся, как правило, в расшифрованном виде. В `title` указывается подсказка, или определение Пример: А раньше я обожала игры MU	`acronym { speak: spell-out; cursor:help; border-bottom: dashed 1px #390; background:#FF9; }`
<address>	Все: базовый, italic valid	Для обозначения адреса Пример: PAYONEER Inc, 410 Park Avenue	`address {` display:block; border: dashed 1px #ccc; padding:5px; }
<author> спасибо ioni	IE6, IE7 – нет. Остальные: базовый not valid	Для обозначения в тексте автора Пример: А.С. Пушкин	`author { font-style:italic; }`

Кстати, заголовок таблицы оформлен с помощью элемента <caption>. Он также может быть оформлен с помощью CSS как вы пожелаете. Кроме того, он может располагаться как над таблицей, так и под – на это влияет аттрибут align=[top, bottom]

Хотелось бы почитать ваши мнения о вышеописаных тегах. Используете ли вы их, или считаете, что они бесполезны? На мой взгляд они намного улучшают семантику и читабельность кода, да и к тому же, поддерживаются всеми браузерами (о том, как “научить” IE6 новым свойствам – читайте в предыдущей статье).

Комментариев 46 »

]]>Алексей Качаев пишет: ]]>

Почему же забытые?
<cite> иногда пользуюсь. А вот на счет остальных – те точно не использовал, да и потребности особой не вижу.

Цитировать

# 23 Ноябрь 2008 at 23:28
]]>linche пишет: ]]>

Класс, спасибо, почерпнул новое из вашей статьи!

Цитировать

# 23 Ноябрь 2008 at 23:51
]]>ioni пишет: ]]>

А как же author?
Отличный тег, между прочим!

Цитировать

# 24 Ноябрь 2008 at 0:58
]]>Михаил пишет: ]]>

Caption неоднозначно выравнивается в разных браузерах, если таблица фиксированной ширины и выровнена по центру.

Цитировать

# 24 Ноябрь 2008 at 1:01
]]>Автор пишет: ]]>

Если таблица фиксированной ширины, проблема решается простым указанием той же фиксированной ширины и у caption..

Цитировать

# 24 Ноябрь 2008 at 1:14
]]>Автор пишет: ]]>

Точно! Спасибо, что напомнили, добавлю в таблицу :)

Цитировать

# 24 Ноябрь 2008 at 1:15
]]>Михаил пишет: ]]>

А если мне нужно, что бы заголовок был уже по ширине, чем таблица? Это типовое решение для заголовков в вёрстке научной литературы, например.

Цитировать

# 24 Ноябрь 2008 at 1:21
]]>Автор пишет: ]]>

Не совсем поняла пример, можете показать?
Если, например, у caption нет фона, то какая разница, какая у него ширина? Ни рядом, ни поверх никогда ничего не пишется.
Вы хотите чтобы фон заголовка был меньше ширины таблицы?

Цитировать

# 24 Ноябрь 2008 at 1:38
]]>Михаил пишет: ]]>

Если я хочу, что бы ширина заголовка таблицы была меньше, чем ширина таблицы, то одни браузеры считают ширину для caption относительно ширины таблицы, а некоторые – относительно родителя таблицы. Конечно, можно использовать экстра-разметку… Caption – очень правильный тег с точки зрения семантики и доступности, однако вот с визуальным оформлением у него не очень всё хорошо. Во многом потому, что используется редко. А используется редко, потому что много ошибок отображения. Такой вот замкнутый круг.

Цитировать

# 24 Ноябрь 2008 at 1:48
]]>Михаил пишет: ]]>

Фон просто для демонстрации границ блока.

Цитировать

# 24 Ноябрь 2008 at 1:49
]]>Octane пишет: ]]>

К этому списку можно добавить еще:
• <kbd> — текст, который пользователь должен набрать на клавиатуре;
• <tt> — машинописный текст;
• — мягкий перенос (только для HTML).
И другие…

Цитировать

# 24 Ноябрь 2008 at 4:25
]]>Seo 2uz пишет: ]]>

Мало в них необходимости и полезности, все проще становится в css оформить стиль чем юзать что то уже стандартное.

Цитировать

# 24 Ноябрь 2008 at 10:30
]]>Автор пишет: ]]>

1. <tt> – просто придает тексту моноширинность, но не описывает его назначение, вместо него предпочтительно использовать целевые теги – code, тот же kbd и samp. Поэтому не стала описывать его.

2. – по причине указанной вами в скобках… А сайты мы верстаем на Xhtml 1.0.

<kbd> добавлю к списку.

Цитировать

# 24 Ноябрь 2008 at 10:40
]]>Автор пишет: ]]>

В случае с указание ширины в %, такая проблема действительно возникает. Но думаю предпочтительнее использовать в этом случае все же фиксированную ширину, если и ширина таблицы фиксированная.

Цитировать

# 24 Ноябрь 2008 at 10:42
]]>Автор пишет: ]]>

Оформить то можно как угодно, это понятно. Но согласитесь, что вы теряете саму логическую структуру кода, если вместо <q> будете использовать . К тому же не нужно нагружать страницу лишними классами, а указать в CSS стиль для нового элемента.

Цитировать

# 24 Ноябрь 2008 at 10:48
]]>Bobcat пишет: ]]>

Чорт, в прошлом комменте вырезались теги, которые я ичпользую ))) В общем, small, big, abbr, acronym

Цитировать

# 26 Ноябрь 2008 at 13:43
]]>Russian-Old.Com - история России » Вэбмастерство пишет: ]]>

# 26 Ноябрь 2008 at 16:40
]]>Korew пишет: ]]>

Ну почему, они не забытые. И те кому надо пользуются ими. Просто редко. А вот тег <cite> я чень часто встречаю.

Цитировать

# 26 Ноябрь 2008 at 21:34
]]>Автоматические коробки передач. » Авто Новости пишет: ]]>

# 29 Ноябрь 2008 at 11:02
]]>SelenIT пишет: ]]>

Откуда пошла легенда о том, что из XHTML1.0 выкинули какие-то теги по сравнению с HTML? То, что поддерживается браузерами, вовсе не означает, что он есть в HTML-стандарте (как и всевозможные <marquee>, <blink> и т.п. :).И, кстати, раз уж зашла речь об XHTML — наверное, стоит отметить, что <big> и еще пара вещей в XHTML1.1 отнесены к Presentation Module, т.е. особой семантики за ними не признается. И в HTML5 их, похоже, тоже не будет…

Цитировать

# 2 Декабрь 2008 at 14:16
]]>Автор пишет: ]]>

Мм.. а кто говорит, что из Xhtml выкинули теги?

wbr вообще нет в стандарте HTML 4+, поэтому я и ответила, что его не стоит использовать, т.к. все мы уже верстаем в основном на XHTML, который по стандартам использует все те же теги HTML 4.01.

Как я поняла, octane имел ввиду HTML < 4.0, там этот тег был.

Цитировать

# 2 Декабрь 2008 at 16:24
]]>livegomel.com пишет: ]]>

R списку добавила бы еще – который делает надпись в степени…Спасибо Оля за пост! *В закладки*

Цитировать

# 3 Декабрь 2008 at 23:46
]]>Саша Тимофеева пишет: ]]>

Из всех вышеуказанных тегов я использовала только <q> , остальные никогда, да и не нужны они.

Цитировать

# 5 Декабрь 2008 at 10:26
]]>Евгений Леонидович пишет: ]]>

Саша Тимофеева,а как же <cite>?

Цитировать

# 6 Декабрь 2008 at 3:42
]]>Андрей пишет: ]]>

А я часто использую тэг <big>.. А <cite>почти в каждом блоге есть..

Цитировать

# 8 Декабрь 2008 at 1:18
]]>SelenIT пишет: ]]>

Еще раз сорри за занудство, но… в каком стандарте вы его нашли? ;)

Цитировать

# 8 Декабрь 2008 at 21:54
]]>Автор пишет: ]]>

К сожалению в стандартах его не хватает, но это не повод, чтобы его игнорировать ;)

Цитировать

# 8 Декабрь 2008 at 22:31
]]>SelenIT пишет: ]]>

Не повод, а веская причина (как и в случае с , который, в отличие от, хотя бы в списках проприетарных расширений значится)! Вторая причина, не менее веская — IE. А если от этих двух причин отмахнуться, то можно много забавных тегов вспомнить насочинять, и браузеры их даже отрисуют… но тогда причем тут язык HTML? ;)

Цитировать

# 8 Декабрь 2008 at 22:59
]]>SelenIT пишет: ]]>

Сорри, теги съелись: “в отличие от ”. И слово “вспомнить” задумывалось зачеркнутым :)

Цитировать

# 8 Декабрь 2008 at 23:14
]]>Автор пишет: ]]>

Не знаю как вы, а я предпочитаю смотреть в будущее, а не сидеть на хвосте уходящего (это я про IE).
Невалидность – веская причина для тех, кто критично относится к этому относится.
(Если вы знакомы с проектом Хабрахабр: желание все делать по стандартам у меня ассоциируется с мольбой на карму на этом ресурсе)
Я не против стандартов, но и не считаю это обязательным условием верстки. На эту тему можно долго спорить :)
Если бы все браузеры и W3C договорились о создании единого стандарта, то таких разговоров бы не возникало.. А в свете существующих разногласий в этом вопросе, о каком стандарте речь?..

Цитировать

# 9 Декабрь 2008 at 1:27
]]>SelenIT пишет: ]]>

Дело не в валидности. Просто Вы в начале статьи пишете: “Язык HTML (4+), использует более 100 тегов” (в спеке 4.01 я насчитал 91 шт., в MSDN — 112, в MDC — 113). Так почему же тег (его нет в спеке, но есть в доках браузеров) недостоин Вашей таблички, а тег <author>, которого вообще нигде нет (даже в черновиках HTML5/XHTML2!) — почему-то достоин? ;)Ну и прошу прощения за оффтопик, но я бы не торопился называть IE уходящим. 8-я версия обещает немало интересностей и во любом случае “без боя не сдастся”… :)

Цитировать

# 9 Декабрь 2008 at 4:01
]]>Автор пишет: ]]>

Во-первых, давайте разберемся, что вообще делает тег . Из MSDN:
“Inserts a soft line break into a block of NOBR text.”
Cледовательно, нигде кроме как в блоке обрамленным тегом , этот тег не применим. А тег  – также отсутствует в стандарте. Тогда уж, если добавлять, то эти два тега вместе ;) Я просто не вижу особой необходимости и полезности в их использовании (хотя бы согласно названию статьи..)

Тег <author>, несмотря на незаявленность, понимается браузерами как и другие теги разметки (не стандартные).

Да, действительно в новых спецификациях он пока тоже не заявлен. Но еще не время делать выводы, они же только в разработке ;)

про уходящий IE – я имела ввиду IE6…

P.S. Добавлю в табличку, что тег не валиден ;)

Цитировать

# 9 Декабрь 2008 at 9:54
]]>SelenIT пишет: ]]>

К сожалению (или к счастью для стандартов и парсеров?;) даже IE8, судя по всему, по-прежнему понимает кастомные теги лишь на свой лад — через неймспейсы (как и 9 лет назад!). А в других браузерах в них нельзя вкладывать ничего блочного, на них часто ломаются WYSIWYG-редакторы и другие вещи, ожидающие “нормального” HTML на входе. Так что, имхо, неверно называть их “неизвестными тегами HTML”, скорее это “скрытые возможности” браузеров — иногда полезные, но в общем случае злоупотреблять их “добротой” не стоит. HTML — это HTML, а DocBook и т.п. — это уже другие языки…

Цитировать

# 9 Декабрь 2008 at 12:21
]]>danni danovich пишет: ]]>

По моему без хтмл вобще далеко не уедешь, максимум заказать себе сайт, да и то если что-то захочется менять в сайте? не…. хтмл всегда нужно!

Цитировать

# 10 Декабрь 2008 at 19:48
]]>перо павлина пишет: ]]>

а лучше html +css. со старыми тэгами по-аккуратнее нужно )))

Цитировать

# 17 Декабрь 2008 at 16:04
]]>Сергей М. пишет: ]]>

Небольшие мелочи, чтобы текст не вносил неясность в использование тегов :)

abbr – только для аббревиатур. acronym – вообще только для акронимов (аббревиатуры, которые произносятся слитно и фактически являются словами – НАТО, ГУМ), но из-за трудностей с браузерами его как раз дял всего используют.

cite – это все-таки сноска, а не название журналов и т.д. Используется обычно в паре с блочным blockquote и строчным q (которое – не короткая цитата, а именно строчная, инлайновый тег аля code), т.к. атрибут cite не является отображаемым. Но возможно просто выделять источник слов или подобное без указания ссылок. Клево, что в HTML5, наконец, можно будет делать правильное цитирование именно с помощью этого тега.

kbd – да, для “кода с клавиатуры”. Я бы логичней привел бы пример вроде ввода кода в командную строку. var – для переменных, при этом я бы не сказал, что им нельзя уж так выделять переменные внутри code :).

address – это не просто почтовый адрес, если читать спецификацию внимательно. Когда не было hCard, был введен этот идиотский тег. По идее, он (блочный и позволяющий пихать в него другие теги) предназначался для хранения всевозможной информации об авторе текущего документа в Сети. В HTML5 его роль изменится и будет приведена к общему знаменателю с микроформатами.

А big и small тут вообще не к месту, мне кажется (тем более, что используются они достаточно часто). Во-первых, довольно спорно, являются ли они физическими кодами как tt (правильный аналог которого – pre) или семантическими. А во-вторых, тогда надо пихать еще sup и sub тогда )))

Цитировать

# 19 Декабрь 2008 at 22:20
]]>Felconcalley пишет: ]]>

Отличный пост, прочитав несколько статей на эту тему понял, что всё таки не посмотрел с другой стороны, а пост как-то очень заинтересовал.

Цитировать

# 24 Декабрь 2008 at 18:02
]]>Snowcore пишет: ]]>

Некоторые из этих html элементов теперь заменяются микроформатами

Цитировать

# 26 Декабрь 2008 at 13:03
]]>Сергей М. пишет: ]]>

Ни один из представленных выше тегов микроформатами не заменяется. Кроме разве что эддресса, но и тот в новых стандартах будет использоваться вместе. Не стоит забывать вообще-то, что хтмл – язык разметки, а микроформаты – всего лишь дополнение семантики и ролей самим тегам. Именно поэтому в новых версиях и вводятся section, header и прочие теги.

Цитировать

# 26 Декабрь 2008 at 13:42
]]>Exarry пишет: ]]>

Огромное вам пасибо! а еще посты на эту тему будут в будущем? Очень жду!

Цитировать

# 30 Декабрь 2008 at 1:51
]]>triereebeero пишет: ]]>

Добавил в свои закладки. Теперь буду вас намного почаще читать!

Цитировать

# 5 Январь 2009 at 22:06
]]>Pervomaysky пишет: ]]>

Где аргументы?

Цитировать

# 16 Февраль 2009 at 12:25
]]>Anstak пишет: ]]>

Да с помощью CSS можно повторить практически все теги, такое можно использовать разве что для поисковой оптимизации. Ну вобщем-то не вижу смысла в использовании этих старых тегов.

Цитировать

# 7 Июнь 2009 at 11:58
]]>sshp пишет: ]]>

Я использую все эти теги, кроме samp и kbd (просто не доводилось).

Тег address – не для адреса, а для контактной информации именно об авторе данного документа (т.е.адрес, телефон, аську, скайп, вКонтакте-id и т.д. АВТОРА можно пихать в address, а кого/чего-либо другого ─ нет)

Тег cite служит для выделения источника информации. Мне, например, он часто служит для обрамления ГОСТов (“ГОСТ ****-**”).

Цитировать

# 21 Июль 2009 at 15:33
]]>Vladimir Ilich пишет: ]]>

На Нашей Доске Объявлений можно подать объявление БЕСПЛАТНО, лучшая доска объявлений города Житомира.Только качественные объявления от реальных людей предлагающих свои товары услуги в Житомире.От а до я о товарах и услугах Житомира и Житомирской области. Доска объявлений Житомира все о товарах и услугах предоставляемыми предприятиями и частными лицами города Житомира и Житомирской области

Цитировать

# 15 Август 2009 at 5:01
]]>Александр пишет: ]]>

Что старое, то надо забывать современные браузеры могут не поддерживать данные теги

Цитировать

# 26 Март 2010 at 23:28