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

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

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

Что такое семантически правильный документ?

Я думаю, что для веб-разработчика очень важно просматривать созданные ими HTML-документы с отключенным внешним форматированием, будь то CSS, JavaScript и, если хотите, даже без изображений – только контент.

А теперь пробегитесь по этой странице глазами. Вы можете в тексте найти заголовки и важные фразы?

Если ответ положительный, то Ваш документ придерживается семантики.

Использование элементов и примеры грамотной и безграмотной разметки

Итак, давайте поговорим о семантических HTML-элементах. В первую очередь, это элементы заголовков (от <h1> до <h6>), абзаца (<p>), списка (<ul>, <ol>), логического выделения наиболее важных фраз в тексте (<strong> - полужирным, <em> - курсивом), элемент формы, связывающий поле метки LABEL с полем формы (<label>).

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

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

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

При бестабличной же верстке контент находится в элементах семантической разметки с присвоенными css-стилями. Такой метод грамотный и современный! Необходимо разделять семантику документа и его оформление, что мы и получаем при бестабличной верстке.

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

А теперь давайте я Вам приведу в качестве примера 2 фрагмента кода с табличной и бестабличной разметкой, а Вы их сравните и скажете, какой лучше, проще, легче, элегантнее и понятнее!

Пример табличной верстки (неграмотный подход)

<table id="web-site-container" width="100%">
  <tr>
    <td id="navigation">
      <table width="100%">
        <tr>
          <td>
            <a href="http://www.apple.com/macosx/">Mac 
	OS X Leopard</a>
          </td>
        </tr>
        <tr>
          <td>
            <a href="http://www.microsoft.com/windows/products/windowsvista/default.mspx">Windows Vista</a>
          </td>
        </tr>
        <tr>
          <td>
            <a href="http://en.wikipedia.org/wiki/Semantic_Web">Wikipedia: Semantic Web</a>
            <table>
              <tr>
                <td>
                  <a href="http://www.sciam.com/article.cfm?articleID=00048144-10D2-1C70-84A9809EC588EF21">The Semantic Web article</a>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td id="content">
      <div class="heading">Web site name/Document name</div>
      <!-- Let's a lot of <code><br></code> elements here to get a nice bottom margin -->
      <br><br><br><br><br><br>
      <div>This is <span style="font-style: italic">the best content</span> text ever written.</div>
      <div>
        <!-- are great for indenting text! -->
        Indented pre-amble text explaining something.
      </div>
    </td>
    <td id="contact-form">
      <form action="/contact" method="post">
      <div>Name:
        <input type="text">
        <input type="submit" value="Send">
      </div>
      </form>
    </td>
  </tr>
</table>

Пример бестабличной, блочной верстки (грамотный подход)

<div id="web-site-container">
  <div id="navigation">
    <ul>
      <li>
        <a href="http://www.apple.com/macosx/">Mac 
	OS X Leopard</a>
      </li>
      <li>
        <a href="http://www.microsoft.com/windows/products/windowsvista/default.mspx">Windows Vista</a>
      </li>
      <li>
        <a href="http://en.wikipedia.org/wiki/Semantic_Web">Wikipedia: Semantic Web</a>
        <ul>
          <li>
            <a href="http://www.sciam.com/article.cfm?articleID=00048144-10D2-1C70-84A9809EC588EF21">The Semantic Web article</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  
  <div id="content">
    <h1>Web site name/Document name</h1>
    <!-- Bottom margin is applied through 
	CSS to the <code><h1></code> element -->
    <p>This is <em>the best content</em> text ever written.</p>
    <!-- Indentation is applied through a general "pre-amble" 
	CSS class -->
    <p class="pre-amble">
      Indented pre-amble text explaining something.
    </p>
  </div>
  
  <div id="contact-form">
    <form action="/contact" method="post">
    <div>
      <label   for="user-name">Name</label>: <input id="user-name" type="text">
      <input type="submit" value="Send">
    </div>
    </form>
  </div>
</div>

Ну как Вам? Что скажете?

Разделяйте семантику и оформление документа

Уясните для себя одну простую вещь: HTML отвечает за семантику документа, CSS – за его оформление. И никак иначе. Помимо этого используйте каждый элемент по его прямому назначению, например, никогда не используйте элемент заголовка с целью банального увеличения размера шрифта, а элемент <blockquote> для выделения текста.

Мне часто задают вопрос на счет элементов списка: «В каких случаях использовать маркированный, а в каких немаркированный списки?». Лично мое мнение таково, что главное его использовать по прямому назначению, т.е. для создания списков, а остальное уже на Ваше усмотрение, ибо семантика – не внешний вид.

Преимущества семантической разметки

Далее следует список, в котором перечислены несколько преимуществ от семантической разметки документов:

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