Похоже, что новые ресурсы и статьи для обучения и продвижения HTML5 которые выскакивают почти ежедневно.
We’ ве было дано HTML5 шаблонов в виде HTML5 boilerplate __ и 3 | HTML5 Reset (хотя обе они выходят за рамки просто вещи HTML5).We’ меня есть множество books на выбор, что HTML5 крышкой и связанных с ним технологий.We’ ве получил shivs galleries, и physician чтобы помочь залечить ваши болезни HTML5.И don’ забывайте официальная spec.
С моей точки зрения — исключением нескольких disputes о том, что термин “ HTML5″ должна и shouldn’ т означает — веб-дизайн и разработка сообщество по большей части охватывает все новые технологии исемантики с положительным attitude.
Flickr Photo Джереми Keith
В то время как it’ ы, конечно, верно, что HTML5 имеет потенциал, чтобы изменить веб-к лучшему, реальность такова, что эти виды основных изменений может быть трудно понять и принять.I’ м лично процесс получения лучшего понимания тонкостей HTML5′ с различными новыми features, поэтому я думал, я хотел бы обсудить некоторые вещи, связанные с HTML5, которые могут оказаться несколько запутанной, и, возможно, это поможет намВсе понимают некоторые аспекты языка немного лучше, что позволяет нам использовать новые возможности в наиболее практичным и соответствующим образом possible.
Хорошая (и простой) Parts
Хороший материал в HTML5 уже обсуждалась довольно прочно в ряде источников, включая книги Брюс Lawson Джереми Keith, и Все Pilgrim, чтобы назвать несколько.Выгоды, получаемые от использования HTML5 включает улучшенную семантику, снижение увольнений, и включение новых функций, которые сводят к минимуму необходимость в сложных сценариев для достижения стандартных задач (например, проверки входных данных в формах, например)
Я думаю, что это все похвально улучшений в эволюции web’ язык с разметкой. Некоторые из усовершенствований, однако, немного confusing, и, кажется, немного революционным, а неэволюционным, последний из которых является одной из дизайн principles HTML5, на которых основаны.Let’ посмотрим на несколько примеров, чтобы мы могли видеть, насколько гибкими и ценные некоторые новые элементы действительно — только мы получим прошлом некоторые из confusion.
< article> Isn’ т просто Article
Среди дополнений к семантические элементы являются новыми <section> и <article> теги, которые заменят некоторых случаях семантически бессмысленных <div> теги, которые we’ повторно все привыкли в XHTML.Проблема возникает, когда мы пытаемся расшифровать, как эти метки должны быть used.
Кто-то новым для языка, вероятно, считать, что <article> элемент будет представлять собой одну статью как сообщение в блоге.Но это не всегда case.
Let’ S рассмотреть блога в качестве примера, что то же самое примеру используемые в spec.Естественно, мы будем думать блоге отмечен в HTML5 будет выглядеть примерно так:
<article> <h1>Title of Post</h1> <p>Content of post...</p> <p>Content of post...</p> </article> <section> <section> <p>Comment by: Comment Author</p> <p>Comment #1 goes here...</p> </section> <section> <p>Comment by: Comment Author</p> <p>Comment #2 goes here...</p> </section> <section> <p>Comment by: Comment Author</p> <p>Comment #3 goes here...</p> </section> </section>
Для краткости I’ нас оставили некоторые из других тегов HTML5, которые могли бы войти в такой пример.В этом примере <article> теги обернуть всю статью, то “ section” ниже оболочкой для всех комментариев, каждый из которых находится в своем собственном “ section” element.
Это не было бы недействительными или неправильно структуру блога, как это.Но, по пути <article> описан в спецификации, <article> элемент должен обернуть всю статью и comments.Кроме того, каждый комментарий само по себе может быть завернуты в <article> метки, которые вложены в основном <article> tag.
Ниже захват экрана от спецификации, с <article> теги указано:
Статья теги могут быть вложены в статье теги — концепция, которая кажется запутанным на первый glance.
Таким образом, <article> элемент может иметь другие <article> элементов, вложенных в него, что затрудняет как мы, естественно, рассматривать слово “ article”.Брюс Лоусон, соавтор Введение в HTML5, пытается прояснить путаницу в этом interview:
“ Подумайте о <article> не в плане печати, такие как “ Газета article” но как дискретный объект как “ статьи clothing”, полное само по себе, но также может смешиваться с другими статьями, чтобы сделать более широкомensemble.”
— Bruce Lawson
Так что имейте в виду, что вы можете вкладывать <article> элементов и <article> элемент может содержать большее, чем просто содержание статьи.Bruce’ S объяснение выше очень хорошо, и это вид HTML5 образования that’ Sнеобходимы, чтобы помочь нам понять, как эти новые элементы могут быть used.
Раздел или статья
Вероятно, одной из самых запутанных вещей, чтобы выяснить при создании макета HTML5, является ли или не использовать <article> или <section>.Пока я пишу эту фразу, я могу честно сказать, что я don’ знаю разницу, фактически не глядя, что спецификация говорит, или ссылки на один из моих книг HTML5.Но постепенно it’ Становится все более ясным.Я думаю, Jeremy Keith определяет <article> лучшие на стр. 67 из HTML5 для веб-Designers:
“ article элемент [а] специализированный вид section.Используйте его для автономного связанных content… Спросите себя, если бы Вы синдикат содержание в корм RSS или Atom.Если содержание все еще имеет смысл в этом контексте, то article, вероятно, правой элемент use.”
— Jeremy Keith, HTML5 для веб-Designers
Keith’ с объяснением очень помогает, но потом он продолжает объяснять, что разница между <article> и <section> достаточно мал, и it’ с до каждого разработчика, чтобы решить, как эти элементы должны быть использованы.А добавление к путанице является то, что вы можете иметь несколько статей в разделах и нескольких разделов в articles.
В результате, вы можете удивиться, почему у нас обоих.Основным отличием является то, что <article> элемент предназначен для синдикации, в то время как <section> элемент предназначен для структуры документа и портативность.Это простой способ просмотра различий, безусловно, помогает сделать два новых элемента немного более отчетливым.Важно иметь в виду, что, несмотря на наше первоначальное замешательство, эти изменения, когда более широкое распространение, собираются, чтобы помочь разработчикам и создателям контента для улучшения их работы и способ содержания shared.
Верхние и нижние колонтитулы (Plural!)
Два других элементов, введенных в HTML5 является <header> и <footer> элементов.На первый взгляд, это кажется довольно простым.В течение многих лет we’ ве разметки нашего сайта верхние и нижние колонтитулы с <div id="header"> <div id="footer"> или аналогичных.Это отличная возможность для DOM ма …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров