• разметка страниц становится более чистой и семантичной
• отпадает необходимость использовать изображения для теней, закругленных уголков и бордеров
• inline-валидация форм
• продвижение веб-стандартов
• сохранение существующей разметки после того, как использование скриптов будет не нужно

Как вы наверняка знаете, для интернет эксплорера нужно “включить” все новые элементы и атрибуты из HTML5, чтобы работать с ними. Remy Sharp написал скрипт, включающий все элементы HTML5 в IE. Все что нужно, это вызвать скрипт в head‘e, так как IE должен знать о элементе до того, как отрисовать его.

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

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient как background image
• rgba

CSS3 PIE использует Behaviors для эмуляции, что накладывает некоторые ограничения и возможные неудобства:

• Вы должны будете подключать PIE Behavior в каждом правиле, со свойствами CSS3
  (behavior: url(PIE.htc);)
• У всех элементов, в которых используется PIE должен быть выставлен position:relative
• Возможны проблемы с производельностью в интерактивных элементах

В общем, в некоторых случаях PIE будет адекватной заменой существующим “костылям”, а в некоторых — нет.

Удачных опытов!

Речь в статье пойдет о такой, казалось бы изжеваной и изъезженой теме, как валидация веб-документа по одной из DTD-схем, которые в свою очередь определяются с помощью DOCTYPE.

Тема эта нетривиальна; преимущества и недостатки того или иного способа валидации на первый взгляд не всегда являются явными. Поэтому я решил что упомянуть о них еще раз будет не лишним.

В последнее время, многие редакторы и CMS’ки автоматически проставляют DOCTYPE для документа, что само по себе является прорывом, но к сожалению этого недостаточно, так как зачастую это именно Transitional схема. Начинающие разработчики не уделяют этому должного внимания, а зачастую вобще не подозревают что у них есть выбор.

Перед тем как перейти к самой сути вопроса давайте вспомним что такое Transitional схема. Она была создана как переходная, для облегчения перехода от HTML3.2 к HTML4, сохраняя унаследованые элементы и атрибуты.

Абстрагируясь от конкретного языка, не важно то ли это HTML или XHTML, основной недостаток Transitional заключается в том, что переходная схема валидации допускает присутствие в разметке элементов, отвечающих за презентативное, визуальное отображение.

Современная веб-разработка зиждется на трех китах – разметка (html/xhtml/xml), оформление (css) и функционал с эффектами (javascript). Причем акцент здесь приходится на четкое разделение между ними. Разметка является логическим разделением документа на семантические, смысловые составляющие. Стилевые правила, вынесеные в отдельный файл(ы), отвечают за оформление документа относительно устройств отображения. Скрипты, отвечающие за взаимодействие между документом и пользователем, а так же за эффекты, также вынесены в отдельные файлы. Смешение всех этих компонентов в одном документе считается моветоном и заметно усложняет жизнь веб-разработчика и порядочно увеличивает время загрузки и отображения документа браузером.

К сожалению все мы далеки от идеала и все вышеописаные проблемы присутствовали всегда. Но время не стоит на месте, языки разметки развиваются. Разработчики движутся вместе с ними вперед, но и о наследии забывать не стоит. Поэтому и была придумана переходная схема, позволяющая отвалидировать документ, содержащий кашу из элементов, стилей, атрибутов и скриптов.

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

А что же собственно делать?Использовать Strict DTD — строгую, однозначную схему валидации документа, которая как раз создана для того чтобы отделить содержимое от стилей и скриптов. Как это сделать? Очень просто. В следующем вашем проекте просто поменяйте DOCTYPE на один из этих:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Кстати, W3C однозначно рекомендует использовать Strict.

“This is the HTML 4.01 Transitional DTD, which includes presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.”

Чего вы лишаетесь, переходя на строгую схему валидации:

Список запрещеных элементов: applet, basefont, center, dir, font, iframe, isindex, menu, noframes, s, strike, u

Список запрещеных атрибутов:

• Атрибут alink запрещен для body
• Атрибут background запрещен для body
• Атрибут bgcolor запрещен для body, table, td, th, tr
• Атрибут border запрещен для img, object, но может быть использован в < em>table
• Атрибут clear запрещен для br
• Атрибут language запрещен для script
• Атрибут link запрещен для body
• Атрибут name запрещен для form, img, но может быть использован в a, button, input, map, meta, object, param, select, textarea
• Атрибут noshade запрещен для hr
• Атрибут nowrap запрещен для td, th
• Атрибут start запрещен для ol
• Атрибут target запрещен для a, area, base, form, link
• Атрибут text запрещен для body
• Атрибут type запрещен для li, ol, ul, но может быть использован в a, button, input, link, object, param, script, style
• Атрибут value запрещен для li, но может быть использован в button, input, option, param
• Атрибут vlink запрещен для body

Структурные изменения: элементы a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, select, small, span, strong, sub, sup, textarea, tt, var и текст не могут быть дочерними для blockquote, body, form, noscript. Другими словами – элементы blockquote, body, form, noscript могут иметь только блочные элементы в дочерних элементах первого уровня.

Отказ от атрибута target=”_blank” для ссылок. Во-первых, указывать пользователю на то, как и где открывать ссылку — не красиво. Во-вторых, если необходимо, это можно сделать простым способом и продвинутым.

Что вы приобретаете?

• Хорошо структурированую разметку
• Четкое отделение содержимого от оформления
• Возможность более быстрой и легкой работы и поддержки кода
• Дисциплину в написании кода
• Респект и уважуху ;)

Когда стоит использвать Transitional? Тут есть два основных момента. Переходная схема хороша, когда вы работаете с большим количеством чужого кода, поменять который не представляется возможным. Хороший пример — большинство CMS. В большинстве случаев невозможно изменить их код, не залезая в ядро, что автоматически исключает возможность обновлений.

Второй момент — использование iframe. Если вы используете в своих проектах iframe, то он не оставляет вам выбора. Используте Transitional.

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

После составления корректного HTML-макета, используйте CSS для визуального оформления. (Тут уже дело вкуса, некоторые верстают CSS “с лету”, а некоторые только после создания HTML-макета)

Стандарт XHTML более строг к синтаксису чем HTML, он не допускает наличия незакрытых тегов, одинарные теги тоже должны быть закрыты (self-closing). Элементы в XHTML прописываются строчными, а не заглавными буквами. Значения атрибутов элементов должны быть указаны в кавычках. Есть и другие отличия, но более подробно я описывать их здесь не буду.
Есть два момента, которые нужно помнить всегда:

• (X)HTML предназначен для разметки содержимого и только
• CSS предназначен для визуального оформления содержимого

Почему семантика? Я приведу важные на мой взгляд аспекты:

• Структурированый код гораздо лучше читается поисковиками
• Код будет понятен не только автору, но и тем, кто будет работать с ним после него
• Работа с DOM’ом становится проще и доступнее.

Не стоит путать семантику и валидность. Если документ валиден, это еще не значит что он семантически корректен. Валидатор не знает, к примеру, что вы вместо заголовков использовали жирный шрифт, оформленный в CSS, или же что ваш список ссылок, совсем не список, а параграфы через перенос строки.

Кстати валидность, по моему мнению, относится к минимальным требованиям к коду и является обязательной. И это не дань моде, а порядок и инструмент самопроверки. Но это отдельная тема.

Некоторые основные элементы разметки

Заголовки
Используте элементы h1 – h6 для оформления заголовков документа. Не пытайтесь “подделать” заголовки визуально с помощью CSS, это черевато проблемами с поисковиками.

<h1>Заголовок</h1>
<h2>Подзаголовок</h2>

Абзац/Параграф

Пользуйтесь элементом p для создания абзацев в тексте, не обрывайте строку с помощью br. (И помните, в HTML-документе, не может быть текста, не “обернутого” в теги). Элемент br можно использовать, но надо делать это с умом.Неверно:

Мама мыла раму<br />
Папа курил Приму 

Верно:

<p>Мама мыла раму</p>
<p>Папа курил приму</p>

Выделение текста

em
Используйте элемент em для выделения текста из общего контекста. Если раньше вы использовали для этого элемент i, делающий текст наклонным, то прекратите это, так как в данном случае выделение будет сугубо визуальным, а в случае использования em, еще и логическим.

strong
Элемент strong пришел на замену элементу b. Логика использования примерно та же, что и в em/i, с той лишь разницей, что в данном случае выделение текста будет жирным шрифтом.

Неверно:

Здесь есть <i>выделеное</i> слово 

Верно:

Здесь есть <em>выделеное</em> слово 

Цитирование
Элемент cite хорош для выделения коротких цитат внутри текста, и является строчным элементом.
Элемент blockquote также используется для цитирования, но будет полезен для больших цитат, вынесеных в отдельные блоки. Является блочным элементом.

Примеры:

<p><cite>Девелопер предлагающий крэки, подобен корове, рекламирующей говядину</cite> - Paradigm.ru</p>

Дополнительно, можно использовать атрибут cite элемента blockquote для указания источника цитаты:

<blockquote cite="http://www.w3c.org">The value of this attribute is a URI that designates a source document or message. This attribute is intended to give information about the source from which the quotation was borrowed.</blockquote>

Списки

Если у вас есть списки (к примеру меню – это ничто иное как список ссылок) – используйте элементы списков ul/ol, ненумерованый и нумерованый список соответственно. Оформление списков в CSS позволяет добиться очень впечатлающих результатов.

Неправильно:

<a hrеf="about.html">Обо мне</a><br/>
<а hrеf="services.html">Услуги</a><br/<
<а hrеf="notes.html">Заметки</a><br/>
<а hrеf="grandma.html">Бабушка</a>

Правильно:

<ul>
<li><а hrеf="about.html">Обо мне</a></li>
<li><а hrеf="services.html">Услуги</a></li>
<li><а hrеf="notes.html">Заметки</a></li>
<li><а hrеf="grandma.html">Бабушка</a></li>
</ul>

Определяющие списки

Определяющие списки (dl) созданы для определения чего-либо и его описания. В отличии от обычных списков, в dl изначально указывается dt(definition term) – термин, а затем его описание/я dd(definition description). Определяющие списки подходят для разметки диалогов, страниц ЧаВо, технической документации.

Пример:

<dl>
<dt>Вася:</dt>
<dd>А я все равно буду верстать таблицами!</dd>
<dt>Петя:</dt>
<dd>Ну и дурак!</dd>
</dl>

Данная статья не претендует на полноту раскрытия темы, а лишь приоткрывает некоторые ее аспекты. Надеюсь что она будет полезна начинающим и колеблющимся.

В большинстве случаев довольно тяжело проинформировать клиента о том, как использовать темплейты или CMS, которые вы ему предоставляете, а иногда просто неприемлемо толкать пламенные речи о семантической верстке и веб-стандартах. Клиент может/будет использовать “старую, добрую разметку”, ту, которую он знает, просто потому что она работает и выглядит так как он привык. Скорее всего в ней будут присутствовать нежелательные (deprecated) тэги и атрибуты, такие как bgcolor, align и “вечный” font. Эта статья о том, как блокировать нежелательные HTML-тэги с помощью CSS, тем самым аккуратно направляя клиента в правильном направлении.

Есть несколько решений проблемы. Одно из них – вывод предупреждающего изображения с помощью CSS, когда изпользуются нежелательные тэги. Подробные обьяснения этого способа есть здесь и здесь. Второе решение – “вырезание” нежелательных тегов и атрибутов на стороне сервера. Этот способ является наиболее эффективным, другое дело что не всегда есть контроль за сервером где расположен сайт.

Идея состоит в том, чтобы сохранить естественный каскад и наследие стилей во всех браузерах, элегантно “отключая” HTML, нежелательный к использованию клиентом. И тогда клиент перестанет использовать его, потому что нежелательные тэги просто перестанут “работать”. Элегантный и ненапрягающий клиента способ, который направит его по верному пути.

Нежелательные HTML-тэги и атрибуты:

 <font>
<basefont>
<center>
<strike>
<s>
<u>
bgcolor
border
align
vspace
hspace
valign
width
height

Решение

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

На пример этот CSS:

 font { color:inherit; } 

будет превалировать над этим кодом:

 <font color="blue">blue</font> 

Соответственно цвет текста внутри тэга font будет цветом, наследуемым по каскаду, а не синим, как задано в коде. То что надо. Но как вы наверняка знаете – у Internet Explorer есть проблемы с наследуемыми значениями. И в седьмой версии тоже. Так что за работу:

Expressions и currentStyle в помощь:

 font {
color:inherit; /* Нормальные браузеры */
color:expression(this.parentNode.currentStyle["color"]); /* IE */ }

