Автор: Роберт Ньюмэн
Перевод: Всеволод Козлов

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

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

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

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

Я думаю, что для веб-разработчика очень важно просматривать созданные ими 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.
  • Контент страниц Вашего сайта будет понятен для людей, читающих сайты с помощью специальных программ для чтения с экрана.
  • Семантическая разметка оказывает положительное влияние на поисковые системы, т.к. их роботам не составляет труда индексировать страницы и определять истинное значение тех или иных фрагментов текста.
  • Значительно упрощается дальнейшая поддержка подобным образом сверстанного сайта, снижаются затраты на редизайн.
  • Уменьшается вес страниц сайта, повышается читабельность кода сайта за счет его компактности, увеличивается скорость загрузки страниц сайта.

Оригинал статьи: Explaining semantic mark-up























































































Смотрите также:

Понравилась статья? Поделитесь ей в социальных сетях: