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

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

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

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

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

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

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

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

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

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

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

Дурной пример

<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>
Web site name / Document name
</ Div>
<! - Let is 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 <acronym title="Cascading Style Sheets"> CSS </ acronym> 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" <acronym title="Cascading Style Sheets"> CSS </ acronym> class ->
<p>
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;
* Содержание страниц Вашего сайта будет понятен для людей, читающих сайты с помощью специальных программ для чтения с экрана;
* Структурная разметка влияет на поисковые системы, так как их работам не трудно индексировать страницы и определять истинное значение тех или иных фрагментов текста;
* Значительно упрощается дальнейшая поддержка, таким образом, сверстанного сайта, снижаются затраты на редизайн;
* Уменьшается вес страниц сайта, повышается читабельность кода сайта за счет его компактности, увеличивается скорость загрузки страниц сайта.