Работает? Отлично, поехали дальше:

 font {
font-family:inherit; /* Нормальные браузеры */
font-family:expression(this.parentNode.currentStyle["fontFamily"]); /* IE */
} 

Все чудесно, кроме того что Opera 9 не наследует значение для font-family. К счастью font нас тоже устроит:

 font {
font:inherit; /* Нормальные браузеры */
font-family:expression(this.parentNode.currentStyle["fontFamily"]); /* IE */
}

С этим разобрались. Перейдем к свойству font-size. Здесь нужна деликатность, так как значение размера шрифта наследуется по отношению к вычисляемому (computed) значению. Предыдушие expression‘ы здесь не сработают, так как если для body выставлено значение свойства font-size, равное 2em, то вычисление значения размера шрифта начнется от этой точки. Браузер проверит значение font-size для родительского элемента тэга font, которое равняется 2em и представит вычисляемое значение, равное 4em (2em от 2em). А это не то что нам нужно. Решение простое. Нужно использовать начальное значение font-size, равное 100% для всех браузеров. Давайте добавим несколько свойств нежелательному тэгу basefont, чтобы и его утихомирить. Вот полный список правил для “укрощения” тэгов font и basefont:

 font,basefont {
color:inherit; /* Нормальные браузеры */
color:expression(this.parentNode.currentStyle["color"]); /* IE */
font:inherit; /* Нормальные браузеры. Font вместо font-size для Оперы */
font-family:expression(this.parentNode.currentStyle["fontFamily"]); /* IE */
font-size:100%; /* Все браузеры. Размеры наследуются */
}

Двигаемся дальше. Давайте воспользуемся базовой техникой, чтобы отменить тэги center, s, strike и u:

center {
text-align:inherit; /* Нормальные браузеры */
text-align:expression(this.parentNode.currentStyle["textAlign"]); /* IE */
}
s,strike,u {
text-decoration:inherit; /* Нормальные браузеры */
text-decoration:expression(this.parentNode.currentStyle["textDecoration"]); /* IE */
}

Свершилось! Мы “отключили” большинство нежелательных тэгов, используя только CSS и expression’ы.

А как же атрибуты? HTML4 включает в себя некоторое количество нежелательных атрибутов, которые могут изрядно попортить нервы. Давайте их тоже “повыключаем”. Начнем с align:

*[align] { text-align:inherit; } /* Нормальные браузеры */

Все бы хорошо, но IE6 не поддерживает селекторы атрибутов. Посему, нам надо модифицировать expression, для того чтобы он проверял наличие атрибута align у тэга. Вот что получилось:

*[align] { text-align:inherit; } /* Нормальные браузеры */
* { text-align:expression(this.align ? this.parentNode.currentStyle["textAlign"] : ''); } /* IE */

Далее на очереди атрибуты тэга img. Помимо атрибута align, мы хотим отключить атрибуты border, vspace и hspace. Так как значения margin и border не наследуются, то здесь применимо простое правило:

img { margin:0; border:none; } /* Все браузеры */ 

Вот здесь мы как раз сталкиваемся с неразрешимой проблемой для IE6. vspace и hspace не равнозначны свойству margin в нем, поэтому IE6 будет продолжать отображать их. Единственное решение, которое пришло мне в голову это написать маленький скриптик, который будет просто удалять эти атрибуты при загрузке документа:

window.onload = function() {
for (i=0;i
document.getElementsByTagName("img")[i].removeAttribute("vspace");
document.getElementsByTagName("img")[i].removeAttribute("hspace");
}
}

Я бы предпочел не использовать javascript, но в данном случае я просто не вижу другой альтернативы. Так что пусть будет. Теперь добьем атрибут type в тэге ol:

ol { list-style-type:decimal; } /* Все браузеры */

А теперь атрибут bgcolor для body:

body { background-color:transparent; } /* Все браузеры */

Таблицы. Финальный шаг. В таблицах, в HTML4/4.01, есть ряд нежелательных атрибутов, которые активно использовались для верстки страниц. Но мы же не хотим, чтобы клиент использовал таблицы для верстки? Поэтому давайте отключим атрибуты width, height, bgcolor, valign и border:

table,tr,th,td {
width:auto; /* Все браузеры */
height:auto; /* Все браузеры */
background-color:transparent; /* Все браузеры */
vertical-align:inherit; /* Все браузеры (включая IE) */
border:none; /* Все браузеры */
}

