В последнее время стало очень модным такое понятие как семантика.
Википедия даёт следующее определение: «Семантика — система правил определения поведения отдельных языковых конструкций. Семантика определяет смысловое значение предложений алгоритмического языка.» Это применительно к языку.
Ну а применительно к HTML, простыми словами — теги, названия ID и классов элементов должны соответствовать их содержимому по смыслу.
Приведу простейший пример — у нас есть следующее определение:
Капитан Очевидность (англ. Captain Obvious)
— уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.
Как напишет код верстальщик не знакомый с понятием «семантика»:
<p><strong>Капитан Очевидность (англ. Captain Obvious)</strong><br /> — уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.</p>
А вот как напишет этот код верстальщик, с ним знакомый:
<dl><dt>Капитан Очевидность (англ. Captain Obvious)</dt><dd> — уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.</dd></dl>
Здесь использованы подходящие по смыслу элементы HTML: <dl> — это Definition List (список определений), <dt> — Definition Term (имя определяемого термина), <dd> — Definition Description (определение термина). А выделение жирным имени термина задано с помощью CSS.
Ну и ещё как пример — классическое меню, сделанное с помощью неупорядоченного списка:
<ul id="nav"><li><a href="/about/" title="О компании">О компании</a></li><li><a href="/services/" title="Услуги">Услуги</a></li><li><a href="/contacts/" title="Контактная информация">Контактная информация</a></li></ul>
Такую разметку будет потом очень просто оформить с помощью CSS.
В процессе написания семантического кода приходится думать над названиями, порядком элементов, над тем какой тег использовать, что выбрать, таблицу, маркированный список или список определений, использовать class или ID, и т.п.
Что использовать, ID или class?
В интернетах с завидной регулярностью задают этот вопрос, постараюсь ответить.
ID — это имя уникального элемента на странице, я использую его для структурной разметки (#header, #content, #aside, #footer), для элементов формы и для элементов, к которым в дальнейшем планирую обращаться через jQuery. В последнем случае, конечно, можно использовать и классы… Но грамотней использовать ID, так как селектор $("#id") работает гораздо быстрее, чем $(".class"), по причине того, что используется DOM-функция getElementById(). А если элемент не уникален на странице (их несколько), то желательно положить его в блок с ID и обращаться к нему так: $("#id .class"). Такой селектор будет работать быстрее чем $(".class"), так как поиск элемента будет производиться только в блоке #id, а не во всём документе. Отвлёкся немного в сторону jQuery, но это тоже полезно знать. 
Регулярно в чужом коде встречаю названия классов привязанные к отображению, например: class="column-red-150-border-black". Это семантически некорректно, и в таком коде разбираться гораздо тяжелее. Не рекомендую такой код. 
Ещё пример — в моём блоге, в разделе Эбаут используется микроформат hCard (микроформаты вообще интересная штука):
<div class="vcard"><span class="n"><span class="fn"><span class="family-name">Коромыслов</span> <span class="given-name">Алексей</span></span> <span class="additional-name">Георгиевич</span></span><p>Родился <abbr class="bday" title="1987-04-14">14 апреля 1987 года</abbr>. Работаю <abbr title="разработчик ПО" class="role">разработчиком ПО</abbr> в компании «<a href="http://profit-labs.ru/" class="org">ProfIT Labs Ltd</a>».</p><p>В сети «известен» под ником «<span class="nickname">lazymozzy</span>».</p><h3>Контактные данные</h3>E-mail: <a class="email" href="mailto:alexey@koromyslov.ru">alexey@koromyslov.ru</a>Skype: <a class="skype" href="skype:lazymozzy">lazymozzy</a>
</div>
Используемые здесь полное имя (fn), организация (org), адрес электронной почты (email) и пр. определены с использованием определённых имён классов, а для всего блока задан class="vcard", который показывает, что вложенные классы принадлежат hCard. Например Яндекс уже начал поддерживать микроформаты.
Стоит знать, что валидный код и семантика не помогут побороть баги IE. Прежде всего стандарты и семантика способствуют меньшему количеству ошибок и лучшей читаемости кода — в итоге меньше времени будет затрачиваться на поиск элементов и исправление ошибок. Также семантически структурированную разметку любят поисковики, что в свою очередь ведёт к более высоким строчкам в поисковой выдаче.
Ежеминутно со всех сторон света на всех языках мира доносятся тысячи проклятий в адрес разработчиков этого замечательного браузера. Но сегодня постараемся обойтись без этого. Хотя, иногда задумываешься, а ведь не было бы IE — как же было бы скучно, да и верстальщикам платили бы меньше. 
