Где здесь шапка и подвал?

2 Окт 2011

Еще несколько слов в поддержку современных версий браузеров.

Сейчас во всю уже наступает HTML5 и программисты создающие сайты мало по-малу начинают его использовать повсеместно внедряя новые семантические теги в структуры своих сайтов.

Перечислим же их:

  • <article> тэг определяет статью;
  • <aside> тэг определяет контент вне контента страницы;
  • <audio> тэг определяет аудио контент ;
  • <canvas> тэг определяет гафику ;
  • <command> тэг определяет коммандную кнопку;
  • <datalist> тэг определяет выпадающий список;
  • <details> тэг определяет детали элемента;
  • <dialog> тэг определяет диалог;
  • <embed> тэг определяет внешний интерактивный контент или плагин;
  • <figure> тэг определяет группу медиа контента, и его заголовки;
  • <footer> тэг определяет футер (подвал) для секции или страницы;
  • <header> тэг определяет заголовок для секции или страницы;
  • <hgroup> тэг определяет информацию о секции в документе;
  • <keygen> тэг определяет генерируемый ключ в форме;
  • <mark> тэг определяет отмеченный текст;
  • <meter> тэг определяет измерения внутри определенного диапазона;
  • <nav> тэг определяет навигационные ссылки;
  • <output> тэг определяет некоторые типы для вывода;
  • <progress> тэг определяет прогресс процесса любого рода;
  • <rp> тэг используется для Ruby аннотаций, и определяет что показывать браузерам, которые не поддерживают элементы ruby;
  • <rt> тег определяет объяснения Ruby аннотаций.;
  • <ruby> тег определяет Ruby аннотации;
  • <section> тег определяет секции;
  • <source> тег определяет медиа ресурсы;
  • <time> тег определяет дату/время;
  • <video> тег определяет видео

В оформлении новых тегов отсутствует одна важная деталь — <div>. Было — <div id=»footer»></div>, стало <footer></footer>.

Замена тэга <div> на новый тэг стало одним из главных достижений HTML5 с точки зрения семантики. Тэг HTML4 <div> был и всё ещё остаётся одним из основных тэгов используемых в коде HTML, но семанически он слаб и фактически бесполезен когда он используется для определения различных секций и областей в структуре сайта. Новые тэги HTML5, такие как <article>, <aside>, <nav>, <figure>, <header>, <footer> – будут намного более полезными и удобными, потому, что эти тэги дают возможность определить все главные части сайта и прояснить основную структуру. Это значит, что можно легко ориентироваться в коде, даже если вы не очень опытный кодер – не говоря уже о том, что поисковые машины будут безума от страниц которые так удобно структурированы.

Но вернемся к нашим баранам то есть к версиям браузеров в возрасте. Одна из бед, это то, что они не воспринимают новую семантику. Ни в какую. Ни в HTML ни в CSS. Соответственно ломается дизайн и верстка сайта.

К примеру подвал этого сайта в IE8 выглядит как набор контейнеров идущих друг под другом.

Share