О семантической верстке

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

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

И все же. Семантическая верстка для WEB.
Подход к верстке не должен быть фанатичен - верстка не ради верстки, верстка для людей.
Кроссбраузерность - вещь вообще отдельная, но семантически сверстанная страница не обязана выглядеть одинаково при просмотре в любом браузере.
Стандарт должен быть одинаков для всех, ведь для этого он и стандарт. А если разработчики не придерживаются стандартов?

Эти два предыдущих предложения достаточно спорны.
  1. Стараться надо.
  2. Без фанатизма.
  3. С применением хаков и js-скриптов.
Выбор за вами.

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

Логичность

Я, например, видел такую интерпретацию логичности, дабы не придумывать свое

Пример 1 (несемантическая, нелогичная верстка): 

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		    "http://www.w3.org/TR/html4/strict.dtd">
      <html>
        <head>
          <title>Пример несемантической, нелогичной верстки</title>
        </head>
        <body>
          <div id="menu">
            <a href="#">Ссылка 1</a>
            <a href="#">Ссылка 2</a>
            <a href="#">Ссылка 3</a>
            <a href="#">Ссылка 4</a>
            <a href="#">Ссылка 5</a>
          </div>
        </body>
      </html>
Пример 2 (семантическая верстка): 

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		    "http://www.w3.org/TR/html4/strict.dtd">
      <html>
        <head>
          <title>Пример семантической верстки</title>
        </head>
        <body>
          <ul id="menu">
            <li><a href="#">Ссылка 1</a>
            <li><a href="#">Ссылка 2</a>
            <li><a href="#">Ссылка 3</a>
            <li><a href="#">Ссылка 4</a>
            <li><a href="#">Ссылка 5</a>
          </ul>
        </body>
      </html>

С точки зрения браузеров, оба примера можно привести к одинаковому виду с помощью CSS. Затрудняюсь сказать, как это будет выглядеть в текстовых браузерах. Уже знаю :) Посмотрел как это выглядит в lynx. Выглядит по разному. Вобщем-то можно было и самому подумать, если учесть то что элементы якоря <a> принадлежат к inline, а списки к block Но аудио-устройства (например, браузеры для слабовидящих), потребляющие html-контент, эти два примера будет интерпретироваться по разному.
Два примера достаточно спорны.
Навигационные ссылки меню, по своей сути, являются списком. И если это список, то и обозначить(описать) его - списком.
Но о том, что это навигационные списки, знает только верстальщик.
Кроме того, с помощью списков, часто оформляют и горизонтальные меню.

Иерархия страницы

Пример 3 для упрощения я опущу обязательные строки и теги
      <style type="text/css">
      < h1 {display: none;}
      </style>

      <div title="блок с текстом">
        <h2>Заголовок</h2>
        <h2>Подзаголовок</h2>
        <h1>Беспорядочный набор ключевых слов</h1>
        <p>содержание блока</p>
      </div>

Тут и простому смертному понятно -

Заголовок

должен быть больше

Подзаголовка

и т.д., или, по крайней мере, отличаться "весом".

Но простому смертному может быть не понятен финт с тегом <h1> в приведенном примере. Что ж вот это и есть, "танцы с бубном", вернее только начало танцев. К сожалению, поисковики анализируют содержимое в тегах h1...6. В данном коде верстальщик, возможно, с подачи SEO специалиста прячет беспорядочный набор ключевых слов от взгляда контент-пользователя, но усиливает взгляд робота.

Структура HTML

Любой файл HTML обязан начинаться с указания информации о версии, которой он от первой строки до последней будет соответствовать.

Строгое определение типа документа, в соответствии с HTML 4.01:

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

Документ, соответствующий спецификации, не может содержать в разметке нерекомендуемые спецификацией элементы,

Переходное определение типа документа, в соответствии с HTML 4.01:

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

Документ, соответствующий переходному определению типа документа, разрешает использовать нерекомендуемые (устаревшие) элементы.

Определение типа документа для фреймов, в соответствии с HTML 4.01:

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

Документ, соответствующий определению типа документа для набора фреймов, разрешает использовать нерекомендуемые (устаревшие) элементы и фреймы.

После строки определения типа документа следуют корневой элемент документа - html, затем "голова" head, и тело документа - body

Пример 4 
    
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		     "http://www.w3.org/TR/html4/strict.dtd">
      <html>
        <head>
          <title>Название страницы</title>

          <meta http-equiv="content-type" content="text/html; charset=windows-1251">
        </head>
        <body>
          ...
        </body>
      </html>

Отсутствие определения типа документа - ошибка.
Отсутствие тега head-ошибка.
А вот открывать и закрывать элементы html, head и body по спецификации html 4.01 не обязательно.

Использование CSS

А причем здесь CSS к верстке? И как CSS влияет на семантику кода?


  <ul>
	  <li><a href="#">К оглавлению</a></li>
	  <li><a href="#">К тексту</a></li>
	  <li><a href="#">К литературе</a></li>
	</ul>
Вот что видим без применения стилей А вот тут применим стили Вот как это выглядит в коде: 

<ul style="display:block; text-align: right;">
	  <li style="display:inline; margin-right:2em;"><a href="#">К оглавлению</a></li>
	  <li style="display:inline; margin-right:2em;"><a href="#">К тексту</a></li>
	  <li style="display:inline; margin-right:2em;"><a href="#">К литературе</a></li>
</ul>
Что-то здесь лишнее. А лишние - повторяющие стили.
Мне, например, захотелось чтобы список ссылок находился слева, кому-то захочется, чтоб справа - достаточно изменить только в одном месте, например, в отдельном файле стилей поменять свойство селектора, или же имея уже описанный класс, поменять класс тега на соответствующий.

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

Как вынести стили из HTML:

   
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		    "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
        <title>Как страницу назовем. Так мы с ней и поплывем</title>
        <link rel="stylesheet" href="ссылка на файл стилей" type="text/css" media="screen">
      </head>
      </html>

Когда я опубликовал статью, меня все время мучала мысль, что где-то я не прав. Так оно и оказалось. Взял в руки "букварь" и... увидел. В приведенных "doctype" указана спецификация HTML 4.01, а в файлах dtd - элементы тегов разметки пишутся БОЛЬШИМИ (ПРОПИСНЫМИ), а у меня написаны строчными. Оставлю как есть - кто-то должен знать, что здесь несоответствие стандарту.

Я пока закончу. Думаю, что продолжение будет. Будут изменения.

Что и где читать

Отдельная благодарность членам клуба "Весельчак У" за работу над ошибками, как орфографическими, так и стилистическими