Подведем итоги:

Используя CSS-правила и минимальный javascript, нам удалось “отключить” большинство нежелательных тэгов и атрибутов, элегантно сохраняя естественное наследование. Нам не нужно “учить” клиента, он в любом случае должен будет использовать правильную разметку. С учетом одной, очень важной ремарки – очень важно предоставить клиенту достаточное количество описаных CSS-классов, чтобы он не был ограничен в работе с разметкой.

Все стили вместе:

font,basefont {
color:inherit; /* Нормальные браузеры */
color:expression(this.parentNode.currentStyle["color"]); /* IE */
font:inherit; /* Нормальные браузеры. Font вместо font-size для Оперы */
font-family:expression(this.parentNode.currentStyle["fontFamily"]); /* IE */
font-size:100%; /* Все браузеры */
}
center {
text-align:inherit; /* Нормальные браузеры */
text-align:expression(this.parentNode.currentStyle["textAlign"]); /* IE */
}
s,strike,u {
text-decoration:inherit; /* Нормальные браузеры */
text-decoration:expression(this.parentNode.currentStyle["textDecoration"]); /* IE */
}
*[align] { text-align:inherit; }  /* Нормальные браузеры */
* { text-align:expression(this.align ? this.parentNode.currentStyle["textAlign"] : ''); }  /* IE */
img { margin:0; border:none; }  /* Все браузеры */
ol { list-style-type:decimal; }  /* Все браузеры */
body { background-color:transparent; /* Все браузеры */ }
table,tr,th,td {
width:auto; /* Все браузеры */
height:auto; /* Все браузеры */
background-color:transparent; /* Все браузеры */
vertical-align:inherit; /* Все браузеры (включая IE) */
border:none; /* Все браузеры */
}

По материалам monc.se

< а onclick="return !window.open(this.href)" hrеf="http://www.google.com">

Преимущества этого способа перед обычным open.window(url) в том, что если javascript отключен, то ссылка все равно сработает. Кроме того, ссылка будет проиндексирована поисковиками.

Проверено в FF2, IE6/7, Opera 9.20, Safari/Win.

Поведение браузеров при нажатии Ctrl+Click / Shift+Click:
В IE6 – в обоих случаях новое окно.
В IE7 – в обоих случаях новый таб (подозреваю что зависит от настроек браузера)
В FF2 – неадекват. ctrl+click открывает две вкладки, shift+click вкладку и окно
Opera – в обоих случаях новый таб
Safari/Win – в обоих случаях новое окно

При нажатии колесиком мышки ссылка срабатывает как обычно везде, кроме IE6, естественно.

In general, не стоит принуждать посетителей к чему-либо, предпочтительнее дать посетителю знать какого рода сама ссылка (файл [включая тип], внешняя/окно) с помощью иконок, которые можно легко прикрутить с помощью CSS, на пример вот так, тем самым давая ему возможность выбрать самому, где ее открыть.

Готовых скриптов в Сети много, разной степени навороченности и крутизны, но мне нужно было что-то простое и я не хотел использовать javascript, поэтому решил сделать сам. И вот что у меня получилось:

Давайте посмотрим как делается симпатичный календарь с помощью HTML/CSS.
Как видно из скриншота, было довольно много ограничений, в основном по размерам. Фактически пришлось втиснуть весь месяц в кубик размерами 200х150 пикселей. Так как календарь верстался для уже готового сайта, то простора для творчества было совсем мало.

Начнем с кода. Мне показалось логичным сделать календарную структуру с помощью definition list.

Definition term я оставил пустым, так как заголовок был задан в бэкграунде. Месяц, названия дней недели и числа я описал списками, вложеными в definition description.

Собственно весь HTML:

<dl>
<dt> </dt>
<dd>
<p class="month">May 07</p>
</dd>
<dd>
<ul class="week">
<li>S</li>
<li>M</li>
<li>T</li>
<li>W</li>
<li>T</li>
<li>F</li>
<li>S</li>
</ul>
</dd>
<dd>
<ul class="days">
<li><а hrеf="#"> </a></li>
<li><а hrеf="#"> </a></li>
<li><а hrеf="#">1<span>Content 1</span></a></li>
<li><а hrеf="#">2<span>Content 2</span></a></li>
<li><а hrеf="#">3<span>Content 3</span></a></li>
<li><а hrеf="#">4<span>Content 4</span></a></li>
<li><а hrеf="#">5<span>Content 5</span></a></li>
<li><а hrеf="#">6<span>Content 6</span></a></li>
<li><а hrеf="#">7<span>Content 7</span></a></li>
<li><а hrеf="#">8<span>Content 8</span></a></li>
<li><а hrеf="#">9<span>Content 9</span></a></li>
<li><а hrеf="#">10<span>Content 10</span></a></li>
<li><а hrеf="#">11<span>Content 11</span></a></li>
<li><а hrеf="#">12<span>Content 12</span></a></li>
<li><а hrеf="#">13<span>Content 13</span></a></li>
<li><а hrеf="#">14<span>Content 14</span></a></li>
<li><а hrеf="#">15<span>Content 15</span></a></li>
<li><а hrеf="#">16<span>Content 16</span></a></li>
<li><а hrеf="#">17<span>Content 17</span></a></li>
<li><а hrеf="#">18<span>Content 18</span></a></li>
<li><а hrеf="#">19<span>Content 19</span></a></li>
<li><а hrеf="#">20<span>Content 20</span></a></li>
<li><а hrеf="#">21<span>Content 21</span></a></li>
<li><а hrеf="#">22<span>Content 22 Blah blah many content much more content</span></a></li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</dd>
<dd id="descr">Point cursor to some date</dd>
</dl>

Здесь я думаю стоти прояснить один момент. Внутри каждого элемента списка есть ссылка, текстом которой является само число и там же находится span, внутри которого находится текст подсказки, которая нужна нам при наведении мышки. У span‘а изначально прописано свойство display:none, чтобы его не было видно.

Так как span находится в ссылке (как Ленин в свое время :) ), то мы можем поменять ему свойства на событии hover. Все что нам нужно это поменять свойство display на block. Ну почти все. Этот способ называется Pure CSS Popups, который описал небезызвестный Eric Meyer.

Но рыжий Эрик схитрил(?) и не описал у себя баг, из-за которого способ не работает в IE6… Но Гугль как всегда рулит и я нашел решение этой проблемы. Суть его сводится к тому, что в a:hover ОБЯЗАТЕЛЬНО нужно указать какое-либо свойство, которое не присутствует в a:link, a:visited и a:active. Любое кроме color. Я выбрал text-indent: 0. Ура, заработало!
Есть еще один момент. Так как мне нужно было абсолютно позиционировать текст подсказки внутри блока, то для definition list я задал position:relative, не указывая явно top и left, а для span с подсказкой position:absolute и координаты.

Всем элементам списка я задал фиксированую ширину и высоту и float:left. С размерами подогнал так, чтобы в одну строку влезали только 7 чисел.

Смотрим на стили:

dl{
width: 214px;
height: 182px;
background: url("schedule-bg.gif") left top no-repeat;
margin: 0 auto;
position:relative;
}
dt{
height: 34px;
}

dd ul{
margin: 0;
}

dd ul li{
list-style: none;
margin: 3px 1px 1px 1px;
width: 26px;
height: 12px;
line-height: 12px;
float: left;
text-align: right;
cursor: pointer;
font-size: 12px;
}
dd ul li a{
display:block;
width: 26px;
height: 12px;
text-decoration: none;
color: #0000FF;
}

dd ul li a span{
display:none;
}

ul.days li a:hover{
color: #FBC500;
text-indent: 0; /*DO NOT REMOVE THIS OTHERWISE HOVER WILL NOT WORK IN IE6!*/
}

ul.days li a:hover span{
display: block;
position: absolute;
left: 5px;
top: 150px;
width: 200px;
height: 23px;
overflow: hidden;
text-align: center;
background: #5c68ba;
color: #FFFFFF;
text-decoration: none!important;
}
.month{
font-size: 12px;
font-weight: bold;
text-align: center;
}

.week li{
border: none;
font-weight: bold;
margin-left: 1px;
margin-right: 2px;
}

.days{
margin-left: 5px;
height: 98px;
*height: 85px;
width: 205px;
}

#descr{
clear: both;
color: #FFFFFF;
font-size: 12px;
text-align: center;
padding-top: 3px;
height: 23px;
}

