Правильная структурная разметка

Дата публикации: 28.10.2007

Категория: Верстка веб-сайтов

Комментарии: 72

Многим начинающим веб-разработчикам, которые ознакомились с концепцией разделения структуры и представления, не терпится применить полученные знания на практике. И вот тут-то их и подстерегает очередной вопрос: «Как правильно представить в коде названия разделов и подразделов, разнообразные меню, новостную ленту, иллюстрации – все то, из чего обычно и состоят веб-сайты?» Ведь именно оттого, насколько грамотно размечена веб-страница, будет зависеть ее соответствие семантическим требованиям стандарта и, как следствие, успех ее индексации поисковыми роботами.

Основная цель, которую я преследовал при написании данной статьи, – пояснить назначение основных структурных элементов 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>.

Visit zeldman.com and see  Именно так, например, и поступает Джеффри Зельдман.

Важно также отметить, что, хотя заголовки и являются блочными элементами, содержать в себе другие блочные элементы они не могут. В Спецификации 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="#">подробнее &gt;&gt;</a></p>
  </li>
  <li>
    <p class="date">15 / 05</p>
    <h4>Разработка системы блогов</h4>
    <p>По многочисленным просьбам начата разработка блоговой системы.</p>
    <p><a href="#">подробнее &gt;&gt;</a></p>
  </li>
  <li>
    <p class="date">01 / 03</p>
    <h4>Открытие форума</h4>
    <p>Приглашаем всех желающих принять участие в конференции.</p>
    <p><a href="#">подробнее &gt;&gt;</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>
  &middot;
  <span><a href="#">Услуги</a></span>
  &middot;
  <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>&lt;img src=&quot;images/img003.jpg&quot; alt=&quot;Чашечка кофе&quot; width=&quot;140&quot; height=&quot;140&quot;&gt;</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> &alpha; + cos<sup>2</sup> &alpha; = 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> – не такая большая проблема. Гораздо сложнее в корне поменять сложившиеся стереотипы и понять разницу между кодированием ради нужного представления и кодированием ради правильной семантики...

    Все очень прозрачно и просто, но рассмотрите хотя бы вариант такого дизайна,

    http://www.izh-auto.ru/

    и как тут быть с div-ами, вроде как и решения совсем неменьшие получатся, чем у авторской конторы ?

    Ответил на форуме.

  • Ссылка на комментарий 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 22:53

    Константин Ефимов

    Россия, Тольятти

    http://webstandards.org.ru

    Все понимаю, кроме одного. Почему у тебя в примерах разметки инпуты, имг и бр'ы не закрытые??? О каких стандартах идет речь???

    Речь идет о стандарте HTML 4.01 Strict, который, в отличие от XHTML-синтаксиса, не требует закрытия «пустых» элементов. Более того, закрытые «пустые» элементы будут в данном случае являться основанием для получения соответствующего предупреждения от валидатора.

  • Ссылка на комментарий 21.11.2007 20:00

    lancer

    Россия, Ставрополь

    Константин спс за статью, но с кивордами ты накосячил.

    <meta name="Keywords" content="структурная разметка, структурные элементы, семантическая верстка, семантические требования, стандарт, html, css, заголовки, абзацы, адрес, цитаты, списки, таблицы, изображения, фразы, аббревиатуры, акронимы, div, span">

    Правильное количество символов:

    <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

    Россия, Ставрополь

    Странно.. под говнокод определенно:

    align, bgcolor, background (для всех элементов)

    при том еще и для всех элементов... А как же в таком случае задать фон элементу <div>.

    Что-то новое), или я неправильно понял?

    И еще вопрос: что за экзотический баннер от w3c слева в футере?) Я по поводу: WAI-A ATAG 1.0

  • Ссылка на комментарий 24.11.2007 13:17

    Константин Ефимов

    Россия, Тольятти

    http://webstandards.org.ru

    Возникает вопрос: если задать высоту и ширину картинки через CSS, браузер уже не будет определять место для картинки заранее?

    Или ты просто решил не писать, что это можно задать и через CSS?)

    Конечно же, размеры графического изображения можно определить и при помощи CSS. Но все дело в том, что каждое вставляемое в документ изображение имеет, как правило, свои индивидуальные размеры. Поэтому предусматривать во внешнем стилевом файле всевозможные размеры для графики представляется мне несколько абсурдным. Если же воспользоваться для этого не внешним CSS-файлом, а атрибутом style элемента img – толку от такой конструкции будет мало. Кроме увеличения объема кода это не даст ничего. Именно по этой причине я и рекомендую атрибуты width и height для определения размеров графических изображений.

    С другой стороны, если вы твердо уверены и знаете, что все графические изображения определенного типа на вашем веб-сайте будут иметь одинаковые размеры (например, фотографии товаров в каталоге), вполне логично указать размеры этих изображений посредством CSS во внешнем стилевом файле.

    А как же в таком случае задать фон элементу <div>.

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

    И еще вопрос: что за экзотический баннер от w3c слева в футере?

    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 происходит смешивание структурной разметки и оформления. С другой стороны, указанные в атрибуте 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/ (вроде бы авторитетный ;-)

    Смотрим исходный код главного меню в шапке

    (Activities | Technical Reports | Site Index |.... )

    и видим, что, мало того, список ссылок сделан не списком, так ещё и разделители, которые по идее должны быть бордерами, прописанными в 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

    Выходит, что w3.org - говнокод?

    Собственно говоря, тут вот в чем дело. В первую очередь необходимо прийти к пониманию, что семантическая верстка и разделение структуры/представления – это все-таки не одно и то же. Приведенные Вами примеры наглядно демонстрируют нарушение идеологии разделения структуры и представления, но нарушение семантики – только отчасти (отсутствие списка). Тем не менее, Вы совершенно правы: даже великий 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

    стоит эти картинки делать фоновыми

    Стоит.

    каково ваше мнение по поводу использования css-хаков, -moz-свойств и т.д.?

    На сегодняшний день я не вижу в этом ничего предосудительного.

    И на то довольно много разных причин.

    Если не возражаете, буду спрашивать ещё

    Добро пожаловать на форум.

  • Ссылка на комментарий 09.11.2008 17:26

    Kolridg

    Россия

    Для смыслового выделения какого-либо фрагмента текста предназначены структурные элементы <em>…</em> и <strong>…</strong>. При этом элемент <strong>…</strong> подразумевает усиленное (большее по сравнению с <em>…</em>) логическое ударение.

    Тег <b> тоже надо осветить. Как считаете?

    Не знаю насколько правда, читал одном форуме, что <b> посильнее <strong> для поисковиков.

  • Ссылка на комментарий 10.11.2008 18:45

    Константин Ефимов

    Россия, Тольятти

    http://webstandards.org.ru

    Тег <b> тоже надо осветить. Как считаете?

    Считаю, что он уже был освещен в полной мере.)

  • Ссылка на комментарий 10.11.2008 21:37

    Kolridg

    Россия

    Считаю, что он уже был освещен в полной мере.)

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

    Сейчас Вы наверное скажете мне, что это все враки, что b дает сео-акцент лучше strong'a?)

  • Ссылка на комментарий 29.11.2008 20:33

    Слава

    Беларусь, Минск

    Отличный сайт. Все четко и по существу. Автору +1. Для себя, наконец, просветил тему списков.

  • Ссылка на комментарий 29.11.2008 23:43

    Константин Ефимов

    Россия, Тольятти

    http://webstandards.org.ru

    Если использовать его для визуального форматирования

    Очень жаль, что Вы так до сих пор и не поняли, что элемент <b>...</b> можно использовать только для визуального форматирования и ни для чего более. Этот элемент, равно как и элемент <i>...</i>, изначально не несет в себе никакой семантики, совершенно не означает никакого усиления значимости части текста и, как следствие, совершенно бесполезен для SEO-акцентов. При этом какое-либо применение или неприменение CSS тут вообще ни при чем. То есть совсем ни при чем.

    Отличный сайт. Все четко и по существу. Автору +1.

    Спасибо)

  • Ссылка на комментарий 02.12.2008 14:11

    Kolridg

    Россия

    Теперь понял). Спасибо.

  • Ссылка на комментарий 13.12.2008 01:13

    Delaila

    Украина, Киев

    Спасибо, отличная статья! :-)

    Заинтерисовал один момент:

    Также ничего страшного не произойдет, если оформить списком определений ленту новостей.

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

  • Ссылка на комментарий 13.12.2008 02:03

    Константин Ефимов

    Россия, Тольятти

    http://webstandards.org.ru

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

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

    Но есть проблема - мне также нужно использовать этот элемент по его прямому назначению. Как быть?

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

  • Ссылка на комментарий 13.12.2008 13:34

    Delaila

    Украина, Киев

    Я бы с удовольствием дал Вам необходимые рекомендации, если бы Вы привели небольшой пример планируемой разметки.

    Попробовала изложить задачу более внятно на форуме :)

  • Ссылка на комментарий 27.01.2009 06:21

    Александр

    Россия, Красноярск

    Спасибо очень хорошая статья.

    Но то что мы имеем сейчас в качестве стандарта - это компромисс и нет особой нужды ломать копья.

    Думаю пройдет совсем немного времени.

    И семантика будет семантикой заключенной в семантические теги, а визуальное оформление будет полностью отделено и описано визуальными средствами.

    А пока div и h1 вместе большого толку не будет.

  • Ссылка на комментарий 04.03.2009 13:24

    Максим

    Россия

    Здравствуйте.

    Где-то я читал, что тег dfn может употребляться только при первом упоминании термина на странице. Так ли это? Если да, то как нужно выделять термин при повторном упоминании, или этого вообще не нужно делать?

  • Ссылка на комментарий 04.03.2009 17:08

    Константин Ефимов

    Россия, Тольятти

    http://webstandards.org.ru

    Где-то я читал, что тег dfn может употребляться только при первом упоминании термина на странице. Так ли это?

    Именно так, поскольку он должен употребляться только в том случае, если рядом с термином присутствует определение его значения. Само собой разумеется, что повторное упоминание термина не странице совсем не означает повторное изложение его определения. Как следствие, выделять термин элементом <dfn>...</dfn> при его повторном упоминании нет никакого смысла.

  • Ссылка на комментарий 16.04.2009 15:47

    Евгений

    Россия, Санкт-Петербург

    http://www.mybijou.ru

    Спасибо, очень хорошая статья!

    Именно то что я так долго искал, понятно и наглядно! Спасибо.

  • Ссылка на комментарий 11.12.2009 18:38

    Антон

    Россия, Раменское

    Хорошая статья. Ох и тяжко будет переучиваться...

    Кстати, если вам не сложно - вкратце гляньте на сайт http://acronis09.narod2.ru/

    Старался создавать блочно... Да, именно блочно, а не семантично, так как тогда о семантике как таковой не слышал, а только о приоритете верстки блоками над таблицами.

    Так вот. Просьба посмотреть этот сайт (хотя бы по-диагонали) и сказать, насколько он семантичен. Хотя уже вспоминаю свои

    <div style="clear:both"> и ужасаюсь :) Вообще, все же есть дилемма между семантической версткой и версткой, хорошо отображающейся в браузерах. По-крайней мере, такая дилемма стоит у тех, кто не владеет всей полнотой информации и привык действовать как научился в интернете...

  • Ссылка на комментарий 11.12.2009 19:45

    Константин Ефимов

    Россия, Тольятти

    http://webstandards.org.ru

    Кстати, если вам не сложно - вкратце гляньте на сайт http://acronis09.narod2.ru/

    Не сложно, но обсуждать верстку конкретных проектов предпочтительнее на форуме.

    Да, именно блочно, а не семантично, так как тогда о семантике как таковой не слышал.

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

    По-крайней мере, такая дилемма стоит у тех, кто не владеет всей полнотой информации и привык действовать как научился в интернете.

    И чья же это проблема? Веб-стандартов или тех, кто попросту «не владеет»?)

  • Ссылка на комментарий 11.12.2009 22:09

    Антон

    Россия, Раменское

    И чья же это проблема? Веб-стандартов или тех, кто попросту «не владеет»?)

    Пока я не знал о семантике, то и проблем этих не ведал :) А теперь это моя беда, до поры до времени, пока не изучу получше свойства блоков (пока не верстал ни одного сайта, где блок бы менял размеры, и не представляю подводных камней, с которыми придется столкнуться...).

  • Ссылка на комментарий 27.01.2010 15:59

    Алексей

    Россия, Москва

    Спасибо.

    На моём новом сайте теги <b>, <i> "умерли", даже не увидев свет.

    И вообще многое переосмыслил и оставил закладку для регулярного перечитывания и переосмысления.

  • Ссылка на комментарий 08.03.2010 12:09

    Алексей

    Россия, Екатеринбург

    <div id="categories">

    <h3 class="cell" title="Перейти в раздел &laquo;1&raquo;">

    <a href="1/index.html">

    <img class="vimg" src="img/1.jpg" alt="" /><br />

    1</a>

    </h3>

    <h3 class="cell" title="Перейти в раздел &laquo;2&raquo;">

    <a href="/2/index.html">

    <img class="vimg" src="/img/2.jpg" alt="" /><br />

    2</a>

    </h3>

    </div>

    Выскажите свои замечания по поводу такого кода. Просто необходимо чтобы надпись под рисунком была оформлена в виде заголовка h3.

  • Ссылка на комментарий 08.03.2010 23:25

    Константин Ефимов

    Россия, Тольятти

    http://webstandards.org.ru

    Выскажите свои замечания по поводу такого кода.

    Данный код семантически неверен в принципе.

    Во-первых, судя по «перейти в раздел», все представленное вами выше есть ни что иное как блок навигации, который логичнее всего оформлять неупорядоченным списком. При этом элементы <h3>...</h3> здесь вообще не к месту.

    Во-вторых, лично у меня возникают глубокие сомнения, что ваши элементы <img> несут в себе какую-то громадную смысловую нагрузку. Тем более, что атрибут alt у них пустой. Как следствие, гораздо логичнее представить их фоновыми изображениями для элементов <a>...</a> или <li>...</li>. Кроме того, с точки зрения семантики присутствие элемента <img> внутри элемента <h3>...</h3> – вообще нонсенс.

    В-третьих, про использование элемента <br> вы можете прочитать чуть выше. Для организации переноса строки гораздо правильнее пользоваться CSS-свойством display.

  • Ссылка на комментарий 09.03.2010 09:48

    Алексей

    Россия, Екатеринбург

    Возможно недопонимание вышло из-за отсутствия CSS в примере кода написанного выше.

    /*CSS файл*/

    .cell {width: 240px; height: 240px; float: left; border-right: solid 1px #787878; border-bottom: solid 1px #787878; background: #949494;}

    .cell a {display: block; height: 240px; color: #2a2a2a; text-decoration: none;}

    .vimg {/* 3/2 */ width: 120px; height: 180px; margin-top: 15px; margin-bottom: 5px;}

    .gimg {/* 4/3 */ width: 180px; height: 135px; margin-top: 60px; margin-bottom: 5px;}

    Этот код отвечает за навигацию по разделам фотогалереи на главной странице. У IMG не указан атрибут alt т.к. глядя на css легко убедиться, что при наведении на ячейку будет в любом её месте отображаться "перейти в раздел...". Как посоветуете лучше организовать навигацию? (Если учесть что на главной странице будет всего 8 разделов).

  • Ссылка на комментарий 09.03.2010 13:58

    Константин Ефимов

    Россия, Тольятти

    http://webstandards.org.ru

    Возможно недопонимание вышло из-за отсутствия CSS

    Смею вас заверить, никакого недопонимания с моей стороны не могло возникнуть по одной простой причине: к семантической корректности структурной разметки CSS не имеет никакого отношения. Как следствие, все данные вам выше рекомендации остаются в силе.

    при наведении на ячейку

    К сожалению, вынужден констатировать, что вы хоть и не используете пресловутую табличную разметку как таковую, но мыслить продолжаете исключительно «таблично», визуально, а не структурно. По всей видимости вы не совсем внимательно ознакомились с содержанием представленной выше статьи.

    будет отображаться "перейти в раздел..."

    Настоятельно рекомендую вам прийти к пониманию, что HTML – это не привязанный к платформе язык. К примеру, браузер для слепых не показывает буквы, а читает их (причем к содержимому атрибута title это относится далеко не всегда). Да и на экране многих мобильных телефонов у вас тоже не будет отображаться «перейти в раздел».

  • Ссылка на комментарий 09.03.2010 19:54

    Алексей

    Россия, Екатеринбург

    Спасибо большое за ваши замечания. Я просто новичёк совсем в деле вёрстки веб-страниц. Перечитаю ещё раз все ваши статьи.

  • а мне больше нравится asp.

  • Ссылка на комментарий 09.05.2010 18:45

    Сергей

    Россия

    http://www.tibetanmarket.ru

    Большое спасибо, во многом помогли разобраться.

  • Ссылка на комментарий 09.08.2010 12:12

    Павел

    Россия

    http://www.usbdevices.ru

    Отличная статья, все наглядно и доходчиво...

  • Отличная статья. Спасибо, интересно.

    Если рассуждать логически, цитаты необходимо обрамлять

    <blockquote><p>Цитата</p></blockquote>

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

  • Ссылка на комментарий 08.09.2010 13:34

    Константин Ефимов

    Россия, Тольятти

    http://webstandards.org.ru

    и тогда это не будет считаться неуникальным контентом для поисковиков

    Лично я не думаю, что элемент <blockquote>...</blockquote> может являться критерием уникальности или неуникальности контента. Полагаю, что поисковики пользуются другими алгоритмами для их вычисления.

  • Ссылка на комментарий 23.01.2011 05:39

    Nanto

    Россия

    Написано чётко, с достоинством и... с излишним апломбом!

    Что всех так циклит на этом СТРОЖАЙШЕМ разделении "HTML - только для структуры, CSS - только для оформления"???

    Во всем надо знать меру! Или давайте уж будем до конца последовательны - выкинем из HTML все "ненужные" тэги <b>, <i>, <h1>...<h6>, <p> и т.д. так как никакого отношения к СТРУКТУРЕ документа они не имеют, а отвечают лишь за ОФОРМЛЕНИЕ! и будем всё представлять через <div>-ы, оформленные в CSS. (ну ладно, так уж и быть - через <p> и <div>; один для текста, другой для остального)

    И как понимать призыв всю декоративную графику загонять в background-image? А если графика перекрывается? с z-index "гуляться"?

    На то он и BACKGROUND (задний план), чтобы быть фоном для всх остальных элементов!

    Если уж следовать семантике и логике - то изображения (за исключением background, который по хорошему должен быть прописан в тэге <body>) должны быть обозначены через тэг <img>.

    Ибо для того чтобы понять структуру документа, мне необходимо знать сколько элементов и каких использует данный документ! А не прыгать из HTML в CSS, пытаясь разобраться - что за что отвечает!

  • Ссылка на комментарий 23.01.2011 17:13

    Константин Ефимов

    Россия, Тольятти

    http://webstandards.org.ru

    Что всех так циклит

    Полагаю, что в некоторой степени вы уже сами ответили на свой вопрос. Если всех действительно «так циклит», значит «строжайшее» разделение структуры и представления все-таки скрывает в себе какой-то глубокий смысл. На самом деле все предельно просто: каждая конкретная технология должна использоваться по своему прямому назначению. Не более того.

    выкинем из HTML все "ненужные" тэги <b>, <i>, <h1>...<h6>, <p> и т.д. так как никакого отношения к СТРУКТУРЕ документа они не имеют, а отвечают лишь за ОФОРМЛЕНИЕ!

    К сожалению, здесь вы глубоко заблуждаетесь. Согласно спецификации HTML 4.01 (в 2007 году статья писалась на основании именно этого стандарта) из всех перечисленных вами элементов за оформление отвечают только B и I. В HTML 4.01 эти элементы действительно не несут в себе никакой семантики, и именно по этой причине я не рекомендую их применять. Напротив, элементы H1-H6 и P являются самыми что ни на есть структурными. Без их правильного применения невозможно получить грамотную семантическую разметку документа, которую не следует путать с понятием «разделение структуры и представления».

    Более того, в стандарте HTML 5 даже B и I обрели определенную семантику (многих разработчиков это, кстати, весьма удивило). Таким образом, все перечисленные вами элементы на сегодняшний день имеют к структуре документа самое прямое и непосредственное отношение. Это исключительно структурные, логические элементы.

    и будем всё представлять через <div>-ы, оформленные в CSS

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

    И как понимать призыв всю декоративную графику загонять в background-image?

    Полагаю, что правильнее всего будет понимать это «как есть» (as is). Почему именно так следует поступать, а также какие это дает преимущества подробно описывается не только чуть выше, но и в одной соседней публикации (см. «Кэширование представления»).

    А если графика перекрывается? с z-index "гуляться"?

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

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

    Совершенно верно. Только декоративная графика (оформление) не имеет к структуре документа никакого отношения. То есть совсем не имеет. И именно по этой причине в структуре документа ее быть не должно.

    А не прыгать из HTML в CSS, пытаясь разобраться - что за что отвечает!

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

  • Ссылка на комментарий 15.02.2011 07:10

    Nanto

    Россия

    Да нет - в подавляющем большинстве вопросов, которые Вы освещаете - я с Вами согласен! (насчёт восклицательных знаков - ну стиль у меня такой; чтобы хоть как-то "добавить экспрессии текстовому представлению", ибо речевые браузеры пока не столь распространены... а вовсе не возмущение "попыткой навязать какие-то правила")

    А свои претензии сейчас поясню - я месяца полтора назад впервые влез в HTML (и иже с ним) - начал неспеша делать домашнюю страничку. И по сути - это некий интерактивный фотоальбом. Так вот, по своей специфике, вышеизложенные Вами рекомендации (имею в виду и другие статьи на сайте) к моему примеру мало применимы. Ибо основа сайта графический ДИЗАЙН, как следствие - некоторые заголовки набраны нестандартной гарнитурой (в соответсвии с дизайном) - и представлены в виде png-24. Ну и т.д. Короче, если отключить css - страница будет иметь тёмно-серый фон с парой фраз. Вот это у меня что? Структура документа? Не думаю... У меня струкутрой как раз и будет ПРЕДСТАВЛЕНИЕ! Вот такой парадокс. Скажете, это нетипичный случай? Но в каждом конкретном примере всегда найдутся свои специфичные особенности, которым будут "противопоказаны" рекомендации W3Cи т.д.

    Нет, я безусловно согласен с Вашим "призывом - верстать по стандартам". И валидация вещь кране полезная - даже не в плане поиска ошибок, а в плане психологической поддержки ("то что ты написал обладает формальной корректностью, а значит есть понимание сути html и css, и код написан «чисто», без ненужного латания дыр (бездумное использование хаков), и каждый элемент использует только изначально возложенные функции и т.д. и т.п."). Меня больше удивляет то, что люди, которые (по их словам) занимаются веб-программированием не один год с удивлением узнают про валидацию, некорректность вёрстки таблицами и т.д. Это ведь надо изучать в первую неделю освоения html!

    Но некоторые призывы меня вводят в ступор. Например, "не плодите divы без нужды"! А как понимать "без нужды"? Если по другому оформить документ не получается? Вот скажем типичный пример с моей страницы:

    надо сделать padding по окну браузера, ну скажем в 16px; при этом вёрстка должна быть резиновой (т.е. в документе есть элементы, у которых width:100%).

    Варианты:

    1)задать html{padding:16px;} - не прокатывает: у меня есть абсолютно позиционированный элементы;

    2)сделать div{position: absolute; width:100%; padding:16px} и загнать весь контент в него - вообще муть получается: элементы с абсолютным позиционированием и заданными top, left, и т.д. игнорируют этот padding; а элементы с width 100% соблюдают левый padding но вылетают за правый край окна (ещё и со скроллбаром) - растягиваются на 100%;

    и вот методом тыка решил задачу, но! с добавлением двух "ненужных" div-ов:

    3) всё по нулям, первый в body div{position:absolute; top:0; left:0; width: 100%;}, в нём div{position:relative; margin:16px} и уже в нём можно размещать контент, в том числе и с width:100%.

    И это нормально? Как так, ввёл два "ненужных блока", только для того чтобы задать отступы!..

    Кстати - по поводу вышеизложенного претензия к спецификации CSS! (html - оказался очень простым, на понимание сути пары часов достаточно, ну и неделя чтобы ознакомится с основными тэгами и приёмами. А вот css...)

    Например, модель позиционирования абсолютно убогая! Кто её в таком виде придумал? Ну абсолютно неинтуитивная! Уж на что мне проще чем остальным новичкам (поскольку я по профессии верстальщик, но только в полиграфии - и привык к гораздо более строгим стандартам и ограничениям; может ещё и поэтому у меня вызывает такое отвращение "вёрстка таблицами"...), но до сих пор не понимаю - кто что наследует и что игнорирует при "смешанном позиционировании". При чём в разных уроках по css абсолютно по разному объясняют! Relative вообще каким-то костылём непонятным выглядит! Написали бы статью про позиционирование. Можно, конечно и в спецификацию залезть - но одно дело теоретические изыски, и совсем другое, как это реализуется на практике!

    Хотя, как я вижу Вы ресурс подзабросили...

    В общем статьи у Вас крайне полезные, даже интересные, но.. несколько оторванные от реалий - стандарты и рекомендации это конечно хорошо, но стандарты ради стандартов... Когда даже Microsoft чхать хотел на эти стандарты!.. Несколько патовая ситуация, Вам не кажется. С одной стороны все призывают к корректному коду, а с другой, производители браузеров эти самые стандарты не всегда и поддерживают, это конечно не взаимоисключающие понятия, но сильно осложнящие жизнь (вплоть до отдельных css-файлов для IE).

    P.S. Извиняюсь за длиннющий пост - если что давайте в форум перейдём (по вопросам семантической вёрстки)...

  • Ссылка на комментарий 15.02.2011 19:20

    Константин Ефимов

    Россия, Тольятти

    http://webstandards.org.ru

    А свои претензии сейчас поясню

    Вы только, пожалуйста, в суд на меня не подавайте :)

    некоторые заголовки набраны нестандартной гарнитурой и представлены в виде png-24

    Очень плохо, что в виде png-24. Все заголовки в документе должны быть представлены текстом и соответствующими структурными HTML-элементами заголовков. По всей видимости вы просто незнакомы с техникой Image Replacement и CSS-свойством @font-face.

    если отключить css - страница будет иметь тёмно-серый фон с парой фраз

    И именно в таком непотребном виде ее и «увидят» роботы поисковых систем, а также пользователи некоторых устаревших мобильных устройств, которые попросту не поддерживают CSS. Другими словами, все мои рекомендации ориентированы на создание экономически эффективных и доступных для максимального количества пользователей сайтов. А о «домашних страничках», положение которых в выдаче поисковых систем не имеет никакого значения (равно как и рост их посещаемости), я, извините, как-то не подумал. Досадное упущение с моей стороны.

    У меня струкутрой как раз и будет ПРЕДСТАВЛЕНИЕ! Вот такой парадокс.

    К сожалению, никакой это у вас не парадокс, а просто-напросто неверное понимание или толкование понятий «структура» и «представление». Мне сложно написать об этом еще больше, нежели чем я уже написал в своих публикациях и комментариях. Попробуйте почитать специализированную литературу.

    Меня больше удивляет то, что люди, которые (по их словам) занимаются веб-программированием не один год с удивлением узнают про валидацию, некорректность вёрстки таблицами и т.д.

    На самом деле здесь нет ничего удивительного. В первую очередь потому, что веб-программирование не имеет к HTML и CSS (т.е. к верстке сайтов) никакого отношения в принципе. То есть совсем не имеет. С другой стороны, существует множество исторических причин появления синтаксически и семантически некорректной верстки.

    Вот скажем типичный пример с моей страницы

    Буду вам искренне признателен, если все «типичные примеры» будут обсуждаться на форуме.

    Несколько патовая ситуация, Вам не кажется.

    Нет, не кажется.

  • Ссылка на комментарий 15.02.2011 21:48

    Nanto

    Россия

    Ага, теперь мне всё понятно!

    Только у Вас получается маленькое такое противоречие: под другой статьёй, в комментариях Вы спорили с одним посетителем об эффективности подхода А.Лебедёва (к слову глубоко презираемого мною за примитивный самопиар и одновременную убогость своих дизайнерских решений (даже не вёрстки, а именно дизайна) - ну что поделать миром правят маркетологи) - и уповали на то, что "раскрученность" сайта не имеет никакого отношения к семантике и стандартизации. А теперь Вы заявляете "все мои рекомендации ориентированы на создание экономически эффективных и доступных для максимального количества пользователей сайтов."...

    Мне Ваша позиция теперь как раз и напоминает "Лебедевскую", но скорее осточертевшие рекомендации Гугла (который мнит себе уже правителем www) - дескать, делайте так-то и так-то, но не так-то, иначе наши поисковые машины будут Вас игнорировать...

    Да идите Вы в гуду со своим CEO!!! Это что самоцель такая? Раскрутка ради раскрутки любой ценой! Какая нафиг экономическая эффективность?

    Прежде всего надо ориентироваться на ЦЕЛЕВУЮ АУДИТОРИЮ СВОЕГО РЕСУРСА! Тогда это будет эффективно! Ибо один потенциальный клиент переплёвывает тысячи соглядатаев зашедших по ссылке с гугла; и уж поверьте потенциального клиента на Ваш ресурс вряд ли приведёт первая попавшаяся ссылка в Гугле!

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

    Зачем продавцу прецизионных мониторов делать поддержку сайта для слепых??????

    Также и Гугл "клинит" на количестве посетителей любой ценой!

    Охота тупой раскрутки - сделайте "приличный" порнохостинг и добавьте бегущей строкой информацию о Вашей компании - только экономическая эффективность такого решения=0!

    Яндекс.фотки - тоже вон самый популярный фотохостинг рунета... Но кто из потенциальных клиентов будет там искать фотографа для персъёмки коллекции изобразительного искусства 18 века?????? Вот и выходит - популярность зашкаливает, а уникальности контента и тем более его экономической привлекательности ноль!

    Да и Вы что-то не то пишите - "все мои рекомендации ориентированы на создание экономически эффективных..." - разве? По-моему Вы пишите только о семантике и стандартах, об эк.эффективности я не увидел ни слова! И какое отношение семантика имеет к эк.эффективности? Как "оборудование для производства дихлорэтана к оборудованию для производства мороженого"?.. Скорее соглашусь с оппонентом - эти понятие скорее противоречат друг-другу! Для эк.эффективности нужна не корректность кода, а кросс-браузерность; и хорошо когда одно не мешает другому... А ну как на отладку кода (во избежние использования "не валидных хаков") уйдёт куча времени? Какая уж тут экономическая привлекательность?

    И значит семантика и стандарты важны только для экономически эффективных проектов, а для "домашних страниц" можно и "говнокодом" обойтись? А чём они отличаются кроме кол-ва посетителей (и то, далеко не всегда)?

    Короче, ерунда какая-то выходит с Ваших слов!

    А по поводу патовой ситуации... Вот у Вас есть внятное объяснение тому, почему Microsoft выпускает такие образчики "чуда инженерной мысли" как IE6? Почему, если сверстанный в соответсвии с рекомендациями W3C сайт, отображеается во всех нормальных браузерах как надо, а в IE "рассыпается"? А ведь всё по стандартам? Почему вместо изучения спецификации html и css я должен копаться в документации IE и тупо проверять наличие какого-нибудь haslayout или лепить js-скрипты для нормальной поддержки псевдоклассов???

    Трудно сделать браузер с нормальным парсингом? возможно... Но тем самым они вынуждают сознательно отходить от стандартов и порой специально писать невалидный код! Это разве не патовая ситуация? - следуйте стандартам, но только в IE у вас это работать не будет!

    А ведь могли бы не взваливать всё на несчастных веб-разработчиуов, а сделать нормальный консорциум (как ICC скажем, в котором куча компаний имеющих отношение к вопросам отображения цветных изображений занимается именно созданием СТАНДАРТОВ, а не рекомендаций) - позвать представителей Майкрософта, Эппл, Файерфокса и т.д. и СОВМЕСТНО разработать стандарт, который все браузеры поддерживали абсолютно корректно! ("не хочешь верстать в строгом соответсвии стандарту html5? не обижайся - верстка будет разваливаться! или пользуй устаревший html4") Вместо этого какие-то невнятные рекомендации - на который чхать все хотели! XHTML похоронили? А ведь с какой помпой преподнести хотели! Какой уж тут xhtml, когда и обычный html4.01.loose.dtd зачастую что-то невообразимое выдаёт!

    P.S. А по поводу "если отключить css - страница будет иметь тёмно-серый фон с парой фраз... И именно в таком непотребном виде ее и «увидят» роботы поисковых систем, а также пользователи некоторых устаревших мобильных устройств, которые попросту не поддерживают CSS" - да и наплевать мне на тех, кто не отключает css - значит они не моя целевая аудитория! На словах я им картинки описывать не буду! Более того пользователи с отключенным js - тоже ни черта не увидят! Их проблемы... Я знаете ли тоже с отключенным js не могу толком почту на яндексе проверить! Уж если им плевать таким образом на своих пользователей... Мне с моим графическим интерфейсом сам бог велел!

  • Ссылка на комментарий 16.02.2011 03:32

    Константин Ефимов

    Россия, Тольятти

    http://webstandards.org.ru

    я месяца полтора назад впервые влез в HTML

    Ага, теперь мне всё понятно!

    Да идите Вы в гуду со своим CEO!!!

    В лучшем случае «все понятно» вам будет годика через два. Если хватит усердия в освоении современных веб-стандартов и mental abilities. Удачи.

  • Ссылка на комментарий 16.04.2011 23:56

    Денис Орлов

    Россия

    http://denis-or-love.narod.ru/index.htm

    Спасибо.

    Очень ценный ресурс, многие вопросы прояснились.

    Свой сайт создавал еще без малейшего понятия о семантике. Теперь начал понимать, насколько это важно и учту в дальнейшем.

    Пишите пожалуйста еще.

  • Ссылка на комментарий 23.09.2011 13:19

    Никита

    Россия, Екатеринбург

    http://ekb-oriflame.ru

    Большое спасибо за такую полезную статью.

  • Ссылка на комментарий 07.10.2011 00:53

    Александр

    Беларусь, Брест

    Очень полезно и занимательно! Спасибо Вам за "кладезь знаний"! ))

  • Ссылка на комментарий 16.02.2012 12:32

    Валерий

    Россия, Санкт-Петербург

    http://www.milam.ru/

    Написано все очень грамотно, спасибо, наконец разобрался. Оказывается это все ерунда, если знать как делать:)

  • Ссылка на комментарий 14.12.2012 16:28

    bestfarmer.ru

    Россия, Москва

    http://bestfarmer.ru

    Все верно что было тогда актуально и сейчас. Еще раз спасибо за статью.

    Кстати у меня тоже есть свой сайт вот его адрес http://bestfarmer.ru сайт посвящен инновациям в сфере Фермерского хозяйства в России.

  • Ссылка на комментарий 13.02.2013 18:43

    Рифма

    Россия, Москва

    http://rifmoved.ru

    Несмотря на некоторую критику, очень даже информативная и полезная статья. Я бы назвала это даже "Руководство к действию для верстальщиков". Спасибо, но забыли упомянуть про микроданные(HTML microdata) . Например, непонятно как размечать термины: с помощью тега <dfn> или с помощью атрибута: itemprop="term"?

  • Ссылка на комментарий 06.09.2013 12:25

    Михаил

    Россия, Рязань

    http://seo62.ru

    Ребят, молодцы! Интереснейшая статья, подчерпнул для себя нужное и новое. Вопрос, почему не блокируете внешние ссылки на другие сайты в <noindex> или через rel="nofollow"

  • Ссылка на комментарий 14.12.2013 00:27

    Поля

    Россия, Москва

    http://www.daoloka.com

    Интересная и познавательная статья. Не могу сказать, что сразу все понятно... я только учусь..

Последние комментарии