Оригинал сообщения
Комментарии: [показать]

Язык 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 новым свойствам - читайте в предыдущей статье).

[показать]LIci WP - WordPress crossposting plugin