Любимый HTML5 знакомимся ближе

Любимый HTML5 знакомимся ближе

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

В связи с тем, что я уже начал разбираться в синтаксисе, мне будет проще дискуссировать с вами в данной статье. Если возникнут какие-то вопросы, вы всегда сможете задать их в комментариях. И я обязательно постараюсь вам ответить, помочь или подсказать. Так что не стесняйтесь, спрашивайте.

Хорошая новость

Целый штат разработчиков Html5 единогласно сообщил, что их разработки дают плоды. Теперь очень выгодно использовать HTML во многих аспектах, начнем с малого, теперь у нас есть возможность благодаря HTML выполнять стандартные задачи, для решения которых, раньше приходилось прибегать к помощи другим языкам программирования. Для примера: Проверка заполнения формы.

<article> — Данный тег не является прямым значением слова Article.

Первые семантические теги, которые бросаются в глаза, это <selection> и <article>. Они призваны заменять бессмысленные теги <div>, к которым нас приучил синтаксис XHTML. Проблема возникает, когда мы пытаемся разобраться как это всё использовать. 

Возможно кто-то сразу же подумал, что <article> предназначен для выведения статьи или новости, например как в новостных сайтах. Но на самом деле, это не всегда так.

Давайте рассмотрим код, вывода статьи при помощи HTML5:

<article>

<h1>Title of post</h1>

<p>Short contents</p>

<p>Full contents</p>

</article>

<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>

Говоря короче, код который вы видите выше, может быть использован при создании страницы, и он не является ошибочным или не правильным. Просто по специфике, правильнее было бы использовать <article> так, чтобы он захватывал не только статью, но и последующие комментарии.

Это конечно всё звучит очень запутано, поэтому я ещё процитирую Брюса Лоусона, который попытался убрать этот беспорядок и выразить мысль более всеобъемлющей:

Примите тег <article> не с точки зрения печати, как газетную статью. А как нечто меньшее, но в тоже время могущественное, имеющее возможность объединить всё в один большой ансамбль. (Брюс Лоусон)

Section или Article?

Джереми Кейт, сказал следующее: «Тег article это специализированная форма section. Используйте это для отдельных сходных материалов. Спросите себя, если бы вы объединили весь контент в RSS ленту, чтобы вы использовали? Если контент для вас по-прежнему имеет большое значение, тогда есть смысл использовать article. В остальных случаях, советуем вам использовать section.» 

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

 

<article>

<section>Task 1</section>

<section>Task 2</section>

</article>

 

ИЛИ

 

 

<section>

<article>Task 1</article>

<article>Task 2</article>

</section>

Headers и Footers.

В HTML 5 мы встретим так же с вами такие теги как <header> или <footer>. Их мы можем использовать по их прямому назначению, т.е. header вверху кода, footer внизу. И это кстати не обязательно. Так же данные теги мы можем использовать внутри секции, т.е. <section>.

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

Похожие записи

5 вещей, которые вы должны знать о HTML5

5 вещей, которые вы должны знать о HTML5

[Программирование] Создаем свою игру легко

[Программирование] Создаем свою игру легко

Шаблоны Smarty в PHP советы

Шаблоны Smarty в PHP советы

fallback-image

Как сделать загрузку файлов на сервер?