воскресенье, ноября 23, 2008

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

Язык 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 Пример:

Примечание 1.


small::before { content:"* "; }

small {
border-top: solid 1px #777;
padding-top:5px;
}

<big> Все: 18px/1.1em/13.5pt Пример: Рост прибыли big { font-weight:600; }
<var> Все: базовый, italic Для обозначения переменных, формул и т.п. (не для кода)

Пример: F=m*a


var {
text-align:center;
display:block;
margin:10px auto;
}
<samp> Все: моноширинный, Courier New Для обозначения в тексте примеров результата исполнения скриптов, программ и т.д.

Пример:

/home/user/www/


samp {
background:#CF6;
}
<cite> Все: базовый, italic Для выделения в тексте каких-либо названий (компаний, журналов, магазинов и т.п.)

Пример:

Гигант Google еще удивит нас


cite {
font-variant: small-caps;
font-size:14px;
}
<q> IE6, IE7: базовый

Остальные: базовый, в кавычках

Для обозначения коротких цитат (начиная 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

Для обозначения аббревиатуры, если она произносится точно также и пишется, в title указывается ее расшифровка

Пример:
А вы сталкивались с ФСБ?


abbr {
speak: spell-out;
cursor:help;
border-bottom:
dotted 1px #090;
}
<acronym title=”"> IE6, IE7: базовый

Остальные: базовый, dotted

Для обозначения определений и аббревиатур, если они произносятся, как правило, в расшифрованном виде. В title указывается подсказка, или определение

Пример:
А раньше я обожала игры MU


acronym {
speak: spell-out;
cursor:help;
border-bottom:
dashed 1px #390;
background:#FF9;
}
<address> Все: базовый, italic Для обозначения адреса

Пример:

PAYONEER Inc, 410 Park Avenue

address {
display:block;
border: dashed 1px #ccc;
padding:5px;
}

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

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru