Правильная структурная разметка
Многим начинающим веб-разработчикам, которые ознакомились с концепцией разделения структуры и представления, не терпится применить полученные знания на практике. И вот тут-то их и подстерегает очередной вопрос: «Как правильно представить в коде названия разделов и подразделов, разнообразные меню, новостную ленту, иллюстрации – все то, из чего обычно и состоят веб-сайты?» Ведь именно оттого, насколько грамотно размечена веб-страница, будет зависеть ее соответствие семантическим требованиям стандарта и, как следствие, успех ее индексации поисковыми роботами.
Основная цель, которую я преследовал при написании данной статьи, – пояснить назначение основных структурных элементов HTML и дать рекомендации по их применению в тех или иных конкретных случаях. Сразу хочу оговориться, что в Сети можно найти кучу всевозможных старомодных HTML-справочников с подробнейшим описанием практически всех элементов и атрибутов языка разметки гипертекста. Но это совсем не то, что содержится в данной публикации. Потому что, во-первых, все элементы HTML нам и не нужны, так как многие из них являются нерекомендуемыми к использованию ввиду их предназначения не для структурной разметки, а для визуального форматирования. А во-вторых, в подавляющем большинстве справочников даже структурные элементы HTML рассматриваются не с точки зрения их логического предназначения (семантики), а с точки зрения их отображения в браузерах.
Поскольку мы уже твердо знаем, что язык разметки гипертекста HTML не предназначен для оформления веб-страниц, нас совершенно не должно интересовать, например, что заголовок первого уровня h1 отображается в браузерах большим жирным шрифтом. Потому что при помощи CSS он может отображаться как угодно или даже не отображаться вообще: вместо него может отображаться графическое изображение.
Итак, давайте перейдем к рассмотрению тех самых основных структурных элементов, правильное использование которых позволит нам создавать семантически корректные документы.
Заголовки
Практически любой веб-сайт можно в какой-то степени сравнить с книгой. Как и у любого печатного издания, у веб-сайта есть свое название, а также разделы и подразделы (части и главы). Для описания названий таких разделов и подразделов предназначены специальные структурные элементы заголовков: <h1>…</h1>, <h2>…</h2>, <h3>…</h3>, <h4>…</h4>, <h5>…</h5> и <h6>…</h6>.
Существует шесть различных уровней заголовков – от самого «главного» (h1) до самого, если можно так выразиться, «второстепенного» (h6). Правильный выбор смысловых уровней заголовков при разметке документа лучше всего продемонстрировать наглядно:
Элементом <h1>…</h1> логичнее всего воспользоваться для описания названия компании (если веб-сайт корпоративный) или для описания названия проекта (если веб-сайт тематический). В любом случае рекомендуется, чтобы в пределах одного документа элемент <h1>…</h1> встречался не более одного раза.
Когда на веб-странице отображается содержание какого-либо раздела веб-сайта или содержание какой-либо определенной публикации (желтые секции на иллюстрациях), для описания названия такого раздела или публикации лучше всего подойдет элемент <h2>…</h2>. При этом в процессе разметки различных подзаголовков (h3) и под-подзаголовков (h4) настоятельно рекомендуется придерживаться соответствующих уровней вложенности.
Что касается более второстепенных разделов, таких как «Новости», «Навигация» и «Поиск», для них вполне подходит элемент <h3>…</h3>. В принципе, ничего страшного не произойдет, если для их описания вы воспользуетесь и элементом <h2>…</h2>.
Именно так, например, и поступает Джеффри Зельдман.
Важно также отметить, что, хотя заголовки и являются блочными элементами, содержать в себе другие блочные элементы они не могут. В Спецификации HTML 4.01 модель содержимого заголовков описана как (%inline;)*. Это означает, что внутри элементов <h*>…</h*> может находиться только лишь текст в совокупности с различными строчными элементами. Если вы разместите внутри элемента <h*>…</h*> логический блок <div>…</div> или, например, другой элемент заголовка – такой код будет невалидным.
Абзацы
В любом документе каждый абзац текста в обязательном порядке должен быть представлен специальным структурным элементом <p>…</p>.
Нет. Не надо <br>.
Давайте дружно забудем про <br> и будем вспоминать о нем только в самых крайних, исключительных случаях. В частности, этот элемент действительно может пригодиться, если необходимо принудительно оборвать строку внутри элемента <address>…</address> или расположить соответствующим образом элементы формы:
<label for="id-login">Логин:</label>
<input type="text" name="login" id="id-login" maxlength="20"><br>
<label for="id-password">Пароль:</label>
<input type="password" name="password" id="id-password" maxlength="20">
Но для описания отдельных абзацев текста должен использоваться именно элемент <p>…</p>. Помимо собственно соответствия семантическим требованиям Спецификации, такой подход к разметке текста сам по себе весьма удобен: с помощью каскадных таблиц стилей можно легко менять абзацные интервалы, задавать отступы для первых строк, назначать горизонтальное выравнивание для текста – все то, что мы обычно делаем, когда форматируем обычные документы в Microsoft Word™.
Структурный элемент <p>…</p> является блочным элементом и имеет модель содержимого (%inline;)*. Он не может содержать в себе другие блочные элементы, в том числе и другие элементы <p>…</p>.
Наиболее распространенные синтаксические ошибки:
<p><div>Текст</div></p>
<p><ul>
<li>Текст</li>
<li>Текст</li>
</ul></p>
<p><p>Текст</p></p>
Правильное использование:
<div>
<p>Первый абзац</p>
<p>Второй абзац</p>
<ul>
<li>Пункт списка</li>
<li>Пункт списка</li>
</ul>
<p>Третий абзац</p>
</div>
Что касается пустых элементов <p></p>, их использование хотя и допускается (не является синтаксической ошибкой), но настоятельно не рекомендуется, так как браузерам предписано игнорировать такие конструкции.
Адрес
Совсем немногие веб-разработчики знают о существовании элемента <address>…</address>. Те же из них, кому этот структурный элемент известен, почему-то упорно стараются его не использовать. А зря.
Предназначен этот элемент для разметки контактной информации (почтовый адрес, номера телефонов и факсов, адрес e-mail и т.п.) Например, вот так. Кстати, могу засвидетельствовать, что кофе «MADEO» – это действительно превосходный напиток. Думаю, что сейчас самое время «организовать» чашечку кофе и посмотреть на реальный пример разметки с использованием структурного элемента <address>…</address>:
<address>
127521, Россия, Москва, Анненский проезд, 2а<br>
Телефон/Факс: (495) 988-81-96 (многоканальный)<br>
E-mail: <a href="mailto:coffee@madeo.ru">coffee@madeo.ru</a>
</address>
В принципе, если при помощи каскадных таблиц стилей задать для элемента <address>…</address> определенную ширину, в некоторых случаях можно обойтись и без элементов <br>. Но, так или иначе, в рассматриваемом примере элементы <br> вполне уместны, поскольку элемент <address>…</address> имеет модель содержимого (%inline;)* и не может содержать в себе блочные элементы.
Цитаты
Для оформления в коде цитат Спецификация HTML 4.01 предусматривает два разных структурных элемента:
- Строчный элемент
<q>…</q>, который не задает переход на новую строку и предназначается для разметки коротких цитат. - Блочный элемент
<blockquote>…</blockquote>, который начинается с новой строки и предназначается для разметки длинных цитат.
Но тут не все так просто. В частности, с элементом <q>…</q>. Вообще, задумка у специалистов W3C была хорошая: согласно требованиям Спецификации все браузеры должны автоматически обрамлять содержимое элемента <q>…</q> кавычками. Причем эти кавычки должны соответствовать текущему языку документа, который, в свою очередь, можно задавать при помощи атрибута lang. Вид таких «автоматических» кавычек также можно изменять и в принудительном порядке при помощи CSS-свойства quotes.
Но «должны» – это ведь не значит «обязаны»... Вот и посчитали разработчики Internet Explorer, что поддерживать им данный структурный элемент совсем необязательно. В отличие от браузеров других производителей, ни один браузер компании Microsoft не обрамляет содержимое элемента <q>…</q> кавычками. И именно поэтому мы пока вынуждены воздержаться от использования этого элемента и оформлять короткие цитаты как обычный текст с добавлением кавычек «вручную»:
<p>Хотя, некоторые иногда еще добавляют: «и свое – не каждому...»</p>
Давайте теперь рассмотрим структурный элемент <blockquote>…</blockquote>, который прекрасно поддерживается всеми современными браузерами без исключения. Поскольку никакими кавычками этот элемент по умолчанию обрамляться не должен, никаких проблем с его поддержкой и не возникает. Но некоторые нюансы все же есть. Правда, несколько иного характера.
К сожалению, многие визуальные редакторы текста, встроенные в различные CMS, до сих пор активно используют этот структурный элемент для создания левого абзацного отступа. А некоторые начинающие веб-разработчики, глядя на такое форменное безобразие, начинают этим визуальным редакторам уподобляться.
Нет, blockquote – это не «структурный элемент левого абзацного отступа». Это ЦИТАТА.
И использоваться этот структурный элемент должен исключительно для разметки в документе длинных цитат. Любое иное употребление данного элемента противоречит семантическим требованиям стандарта.
У элемента <blockquote>…</blockquote> есть одна важная особенность. В отличие от всех уже рассмотренных нами структурных элементов, он имеет модель содержимого (%block;|SCRIPT)+. Это означает, что элемент <blockquote>…</blockquote> может иметь содержимое уровня блока. Более того, символ «+» в описании модели содержимого предписывает элементу <blockquote>…</blockquote> иметь содержимое уровня блока в обязательном порядке. Другими словами, внутри элемента <blockquote>…</blockquote> обязательно должен находиться какой-нибудь другой блочный элемент. Логично предположить, что в большинстве случаев наиболее подходящим по смыслу содержимым для элемента <blockquote>…</blockquote> является элемент <p>…</p>.
Неправильное использование:
<blockquote>Цитата</blockquote>
Правильное использование:
<blockquote><p>Цитата</p></blockquote>
Конечно же, элемент <blockquote>…</blockquote> может содержать не только абзацы текста. Цитата может включать в себя заголовки, списки и любые другие блочные элементы.
Списки
Что есть список? В общем случае это какая-то логически связанная последовательность каких-то элементов. Мы редко об этом задумываемся, далеко не всегда это замечаем, но на самом деле списки окружают нас везде и всюду. Что представляет из себя навигационное меню? Как бы ни было оно оформлено, в конечном итоге это перечень гиперссылок, а следовательно – список. Посетив любой форум, можно сразу обратить внимание на список постов, список активных пользователей, список администраторов и модераторов. И комментарии в блоге, и новостная лента на корпоративном веб-сайте – все это тоже списки.
Посмотрите на иллюстрацию. Что мы там видим? Невероятно, но это тоже список. И совершенно неважно, как этот список гиперссылок выглядит на веб-странице. Если по логике вещей «что-то» является списком, именно списком это «что-то» и должно быть представлено в коде – таковы семантические требования стандарта.
Спецификация HTML 4.01 предусматривает три разных типа списков:
- Неупорядоченные списки.
- Упорядоченные (нумерованные) списки.
- Списки определений (терминов и их описаний).
Неупорядоченные списки
То, что вы только что прочитали, является примером неупорядоченного (ненумерованного) списка. Для разметки такого списка предназначен структурный элемент <ul>…</ul>, внутри которого каждый пункт списка должен быть представлен элементом <li>…</li>:
<ul>
<li>Неупорядоченные списки.</li>
<li>Упорядоченные (нумерованные) списки.</li>
<li>Списки определений (терминов и их описаний).</li>
</ul>
Аналогичным образом должен оформляться и любой блок навигации. Например, на данном ресурсе навигационное меню представлено следующим образом:
<ul>
<li><a href="#">Публикации</a>
<ul>
<li><a href="#">Проектирование</a></li>
<li><a href="#">Дизайн веб-сайтов</a></li>
<li><a href="#">Верстка веб-сайтов</a></li>
<li><a href="#">Веб-программирование</a></li>
<li><a href="#">Оффтопик</a></li>
</ul>
</li>
<li><a href="#">Форум</a></li>
<li><a href="#">Справочник</a></li>
<li><a href="#">Файловый архив</a></li>
<li><a href="#">Об авторе</a></li>
</ul>
Списки могут быть вложенными. В приведенном выше примере пункт меню «Публикации» содержит пять подпунктов: «Проектирование», «Дизайн веб-сайтов», «Верстка веб-сайтов», «Веб-программирование» и «Оффтопик», которые представлены отдельным вложенным списком.
По умолчанию каждый пункт любого неупорядоченного списка выделяется специальным символом (маркером). Внешним видом такого маркера можно управлять при помощи каскадных таблиц стилей. Важно также отметить, что стилевые спецификации позволяют не только задавать в качестве маркера различные символы, но и полностью отключать отображение маркеров, а также использовать вместо них любое графическое изображение.
Здесь и сейчас мы не будем рассматривать способы оформления списков средствами CSS, поскольку это уже несколько выходит за рамки данной статьи. Тем не менее, в ближайшее время я планирую опубликовать серию материалов, подробно описывающих, как при помощи каскадных таблиц стилей могут быть оформлены разнообразные горизонтальные и вертикальные навигационные меню.
Неупорядоченными списками также являются и разнообразные ленты новостей, которые можно встретить на многих веб-сайтах. В общем случае разметка новостной ленты может выглядеть следующим образом:
<ul>
<li>
<p class="date">02 / 06</p>
<h4>Новый дизайн веб-сайта</h4>
<p>Обновлен дизайн нашего ресурса. Ждем ваших отзывов.</p>
<p><a href="#">подробнее >></a></p>
</li>
<li>
<p class="date">15 / 05</p>
<h4>Разработка системы блогов</h4>
<p>По многочисленным просьбам начата разработка блоговой системы.</p>
<p><a href="#">подробнее >></a></p>
</li>
<li>
<p class="date">01 / 03</p>
<h4>Открытие форума</h4>
<p>Приглашаем всех желающих принять участие в конференции.</p>
<p><a href="#">подробнее >></a></p>
</li>
</ul>
Структурный элемент неупорядоченного списка <ul>…</ul> имеет модель содержимого (LI)+. Это означает, что внутри этого элемента могут находиться только элементы <li>…</li>. При этом как минимум один элемент <li>…</li> должен присутствовать обязательно. Что касается самого элемента <li>…</li>, модель его содержимого описана в Спецификации конструкцией (%flow;)*, которая подразумевает любые блочные и строчные элементы.
К сожалению, на сегодняшний день в Сети наблюдается весьма низкий уровень следования семантическим требованиям Спецификации. В процессе разметки документов многие веб-разработчики выбирают структурные элементы HTML не на основе их семантического предназначения, а в зависимости от того, как они выглядят в браузерах. В данном контексте списки либо вообще никак не оформляются, либо для их разметки используется все, что угодно, только не то, что нужно...
Наиболее распространенные семантические ошибки:
<a href="#">Товары</a> | <a href="#">Услуги</a> | <a href="#">Контакты</a>
<div>
<div><a href="#">Товары</a></div>
<div><a href="#">Услуги</a></div>
<div><a href="#">Контакты</a></div>
</div>
<p>
<span><a href="#">Товары</a></span>
·
<span><a href="#">Услуги</a></span>
·
<span><a href="#">Контакты</a></span>
</p>
Упорядоченные списки
Для разметки упорядоченного (нумерованного) списка предназначен структурный элемент <ol>…</ol>, внутри которого, как и в случае с неупорядоченным списком, должен присутствовать как минимум один элемент <li>…</li>. Все сказанное выше о неупорядоченных списках, справедливо и для нумерованных списков, а главное и единственное их отличие от неупорядоченных заключается в том, что каждый пункт нумерованного списка выделяется не маркером, а своим порядковым номером.
Упорядоченные списки логично использовать в тех случаях, когда такая нумерация вам явно необходима. Например, при описании четкой последовательности каких-либо действий:
<h2>Как искупать кошку</h2>
<ol>
<li>Тщательно почистите унитаз.</li>
<li>Поднимите крышку и добавьте шампунь.</li>
<li>Найдите и успокаивайте кошку, пока вы несете ее в туалет.</li>
<li>Быстрым движением поместите кошку в унитаз и закройте крышку.</li>
<li>Встаньте сверху на крышку унитаза.</li>
<li>Кошка взобьет мыльную пену.</li>
<li>Смойте воду 3-4 раза. Это обеспечит эффективное полоскание.</li>
<li>Откройте крышку унитаза и отбегите как можно дальше.</li>
<li>Чистая кошка вылетит из туалета и просохнет на открытом воздухе.</li>
</ol>
Давайте теперь посмотрим на результат.
Важно отметить, что пункты упорядоченных списков могут нумероваться не только арабскими цифрами. С помощью каскадных таблиц стилей для любого упорядоченного списка можно задать нумерацию римскими цифрами или буквами латинского алфавита. Причем как в нижнем, так и в верхнем регистре.
Списки определений
Список определений – это список терминов и их описаний. Основное и главное его предназначение – оформление различных глоссариев и справочников. В частности, расположенный на данном ресурсе справочник терминов представлен именно списком определений в полном соответствии с семантическими требованиями стандарта. В общем случае структурная разметка глоссария может выглядеть следующим образом:
<dl>
<dt>Авторизация</dt>
<dd>Процесс определения прав пользователя в системе или сети.</dd>
<dt>Домен</dt>
<dd>Группа компьютеров, образующих часть сети и использующих общую БД каталога.</dd>
</dl>
Структурный элемент <dl>…</dl> имеет модель содержимого (DT|DD)+ и должен содержать как минимум один элемент <dt>…</dt> и один элемент <dd>…</dd>.
Элемент <dt>…</dt> предназначается для разметки непосредственно термина, а элемент <dd>…</dd> – для описания этого термина. При этом очень важно знать и помнить, что элемент <dt>…</dt> имеет модель содержимого (%inline;)* и может содержать в себе только текст и строчные элементы. В то же время для элемента <dd>…</dd> предусмотрена модель содержимого (%flow;)*, поэтому он может содержать как строчные, так и блочные элементы.
Конечно же, сфера применения списков определений не ограничивается одними только глоссариями и справочниками. Без какого-либо видимого нарушения семантики элемента <dl>…</dl> списком определений очень удобно оформлять диалоги, в которых элемент <dt>…</dt> именует говорящего, а элемент <dd>…</dd> содержит его слова:
<dl>
<dt>Маша</dt>
<dd>Сходим завтра в кино?</dd>
<dt>Вася</dt>
<dd>У меня девушка есть!</dd>
<dt>Маша</dt>
<dd>Я твоя девушка! Придурок обкуренный...</dd>
</dl>
Также ничего страшного не произойдет, если оформить списком определений ленту новостей. Это особенно удобно и правильно, если события в новостной ленте представлены только лишь датами и ссылками-заголовками. Выглядеть это может примерно так:
<dl>
<dt>18.05</dt>
<dd><a href="#">Новый проект: четырехэтажный коттедж на юге города Самары...</a></dd>
<dt>07.04</dt>
<dd><a href="#">Обновлен ассортимент разборных бассейнов для дачи...</a></dd>
</dl>
Таблицы
Прежде чем вставить в код таблицу, подумайте: является ли то, что вы собираетесь в ней разместить, табличными данными? Представьте себе, что вы готовите содержащий такую таблицу документ не для размещения в Сети, а просто для печати. Стали бы вы в таком случае создавать этот документ с помощью Microsoft Excel? Насколько это было бы удобно? Если ответы на все эти вопросы будут положительными – таблица в вашем документе действительно необходима. Если же нет – в вашем документе ей не место. Попробуйте в таком случае подобрать для описания вашего контента другие, более подходящие по смыслу структурные элементы HTML.
Реальный пример, когда использование таблиц вполне оправдано, можно посмотреть на данном ресурсе в разделе Файловый архив. Это действительно та самая ситуация, когда для представления списка файлов уже недостаточно структурного элемента <ul>…</ul>. Поскольку для каждого файла необходимо описать его название, размер в килобайтах, ссылку для запуска скачивания и прочую служебную информацию, требуется некая двумерность – строки и столбцы.
<table>
<tr class="trhead">
<th class="th1">Наименование</th>
<th class="th2">Размер</th>
<th class="th3">Скачать</th>
<th class="th4">Скачано</th>
</tr>
<tr class="tbg1">
<td>minmax.js</td>
<td class="rgt">2 Kb</td>
<td class="cnt"><a href="#">Cкачать</a></td>
<td class="cnt">1</td>
</tr>
<tr class="tbg2">
<td>csshover.htc</td>
<td class="rgt">2 Kb</td>
<td class="cnt"><a href="#">Cкачать</a></td>
<td class="cnt">1</td>
</tr>
</table>
В данной статье я не буду рассматривать все относящиеся к таблицам структурные элементы. Тема эта довольно обширна, да и как мне кажется, уж с чем-чем, а с табличной моделью, как правило, хорошо знакомы даже начинающие веб-разработчики. В любом случае все желающие могут скачать Спецификацию HTML 4.01 на русском языке и ознакомиться с табличной моделью самостоятельно. Есть, правда, еще один аспект, который я просто не могу оставить в данной публикации без внимания.
Посмотрите на элемент <table>…</table> в приведенном выше коде. Он не содержит ни одного атрибута, в то время как в Сети до сих пор сплошь и рядом встречаются вот такие вот страшные конструкции:
<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0">
Дело в том, что атрибута height у элемента <table>…</table> не существует в принципе, а все остальные атрибуты хотя и не являются официально нерекомендуемыми, предназначаются исключительно для визуального форматирования. И если следовать концепции разделения структуры и представления, всем этим атрибутам совсем не место в структурной разметке. Давайте дружно заменим их соответствующими стилевыми инструкциями:
table {width: 100%;} /* width="100%" */
table {border: 1px solid;} /* border="1" */
th, td {padding: 0px; border: 1px solid;} /* border="1" cellpadding="0" */
table {border-collapse: collapse;} /* cellspacing="0" */
Графические изображения
Для вставки в документ графического изображения предназначен структурный элемент <img>, который является «пустым» и не может иметь содержимого. Вместо содержимого ему предписано в обязательном порядке иметь два атрибута: src и alt.
<img src="images/img003.jpg" alt="Чашечка кофе">
В отличие от атрибута src (c ним все понятно, он определяет адрес файла с изображением), особого внимания заслуживает атрибут alt. Этот атрибут предназначен для указания краткого текстового описания изображения (альтернативного текста). Подобный текстовый эквивалент графического изображения может быть легко прочитан речевым браузером или отображен на неграфическом текстовом терминале, а в графических браузерах он всегда отображается вместо соответствующего изображения в случае принудительного отключения графики. Так или иначе, атрибут alt ни в коем случае нельзя опускать. Причем требование это настолько серьезное, что отсутствие данного атрибута у элемента <img> рассматривается как самая настоящая синтаксическая ошибка.
Вообще, обеспечение доступа к документу для любых платформ и любых сред (графической, текстовой, звуковой) является важным аспектом верстки веб-сайтов. К сожалению, именно доступность зачастую упускается из виду многими веб-разработчиками. Помимо всего прочего, не следует забывать о том, что текстовое описание изображения может пригодиться не только для людей с ограниченными способностями, но и для поисковых роботов, которые уже давно научились индексировать alt-тексты.
Существует одно важное правило, которым необходимо руководствоваться при написании альтернативных текстов для графики. Заключается оно в следующем:
Альтернативный текст должен содержать эквивалент информации,
содержащийся в изображении, а не общую информацию о самом этом изображении.
Другими словами, альтернативный текст должен отражать основную суть того, что изображено. Если вы затрудняетесь сформулировать эту «основную суть», укажите атрибут alt с пустым значением (alt=""). В любом случае это будет лучше, нежели вот такой вот «мудрый» совет:
<img src="images/img003.jpg" alt="Крутая картинка! Включите отображение графики!">
Давайте теперь вкратце рассмотрим еще несколько атрибутов элемента <img>.
Поскольку каждое вставляемое в документ изображение имеет, как правило, свои индивидуальные размеры, будет совсем не лишним указать эти размеры явно:
<img src="images/img003.jpg" alt="Чашечка кофе" width="140" height="140">
Это позволяет зарезервировать место в окне браузера еще до загрузки изображения. Тем самым мы предотвращаем возможную перерисовку документа в браузере, которая может возникать в процессе загрузки изображений без заданных явно размеров. А вот атрибут border с весьма популярным значением "0" указывать не следует. Гораздо логичнее отключить рамку сразу для всех изображений при помощи каскадных таблиц стилей:
img {border: none;}
Помимо рассмотренных выше тонкостей с атрибутами, существует еще одно очень важное правило, которое касается использования элемента <img> как такового. Вообще, ситуация с графическими изображениями чем-то напоминает ситуацию с таблицами.
Прежде чем вставить в код графическое изображение, подумайте: несет ли это изображение достаточную смысловую нагрузку и имеет ли оно отношение к структуре документа? Типичными примерами «смысловой графики» являются фотографии товаров в каталоге, иллюстрации в публикациях, схема проезда и т.п. Подобные графические изображения действительно должны быть представлены именно элементом <img>. В то же время необходимо четко представлять себе, что всевозможные декоративные графические изображения никакого отношения к структуре документа не имеют. Согласно концепции разделения структуры и представления подобные элементы дизайна должны быть представлены не элементами <img>, а с помощью каскадных таблиц стилей.
Все графические изображения, которые не имеют отношения к структуре документа, должны быть представлены фоновыми изображениями при помощи CSS.
К примеру, на данной веб-странице элементами <img> представлены только лишь иллюстрации внутри этой статьи и пара «кнопок» в футере документа. Вся остальная графика – это элементы дизайна, представленные, как и положено, фоновыми изображениями.
Структурированный текст (фразы)
Фразы – это специальные строчные элементы, предназначенные для добавления дополнительной структурной информации к определенным фрагментам текста в абзацах, заголовках, списках и других блочных элементах. Все фразы имеют модель содержимого (%inline;)* и могут содержать в себе только текст и другие строчные элементы (в том числе и другие фразы).
-
Логическое ударение
Для смыслового выделения какого-либо фрагмента текста предназначены структурные элементы
<em>…</em>и<strong>…</strong>. При этом элемент<strong>…</strong>подразумевает усиленное (большее по сравнению с<em>…</em>) логическое ударение. С помощью данных элементов можно выделить в тексте ключевые слова, подчеркнуть основную мысль или расставить акценты.<p>Важно отметить, что <em>веб-стандарты</em> – это не стандарты в традиционном понимании. Это именно <strong>рекомендации</strong>, и никто не заставляет им следовать в принудительном порядке.</p>Нет, я могу, конечно, написать, что эти структурные элементы отображаются в браузерах по умолчанию «так-то» и «так-то», но не буду. Не буду из принципа, потому что при помощи каскадных таблиц стилей они могут отображаться как мне только заблагорассудится. ;-)
-
Определение термина
Для указания термина, который имеет определение, предназначен элемент
<dfn>…</dfn>.<p><dfn>World Wide Web Consortium</dfn> – организация, разрабатывающая и внедряющая технологические стандарты для сети Интернет.</p>Важно отметить, что данный структурный элемент должен использоваться только в том случае, если описывается один или два термина (не более). Если таких терминов много, гораздо логичнее и правильнее воспользоваться для их разметки списком определений.
-
Источник цитаты
Для указания источника цитаты предназначен структурный элемент
<cite>…</cite>. В качестве источника цитаты может выступать имя цитируемого человека, название книги или статьи, либо гиперссылка на соответствующий документ.<p>«Было Время разбрасывать камни, наступит Время эти камни собирать...»
<cite>Иисус Христос</cite>.</p>Наиболее распространенная ошибка, связанная с использованием данного структурного элемента – это оформление с его помощью действительных извлечений (цитат). Такая разметка является нарушением семантики элемента
<cite>…</cite>. Для представления в коде цитат предназначены другие структурные элементы, а элемент<cite>…</cite>должен использоваться исключительно для указания их источника. -
Программный код и переменные
Для разметки фрагментов программного кода предназначен структурный элемент
<code>…</code>. Данный элемент может использоваться для оформления в тексте примеров HTML-разметки, CSS-инструкций или кода любых языковых платформ разработки:<p><code><img src="images/img003.jpg" alt="Чашечка кофе" width="140" height="140"></code></p>
<p>Для отключения рамки у изображений укажите <code>img {border: none;}</code></p>
<p><code>$f_cat=mysql_fetch_array($r_cat);</code></p>Для обозначения в тексте переменной или аргумента компьютерной команды предназначается структурный элемент
<var>…</var>. На практике его применение может выглядеть следующим образом:<p>Команда для удаления файла в MS-DOS: del <var>имя_файла</var>.</p> -
Сообщения программ и ввод текста пользователем
Структурные элементы для оформления сообщений программ и разметки текста, который пользователь должен набрать на клавиатуре, используются довольно редко. Такие конструкции в большинстве случаев могут понадобиться только при верстке какой-нибудь технической документации. Тем не менее, знать и помнить о существовании таких элементов необходимо.
Для обозначения сообщения программы, сценария или команды предназначен структурный элемент
<samp>…</samp>:<p>Сообщение веб-сервера <samp>403 Forbidden</samp> означает, что доступ к запрашиваемому документу запрещен.</p>Для оформления текста, который пользователь должен набрать на клавиатуре, должен использоваться структурный элемент
<kbd>…</kbd>:<p>Наберите команду <kbd>format c:</kbd> и нажмите клавишу Enter. ;-)</p> -
Аббревиатуры и акронимы
Аббревиатура – это сокращенная форма слова или группы слов, используемая вместо этого слова или словосочетания. Читаются аббревиатуры как набор букв: WWW, HTTP, URI, СССР, СНГ.
Акроним – это тоже своеобразное сокращение, но, в отличие от аббревиатуры, такое сокращение произносится не побуквенно, а как единое слово. Типичными примерами акронимов являются NATO, ВУЗ, РАН. Большинство акронимов, как правило, склоняются.
Для точного обозначения в тексте аббревиатуры предназначен структурный элемент <abbr>…</abbr>, а для представления акронима – элемент<acronym>…</acronym>. Оба этих структурных элемента должны быть снабжены атрибутомtitle, содержащим расшифровку соответствующего сокращения. В графических браузерах такая расшифровка отображается всплывающей подсказкой при наведении курсора мыши на аббревиатуру или акроним в тексте документа.Разметка аббревиатур и акронимов является не только правилом хорошего тона, но и одним из требований WAI, поскольку обеспечивает правильную интерпретацию сокращений речевыми браузерами. Кроме того, заданные с помощью атрибута
titleрасшифровки индексируются поисковыми роботами, что может в некоторой степени влиять на рейтинг документов в поисковых системах.<p>Документ может быть полностью валидным, но при этом совершенно не соответствовать требованиям стандарта ввиду семантически неверного использования элементов
<acronym title="HyperText Markup Language">HTML</acronym>.</p>Если вы скажете, что HTML – это совсем не акроним, сложно будет с вами не согласиться. Это действительно типичная аббревиатура, которая по логике вещей должна быть представлена элементом
<abbr>…</abbr>. Но тут нас опять радует своей оригинальностью один весьма популярный браузер. Internet Explorer шестой версии не поддерживает элемент<abbr>…</abbr>. В седьмой версии IE это недоразумение, к счастью, исправлено, но пока доля пользователей шестой версии этого браузера все еще достаточна велика, от использования элемента<abbr>…</abbr>лучше воздержаться. Можно, конечно, воспользоваться вот такой вот страшной конструкцией:<abbr title="HyperText Markup Language">
<span title="HyperText Markup Language">HTML</span>
</abbr>Но это уже на любителя. В принципе, ничего страшного не произойдет, если для обозначения аббревиатуры вы просто воспользуетесь структурным элементом акронима. Ну и что, что речевой браузер прочитает оформленную элементом акронима аббревиатуру ЕБРР (Европейский банк реконструкции и развития) не как «е-бэ-эр-эр», а как «ебр!». Ведь это действительно не страшно, правда? ;-)
-
Надстрочный и подстрочный индексы
Надстрочный индекс (суперскрипт) – это расположение символов выше основной строки текста, а подстрочный индекс (субскрипт) – расположение символов несколько ниже основной строки текста. Как правило, надстрочный и подстрочный индексы отображаются с некоторым уменьшением размера текущего шрифта. Чаще всего такие конструкции используются для разметки математических и химических формул:
sin2 α + cos2 α = 1
C2H5OH
Для обозначения в тексте надстрочного индекса предназначен структурный элемент
<sup>…</sup>:sin<sup>2</sup> α + cos<sup>2</sup> α = 1Для обозначения в тексте подстрочного индекса предназначен структурный элемент
<sub>…</sub>:C<sub>2</sub>H<sub>5</sub>OH
А что если...
Если не существует структурного элемента HTML, отражающего смысл какого-нибудь фрагмента в вашем документе, стоит вспомнить об универсальных элементах <div>…</div> и <span>…</span>.
Элемент DIV
Как правило, практически любой документ можно условно разделить на несколько основных частей (блоков). В общем случае (как минимум) это хедер документа («шапка»), основной контент («тело») и футер документа («подвал»). Логично предположить, что все эти части было бы совсем неплохо как-нибудь разграничить. Такая разметка ничуть бы не ухудшала структуру документа и позволила бы лучше контролировать контекст при последующем применении стилевых спецификаций.
Для осуществления подобного разграничения предназначен структурный элемент логической группировки <div>…</div>. Модель содержимого этого элемента описана в Спецификации конструкцией (%flow;)*, которая подразумевает любые блочные и строчные элементы.
<body>
<div id="header">
<h1>Название проекта</h1>
<p>Краткое описание проекта</p>
</div>
<div id="content">
<h2>Название публикации</h2>
<p>Содержание публикации</p>
</div>
<div id="footer">
<address>Контактная информация</address>
<p>Информация об авторских правах</p>
</div>
</body>
Другими словами, элементы <div>…</div> являются своеобразными «контейнерами». Они группируют логически связанные элементы в отдельные блоки и разграничивают тем самым различные части документа. В данном конкретном случае – хедер, основной контент и футер.
В процессе выделения логических блоков в документе самое главное – это не переборщить. То, что элементу <div>…</div> присуща некоторая универсальность, совсем не означает, что им можно пользоваться где угодно и как угодно. Элементы логической группировки должны размещаться только в стратегически важных местах документа.
Не надо «плодить» лишние DIV-ы.
Семантическая верстка подразумевает не только грамотный выбор элементов HTML для описания структуры документа, но и отсутствие в разметке «лишних» структурных элементов, не несущих какой-либо смысловой нагрузки. Нет ничего хуже, чем вставка в код элемента <div>…</div> «просто так» или в оформительских целях.
Чем меньше разметки – тем лучше.
Не надо обрамлять элементом <div>…</div> каждый структурный элемент заголовка, списка или абзаца, и уж тем более ни в коем случае нельзя использовать его вместо этих структурных элементов. Аналогичным образом не следует использовать элемент логической группировки там, где более уместен структурный элемент адреса или цитаты.
Таковы общие принципы, которым необходимо следовать при разметке логических блоков. Несмотря на то, что все документы различны и должны структурироваться с учетом своих особенностей, старайтесь руководствоваться здравым смыслом и приведенными выше рекомендациями.
Элемент SPAN
Универсальный структурный элемент <span>…</span> является строчным элементом, имеет модель содержимого (%inline;)* и может содержать в себе только текст и другие строчные элементы.
Сам по себе элемент <span>…</span> не означает ничего (да, бывает и такое). Этот универсальный элемент предназначен для локального стилевого форматирования текста. Он позволяет выбрать любой фрагмент текста в документе и применить к нему какой-нибудь определенный стиль. Например, вот так:
<p>Ну, очень <span style="color: #FF0000;">красным</span> хочется, аж не можется...</p>
Но прежде чем воспользоваться универсальным элементом, спросите себя: нельзя ли решить задачу с помощью другого, более подходящего по смыслу структурного элемента? Ведь если вы выделяете что-то визуально, почему бы не выделить это «что-то» и логически?
Не надо «плодить» лишние SPAN-ы.
Наиболее распространенная ошибка – это использование элемента <span>…</span> там, где более уместны фразы. В частности, элементы <em>…</em> и <strong>…</strong>. Поскольку каскадные таблицы стилей позволяют задать красный цвет шрифта любому структурному элементу, приведенный выше фрагмент кода может выглядеть следующим образом:
<style type="text/css">
em {font-style: normal; color: #FF0000;}
</style>
<p>Ну, очень <em>красным</em> хочется, аж не можется...</p>
Только если вы твердо уверены, что для разметки слова «красным» логическое ударение вам не требуется, а выделить это слово красным цветом хочется так, что аж прям «не можется», использование универсального элемента <span>…</span> будет оправдано.
Подведем итоги
Итак, чтобы определить наиболее подходящий по смыслу элемент HTML для того или иного фрагмента документа, просто задайте себе вопрос: «Что этот фрагмент представляет из себя по сути?». Конечно, на первых порах у вас скорее всего будут возникать сомнения относительно правильности выбора структурных элементов. Это вполне нормально. Даже гений не может предусмотреть всех нюансов. Думайте, рассуждайте, спрашивайте и тогда, при определенном трудолюбии и методичности в анализе чужих работ, вы сможете достичь вполне профессионального уровня.
Еще раз хочу обратить ваше внимание на тот факт, что в процессе своего повествования я ни разу не упомянул о том, что содержимое того или иного структурного элемента «отображается в браузерах крупным полужирным шрифтом» или «отображается отдельным абзацем с увеличенным отступом слева». Не упомянул по той простой причине, что это совершенно неважно. Язык разметки гипертекста ни в коей мере не следует использовать для оформления веб-страниц. Эта задача целиком и полностью возлагается на каскадные таблицы стилей, которые позволяют задать размер шрифта или отступ для любого структурного элемента.
P.S. Зло существует...
Напоследок мне хотелось бы вкратце перечислить некоторые элементы и атрибуты HTML, которые предназначаются для визуального форматирования.
Элементы:
<b>, <basefont>, <center>, <font>, <i>, <s>, <strike>, <tt>, <u>
Атрибуты:
align, bgcolor, background (для всех элементов)
text, link, alink, vlink (для элемента <body>)
border, hspace, vspace (для элемента <img>)
height, width, nowrap (для элементов <th> и <td>)
type (для элементов <ul>, <ol>, <li>)
Если вы продолжаете использовать хотя бы один из них, можно констатировать, что вы не осознали необходимости следования веб-стандартам. Печально, но факт. Тем более, что при помощи каскадных таблиц стилей любые эффекты стилизации и форматирования реализуются намного эффективнее.
Ссылка на комментарий 29.10.2007 10:40
garA
Россия
В принципе, все знакомо, но вот использую далеко не все.. В частности, <address>...</address> и <blockquote>…</blockquote> ни разу не использол.. Теперь буду.. )
Ссылка на комментарий 29.10.2007 13:26
DeadlyShadow
Украина, Киев
Весьма интересно, но без уже полюбившехся болда и италика ..уже немного не удобно
Ссылка на комментарий 29.10.2007 16:56
Ivan
Россия, Питер
Все очень прозрачно и просто, но рассмотрите хотя бы вариант такого дизайна,
http://www.izh-auto.ru/
и как тут быть с div-ами, вроде как и решения совсем неменьшие получатся, чем у авторской конторы ?
Ссылка на комментарий 29.10.2007 22:12
Константин Ефимов
Россия, Тольятти
http://webstandards.org.ru
На самом деле никаких проблем с «болдом» и «италиком» нет.) Каскадные таблицы стилей позволяют задать полужирное или курсивное начертание шрифта для любого элемента. Более того, они позволяют задать такие визуальные эффекты (применительно к тексту), которые не под силу ни одному HTML-тэгу. Например, интерлиньяж (расстояние между строками).
Большую проблему, на мой взгляд, представляет фактор привычки. Элементы <b>...</b> и <i>...</i> – это всего лишь частный случай, и использовать вместо них (например) элементы <strong>...</strong> и <em>...</em> – не такая большая проблема. Гораздо сложнее в корне поменять сложившиеся стереотипы и понять разницу между кодированием ради нужного представления и кодированием ради правильной семантики...
Ответил на форуме.
Ссылка на комментарий 30.10.2007 01:20
kyzi007
Россия
Спасибо!
Ссылка на комментарий 31.10.2007 16:16
DELPHIna
Россия
Читаю с интересом и жду с нетерпением следущей статьи. Очень много узнала новых для себя тэгов :) особенно address понравился. Продолжайте писать. хорошо выходит!
Ссылка на комментарий 31.10.2007 21:33
broker
Украина, Бердянск
Читается легко и интересно, также узнал некоторые новые теги :)
Так если <b>...</b> и <i>...</i> являются не совсем корректными, может стоит отучить от их выгляда, путем смены пиктограмм на Ж и К как в Word ;)
P.S. а разве "шапка" - это хидер? вроде как бы хедер (англ. header или head)
Ссылка на комментарий 18.11.2007 01:50
tvorog
Sthlm
http://thatsaninterestingpoint.org.ua/
Все понимаю, кроме одного.
Почему у тебя в примерах разметки
инпуты, имг и бр'ы не закрытые???
О каких стандартах идет речь???
Ссылка на комментарий 18.11.2007 22:53
Константин Ефимов
Россия, Тольятти
http://webstandards.org.ru
Речь идет о стандарте HTML 4.01 Strict, который, в отличие от XHTML-синтаксиса, не требует закрытия «пустых» элементов. Более того, закрытые «пустые» элементы будут в данном случае являться основанием для получения соответствующего предупреждения от валидатора.
Ссылка на комментарий 21.11.2007 20:00
lancer
Россия, Ставрополь
Константин спс за статью, но с кивордами ты накосячил.
Правильное количество символов:
<meta name="description" content="не более 90 cимволов" /><meta name="keywords" content="не более 150 cимволов" />
Ссылка на комментарий 22.11.2007 02:11
Константин Ефимов
Россия, Тольятти
http://webstandards.org.ru
Ответил на форуме.
Ссылка на комментарий 24.11.2007 04:13
lancer
Россия, Ставрополь
Константин, по поводу заранее заданых размеров img ты приводишь следующий пример кода:
<img src="images/img003.jpg" alt="Чашечка кофе" width="140" height="140">Возникает вопрос: если задать высоту и ширину картинки через CSS, браузер уже не будет определять место для картинки заранее?
Или ты просто решил не писать, что это можно задать и через CSS?)
Ссылка на комментарий 24.11.2007 04:34
lancer
Россия, Ставрополь
Странно.. под говнокод определенно:
при том еще и для всех элементов... А как же в таком случае задать фон элементу <div>.
Что-то новое), или я неправильно понял?
И еще вопрос: что за экзотический баннер от w3c слева в футере?) Я по поводу: WAI-A ATAG 1.0
Ссылка на комментарий 24.11.2007 13:17
Константин Ефимов
Россия, Тольятти
http://webstandards.org.ru
Конечно же, размеры графического изображения можно определить и при помощи CSS. Но все дело в том, что каждое вставляемое в документ изображение имеет, как правило, свои индивидуальные размеры. Поэтому предусматривать во внешнем стилевом файле всевозможные размеры для графики представляется мне несколько абсурдным. Если же воспользоваться для этого не внешним CSS-файлом, а атрибутом style элемента img – толку от такой конструкции будет мало. Кроме увеличения объема кода это не даст ничего. Именно по этой причине я и рекомендую атрибуты width и height для определения размеров графических изображений.
С другой стороны, если вы твердо уверены и знаете, что все графические изображения определенного типа на вашем веб-сайте будут иметь одинаковые размеры (например, фотографии товаров в каталоге), вполне логично указать размеры этих изображений посредством CSS во внешнем стилевом файле.
Примерно так же, как и любому другому структурному элементу – при помощи CSS-свойства background. Поскольку фоновый цвет или фоновое графическое изображение относятся к оформлению (а не к содержанию), они должны задаваться посредством стилевых спецификаций.
Web Accessibility Initiative. Authoring Tool Accessibility Guidelines 1.0.
Проверить соответствие документа Priority 1 и Section 508 можно, например, здесь.
Ссылка на комментарий 24.11.2007 16:04
lancer
Россия, Ставрополь
Спасибо за ответ. По поводу background, я не заметил, что имеется ввиду именно тот, который применяется в коде разметки. Теперь все ясно!
Ссылка на комментарий 19.12.2007 17:27
Кабанов Дмитрий
Россия, Москва
Константин, отличная статья! Всё очень понравилось.
Хотел бы спросить Вашего совета по поводу единичных случаев использования атрибута style - допустимы ли они. (Я работаю web-программистом, и сайт попадает в мои руки, когда он уже свёрстан).
Ссылка на комментарий 19.12.2007 18:28
Константин Ефимов
Россия, Тольятти
http://webstandards.org.ru
Конечно же, атрибуты style допустимы. Это еще один из способов оформления, наряду с элементом <style>...</style> и стилевыми инструкциями, расположенными во внешнем стилевом файле. Но, как Вы сами заметили, данный атрибут рекомендуется использовать только в самых крайних, я бы даже сказал исключительных случаях. В первую очередь это обусловлено тем, что при использовании атрибута style происходит смешивание структурной разметки и оформления. С другой стороны, указанные в атрибуте style стилевые инструкции не будут кэшироваться. Как следствие, при активном использовании этого атрибута Вы не сможете воспользоваться одним из весьма существенных преимуществ разделения структуры и представления.
Ссылка на комментарий 25.12.2007 19:12
lancer
Россия, Ставрополь
По поводу абзацев текста хочу уточнить. Выходит что так будет неверно?
<div id="footer">Some text is here.
</div>
А будет верно именно так?
<div id="footer"><p>Some text is here.</p>
</div>
Ссылка на комментарий 25.12.2007 19:43
Константин Ефимов
Россия, Тольятти
http://webstandards.org.ru
Вот так будет семантически верно:
<div id="footer"><p>Some text is here.</p>
</div>
Ссылка на комментарий 01.01.2008 20:35
lancer
Россия, Ставрополь
Так я и думал)
Ссылка на комментарий 01.01.2008 23:04
lancer
Россия, Ставрополь
В процессе верстки у меня возникла неопределенность по поводу как быть если заголовок должен нести еще и функцию ссылки.
Посмотрел как сделано у вас:
<h1><a href="http://webstandards.org.ru/" title="О веб-стандартах и разработке веб-сайтов">webstandards.org.ru</a></h1>Будет ли семантически верным следующий код?
<a href="# title="Empty""><h2>Empty</h2></a>У <a> соответственно display:block.
Есть ли какое-то однозначное семантическое пр для данного случая?
Ссылка на комментарий 01.01.2008 23:35
Константин Ефимов
Россия, Тольятти
http://webstandards.org.ru
Здесь немного не в семантике дело. Семантические требования стандарта говорят нам только о том, что структурные элементы должны использоваться исходя из их смыслового, логического предназначения. Поэтому если Ваш заголовок второго уровня является именно заголовком (по смыслу), никаких семантических нарушений не произойдет.
Другое дело – это синтаксическая корректность документа (валидность). Спецификация HTML 4.01 предусматривает для элемента <a>...</a> модель содержимого (%inline;)* -(A). Это означает, что внутри данного элемента может находиться только лишь текст в совокупности с различными строчными элементами (за исключением других элементов <a>...</a>). Поскольку любой заголовок является блочным элементом, он не может вкладываться внутрь гиперссылки.
Другими словами, Вы можете вложить ссылку в заголовок, но никак не наоборот. При этом свойство display: block; для ссылки не имеет никакого значения, поскольку это всего лишь вопрос оформления.
Ссылка на комментарий 02.01.2008 12:49
lancer
Россия, Ставрополь
Спасибо, Константин, за подробное объяснение.
Ссылка на комментарий 07.01.2008 19:21
Влад Стратулат
Молдова, Кишинев
http://www.vladstratulat.com/
Очень хорошая статья.
Разъяснили некоторые вещи которые однозначно задали мыслить чуть-чуть иначе!
Спасибо большое!!
Ссылка на комментарий 21.05.2008 19:09
Виктор
Украина, Симферополь
http://wicin.net
Статья действительно хорошая, будем переучиваться!
Ссылка на комментарий 05.06.2008 18:38
Ян
Беларусь, Минск
http://www.yanajy.com
Всё хорошо, в принципе со всем согласен, но я бы не был настолько категоричным.
Поясню: открываем сайт http://www.w3.org/ (вроде бы авторитетный ;-)
Смотрим исходный код главного меню в шапке
и видим, что, мало того, список ссылок сделан не списком, так ещё и разделители, которые по идее должны быть бордерами, прописанными в CSS, являются вовсе не бордерами, а символами "|".
Далее... В центральной колонке.
Слева от заголовков стоят такие стрелочки-маркеры. И вставлены они не фоновой картинкой, а тегом <img>, что явно противоречит семантике:
<img width="17" height="11" alt="" src="/Icons/right"/>Offline Web Applications...Выходит, что w3.org - говнокод?
P.S. Я понимаю, что белорусский государственный флаг многим не нравится, пусть даже и мне, но это же не значит, что его можно так вот менять... Это тоже стандарт своего рода. ;-)
Ссылка на комментарий 05.06.2008 19:23
Zigzag
Беларусь, Минск
http://webdev.lovata.com
Ян, по поводу флага можете катить бочки на меня. Но именно этот флаг настоящая многовековая славная история белорусских земель.
Ссылка на комментарий 05.06.2008 19:43
Ян
Беларусь, Минск
http://www.yanajy.com
Я бы поспорил, хотя, как я уже сказал, мне наш флаг тоже не нравится. Но это уже дело политических взглядов, так что не будем больше заострять на этом внимание - блог не об этом :-)
Скажете что-нибудь по теме?
w3.org - говнокод?
Ссылка на комментарий 05.06.2008 21:24
Константин Ефимов
Россия, Тольятти
http://webstandards.org.ru
Собственно говоря, тут вот в чем дело. В первую очередь необходимо прийти к пониманию, что семантическая верстка и разделение структуры/представления – это все-таки не одно и то же. Приведенные Вами примеры наглядно демонстрируют нарушение идеологии разделения структуры и представления, но нарушение семантики – только отчасти (отсутствие списка). Тем не менее, Вы совершенно правы: даже великий W3C – это далеко не эталон конформности.
Если обратиться к Спецификации HTML 4.01, можно заметить, что о разделении структуры и представления там почти ничего не говорится. По поводу синтаксической корректности разметки (валидности) и семантики структурных элементов – много всякого разного, но вот по поводу отделения оформления от содержания – всего лишь пара не совсем внятных абзацев. Но мой взгляд, с одной стороны, это обусловлено тем фактом, что в то время, когда утверждался стандарт HTML 4.01, роль отделения содержания от оформления еще не была настолько велика, как сейчас. С другой стороны, говорить в то время о полной ортогональности аспектов содержания и представления было просто нереально: уровень поддержки CSS популярными в то время браузерами оставлял желать лучшего. Если принять во внимание пресловутый консерватизм Консорциума, становится понятно, почему www.w3.org подвергается редизайну не слишком часто.
Все вышеизложенное наводит на мысль о том, что не стоит фанатично равняться на веб-сайт Консорциума и громко выкрикивать при этом «Свят! Свят!». Никто не застрахован от ошибок, в том числе и W3C. Кстати, история с XHTML является ярким тому примером.
Так или иначе, разделять структуру и представление, равно как и соблюдать семантические требования стандарта все-таки стоит. И даже не потому, что это какой-то там стандарт, а по той простой причине, что это просто логично. Представлять декоративные маркеры с помощью CSS и оформлять списки списками – это ни что иное как здравый смысл. А что там у кого и как (на других интернет-ресурсах) – вопрос второстепенный... :-)
Ссылка на комментарий 19.06.2008 18:45
Ян
Беларусь, Минск
http://www.yanajy.com
Интересно ваше мнение по поводу следующих вопросов:
1. Как по вашему правильно сверстать список ссылок как здесь?
Имеется в виду стоит эти картинки делать фоновыми или же вставлять их тегами img?
2. Я знаю немало верстальщиков, которые прямо орут о стандартах и валидности html-кода. А вот когда разговор начинается про css, то сразу как-то всё заминается. Лично я считаю, что если уже верстать по всем правилам, то это должно распространяться и на css-коды. Вопрос: каково ваше мнение по поводу использования css-хаков, -moz-свойств и т.д.?
Да и вообще, к html много требований, и говорят о них на каждом шагу. А почему никто не говорит о "красивом, правильном и логичном" css-е?
P.S. Это первые вопросы, что пришли в голову. Если не возражаете, буду спрашивать ещё :-)
Ссылка на комментарий 20.06.2008 01:46
Константин Ефимов
Россия, Тольятти
http://webstandards.org.ru
Стоит.
На сегодняшний день я не вижу в этом ничего предосудительного.
И на то довольно много разных причин.
Добро пожаловать на форум.
Ссылка на комментарий 09.11.2008 17:26
Kolridg
Россия
Тег <b> тоже надо осветить. Как считаете?
Не знаю насколько правда, читал одном форуме, что <b> посильнее <strong> для поисковиков.
Ссылка на комментарий 10.11.2008 18:45
Константин Ефимов
Россия, Тольятти
http://webstandards.org.ru
Считаю, что он уже был освещен в полной мере.)
Ссылка на комментарий 10.11.2008 21:37
Kolridg
Россия
Если использовать его для визуального форматирования, это конечно уже "govnocode", тут сомнений нет. Но если применить к нему необходимый CSS и использовать для сео-акцентов, то никаких нарушений нет.
Сейчас Вы наверное скажете мне, что это все враки, что b дает сео-акцент лучше strong'a?)