Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Октябрь, 2013

Сниппет структуры страницы HTML 5.

Любой web-мастер, если он пытается верстать страницы сайта с помощью топора, ножа, палки колбасы и «пол-литра» водки — ретроград и убийца здравого смысла. Потому как настоящий специалист ценит время, причём не только своё, но и заказчика, более того, web-мастер ответственен перед Вечностью, которая, если что не так, может и по башке въехать, стоит только пренебречь принципами научной организации труда.

Иными словами, нужно не только пережёвывать содержимое носоглотки, не только уметь пользоваться разными вариантами софта, но и иметь заранее созданные заготовки, куски кода, или то и другое вместе, ибо в этом – единство теории и практики в деле многократного повышения производительности труда.

Начиная с этого поста, я начинаю весеннее метание в массы собственных наработок, дабы, прежде всего самому ни хрена не забыть, ну и также – поделиться опытом с менее искушёнными коллегам и просто с теми, кто сейчас вот смотрится в этот текст и думает: «А какого, собственно, чёрта сей крендель разошёлся?»

Отвечаю: я потому разошёлся, что умной книги ты всё равно не осилишь, а потому лучше слушай меня-дурака.

Итак, берём базовый макет сайта, окучиваем его ещё не принятым языком разметки HTML 5 и балдеем от красоты забитых в неё элементов и от не менее красивого сенематичного кода.

Потому что HTML 5 с его полным набором новых элементов существенно упрощает процесс создание структуры страниц.

Смотрим: большинство страниц, написанных на HTML 4, включают широкий набор общих блоков, таких, как верхняя часть , нижняя часть , навигация , и т.д. Здесь в порядке вещей размечать их, используя теги div и присваивая каждому описывающий id или class.

HTML 5 вводит же несколько новых элементов и атрибутов. Некоторые из них технически являются эквивалентами div. Это в основном от того, что текущей версии HTML 4 недостаёт семантики в конкретном описании частей. HTML 5 избегает подобного с помощью ввода новых элементов для представления каждой из частей в отдельности.

Блоки div могут быть заменены новыми элементами: header, footer, nav, section, article, aside и footer. Вместо того чтобы использовать тэг для различных секций страницы, мы будем использовать соответствующие семантические теги, что значительно облегчит жизнь поисковым системам в выяснении типа контента, расположенного на странице.

HTML-структура теперь будет такой:



 
  
  
  
  
  
 
 
  
   

Название сайта

  
  
   
  • Главная
  • Об авторе
  • Карта сайта
  • Контакты
  
  
   
    
     

Заголовок статьи

    
    
Образец текста. "Рыба".

Например архив

     
     
  • 2010
    
   
  
  
   
© Автор

Это выглядит как обычная HTML-разметка, но есть несколько моментов, которые стоит отметить:

  1. В HTML 5, есть только один doctype. Он объявляется в начале страницы через . В отличие от существующих громоздких доктайпов, объявление 5-ой версии кратко и лаконично. Самое интересное в том, что большинство современных сайтов уже сейчас можно перевести в HTML 5, просто изменив строку с doctype и не меняя больше ничего. Это связанно с тем, что синтаксис HTML 5 полностью совместим с HTML 4и, соответственно, XHTML1-документами.
  2. Объявление кодировки в HTML 5 так же притерпело изменения. Выглядит оно теперь вот так: .
  3. Джава-скрипт заставляет понимать новые теги Internet Explorer (HTML 5 будет работать даже в IE6!). Остальные браузеры их уже знают.
  4. Тэг header, является контейнером для вступительных элементов, таких, как заголовок или логотип. Он также может содержать оглавление или поисковую форму.
  5. Навигация создается с использованием маркированного списка, который заключен в тег nav.
  6. Тэг section — для каких-то частей страницы.
  7. Тэг article — для основного контента: статей, комментариев и т.д.
  8. Тэг aside — для дополнительного контента (например, информация в сайдбаре).
  9. Тэг footer — для «подвала» сайта: обычно он содержит информацию о разделе, например, имя автора, ссылки на похожие документы, копирайт и тому подобное.

В результате получается картинка, вид которой напрямую зависит от того, какая в таблице стилей задана разметка и какая типографика. Но об этом я буду разглагольствовать в следующем посте, который, если не врут пиксели в мониторе и звёзды в небе, получится родить в ближайшие дни.

12 апреля 2010, 21:53