Остался только один нерешенный момент. Приходится в ручную передвигать первое число месяца между днями недели, добавляя пустые элементы списка. Не придумал нормального решения.

Все, вроде бы ничего не упустил. Рабочий пример можно посмотреть и забрать.

Верстал я все это дело в XML/XSL, вот так выглядит тэмплэйт:

<dl>
<dt> </dt>
<dd>
<p class="month">
<xsl:value-of select="$SHARED/MONTHS/LIST[@ID= $month]/@NAME"/>
</p>
</dd>
<dd>
<ol class="week">
<xsl:for-each select="$SHARED/WEEK/ITEM">
<li><xsl:value-of select="text()"/></li>
</xsl:for-each>
</ol>
</dd>
<dd>
<ol class="days">
<xsl:for-each select="$SHARED/MONTHS/LIST[@ID= $month]/ITEM">
<li>
<a>
<xsl:if test="@NUM = $date">
<xsl:attribute name="class">currentday</xsl:attribute>
</xsl:if>
<xsl:attribute name="hrеf"><xsl:value-of select="@HREF"/></xsl:attribute>
<xsl:value-of select="@NUM"/>
<span><xsl:value-of select="text()"/></span>
</a>
</li>
</xsl:for-each>
</ol>
</dd>
<dd id="descr"><xsl:value-of select="$SHARED/MONTHS/DESCR"/></dd>
</dl>

На пути к XML нодам не обращайте внимания, особенности платформы.

Многие вэб-разработчики уделяют этому аспекту юзабилити не достаточно внимания или совсем не уделяют, не смотря на то что существует достаточно много способов для реализации “подсветки”.

Давайте рассмотрим несколько сравнительно не сложных примеров.

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

Пример HTML кода меню:

<ul>
<li><а hrеf="#" class="home">Home</a></li>
<li><а hrеf="#" class="about">About us</a></li>
<li><а hrеf="#" class="contact">Contact us</a></li>
</ul>

Хитрость и простота одновременно в этом примере заключаются в том, чтобы задать уникальный id в тэге body, для каждой страницы сайта. Id страницы должен совпадать с названием класса элемента меню и тогда стили к этим элементам можно применять постранично:

#home .home, #about .about, #about .about, #contact .contact{
color:red;  font-weight: bold; /*Стили на ваше усмотрение*/
}

Получается что когда id страницы это “home”, то к элементу меню с классом .home применяются стили описанные выше. И так далее. Просто, правда?

Меня этот способ привлек тем, что в своей работе я использую id для тэга body очень часто и для меня реализация такой подсветки – описание одного стиля.

Второй способ, который я хотел бы показать, использует JS для того чтобы найти на странице все ссылки с заданным класом, сравнивает document.location с аттрибутом href самой ссылки и если они совпадают – добавляет к ней класс, для которого описывается стиль.

Соответственно, нужно создать .js файл в котором будет описана функция:

function highlight(){
var atags=document.getElementsByTagName("a");
for(var i=0;i
if(atags[i].className=="nav"){
if(document.location.href.indexOf(atags[i].href)!=-1){
atags[i].className="active";
}
}
}
}

Приаттачить файл к странице

<script type="text/javascript" srс="/js/highlight.js"></script>

и вызвать функцию при загрузке:

<body onload="highlight()">

В самом меню у всех ссылок должен быть один и тот же класс nav, а стиль описывается для класса .active.

<a class="nav" hrеf="/about/">О проекте</a>

У каждого способа есть преимущества и недостатки. О том как “включить” подсветку навигации в Wordpress можно почитать в давней, но не потерявшей актуальность, статье Юры Артюха “Wordpress и подсветка навигации” или в Кодексе WP по-английски.

А какое решение используете вы?

З.Ы. В попытке предвосхитить комментарии на тему того что у меня, мол, самого подсветки нет, скажу что работаю над этим :)

Давайте развеем это заблуждение.

И так, для начала нам нужен список. Ведь большинство всех меню это ни что иное как список ссылок.

<ul id="nav">
    <li>
    <а hrеf="#">Percoidei</a>
        <ul>
            <li><а hrеf="#">Remoras</a>
                <ul>
                    <li><а hrеf="#">Echeneis</a></li>
                    <li><а hrеf="#">Phtheirichthys</a></li>
                    <li><а hrеf="#">Remora</a></li>
                    <li><а hrеf="#">Remorina</a></li>
                    <li><а hrеf="#">Rhombochirus</a></li>
                </ul>
            </li>
            <li><а hrеf="#">Tilefishes</a></li>
            <li><а hrеf="#">Bluefishes</a></li>
            <li><а hrеf="#">Tigerfishes</a></li>
            </ul>
        </li>
    <li><а hrеf="#">Anabantoidei</a></li>
</ul>

Теперь у нас есть хорошо структурированый список. Добавим к нему немного стилей:

#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#nav a {
    display: block;
    width: 10em;
}

#nav li {
    float: left;
    width: 10em;
}

Для селектора #nav li необходимо указать ширину, чтобы это корректно отображалось в Опере. Так же не забудьте указать clear:left для блока, который последует за меню, так как мы используем float.

Теперь нам необходимо само “выпадание”. добавляем следующие стили:

#nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
}

#nav li:hover ul {
    left: auto;
}

Обратите внимание что здесь не используется display:none, для того чтобы сохранить максимальную доступность. Вместо него мы используем left: -999em. Это не обязательно и может быть легко заменено на display:none.

Вы конечно же обратили внимание на то, что у селектора li описан псевдо класс :hover, который конечно же не будет работать в Интернет Эксплорере. Для того, чтобы заставить наше выпадающее меню работать в Интернет Эксплорере мы используем этот маленький скриптик:

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Что делает этот скрипт? Он подменяет псевдо класс :hover для Интернет Эксплорера следующим способом. При событии mouseOver для элемента li скрипт добавляет ему класс sfhover для которого в свою очередь мы тоже должны прописать стиль. При событии mouseOut класс обнуляется.

#nav li.sfhover ul{
    left: auto;
}

Вот по большому счету и все. Теперь меню можно украсить и использовать.

Рабочий пример можно скачать.

По материалам HTML dog

• HTML формы будут заменены на XForms, основанные на XML и корректно транспортирующиеся на переносные устройства.
• HTML фрэймы будут заменены на XFrames.
• DOM события будут заменены XML события, которые используют XML Document Object Model.
• Новый тип элемента list, <nl>элемент, разработанный для отображения навигации в странице – navigation list. Призван для того чтобы заменить повсеместно использующиеся <ul>и <dl>.
• Любой элемент может выполнять функции гиперссылки, например <li href=”http://google.com” >Статьи</li>
• Любой элемент может обращаться к альтернативному источнику через аттрибут src
• Атрибут alt у элемента img будет удален: альтернативное описание элемента будет вставляться как содержимое самого элемента.
• Будут добавлены элементы Одиночный заголовок <h>и секция <section>. Уровень заголовка будет определяться вложенными элементами section, у каждого из которых будет собственный заголовок.
• Существующие, но нежелательные элементы i, b и tt, все еще разрешенные в XHTML 1.x (даже в Strict), перестанут поддерживаться в XHTML 2.0. Они должны быть заменены семантическими strong и em

Предполагаемый DOCTYPE для XHTML 2.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml2.dtd">

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

Существует много типов HTML , как то: HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict и множество других. DOCTYPE указывает браузеру структуру, элементы и их атрибуты для каждого типа HTML.

Указывание DOCTYPE критично, так как при его отсутствии браузер попытается отрендерить документ так как он считает нужным, а не так как этого хотите вы и/или требуют стандарты. Ни о какой валидации соответственно и речи быть не может. Можно провести часы, пытаясь заставить браузер отобразить то, что вам нужно без DOCTYPE и не добиться успеха.

Ранее ситуация была такова, что даже у W3C не было однозначных рекоммендаций по этому вопросу, но сейчас это изменилось и я привожу вам образец и список DOCTYPE, рекоммендованых к использованию W3C.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<p>… Your HTML content here …</p>
</body>
</html>

Наиболее распространенные виды DOCTYPE:

HTML 4.01 – Strict, Transitional, Frameset:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 – Strict, Transitional, Frameset:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 – DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Более полный список доступен на сайте W3C.

По поводу того какой из трех (Strict, Transitional, Frameset) использовать, решать вам, в зависимости от поставленых задач.

Немного ссылок:

- Полезная, но немного устаревшая статья о DOCTYPE, на сайте Webmascon, который к сожалению перестал обновляться.

- Don’t forget to add a doctype by W3C.