Семантика (фр. sémantique от греч. σημαντικός — обозначающий). Семантика в верстке — это совокупность смысловых отношений, возникающих в документе. Не понятно? На примерах ниже все станет ясно.

Зачем нужна семантика

• код будет понятен не только автору, но и тем, кто будет работать с ним после него
• работа с DOM'ом становится проще и доступнее
• семантический код гораздо лучше читается поисковиками (вспомните про h1)

Как сделать семантическую верстку? Очень просто: используйте теги по смыслу! Если у вас есть заголовок - используйте для него теги h1-h6. Если абзац/параграф – используйте тег p (paragraph). Примеры семантической верстки

Для проверки знаний верстальщика даем 2 макета: простой и сложный.
смотреть макеты