HTML - это язык разметки. Говорить о его полезности и необходимости для QA-developer'a или Java-developer'а нужно чаще. Возникает вопрос почему? Ведь есть целые подразделения специалистов по верстке (имею ввиду серьезные компании), которые могут всегда заняться этим бесполезным делом и не вовлекать в эти замысловатые конструкции из тэгов, работников других отделов.
Несомненно верстку сайтов можно отнести к искусству и нельзя его освоить за неделю или месяц. Но тем не менее, знание предмета даже на поверхностном уровне, дает огромное преимущество developer'у (будь то сотрудник QA-отдела или отдела разработки).
Не смотря на то, что HTML5 официально должен быть презентован в 2014 году, все чаще и чаще можно встретить верстальщика, который использует в своей работе тэги из HTML5.
Вот так мы плавно и переходим к описанию новых тэгов. Но прежде хочу отнять еще 1 минуту времени и напомнить о том, что по сути самый популярный тип верстки это DIV-ная верстка. Этот тип характерен тем, что каждый логический блок на странице задается DIV'ом со своим атрибутом (id или class).
Тэг <header> пришел на замену своей более громоздкой конструкции <div id='header'> (к примеру именно так принято обозначать "шапку" сайта в HTML4). С помощью header можно и даже следует начать тело документа. По спецификации, внутри этого элемента должны находится заголовки <h1>,...,<h6> с описаниями сайта в целом или конкретной его страницы, возможны вспомогательные элементы навигации, логотип или поисковая форма. Следовательно "начинкой" header-тэга могут быть все те же, давно привычные плюшки, которые мы и привыкли видеть в "шапке" сайтов.
Тэг <section> служит оберткой для других групп тэгов на странице, которые нуждаются в объединении в связи с их подобностью или по задумке верстальщика. Т.е. реально использование section-тэга заключается в том, что в него кладут другие элементы с контентом, навигацией или формами и затем позиционируют всех их с помощью выставления нужных свойств section-тэгу. Также подразумевается, что содержимое в section-тэга, имеет что-то общее между собой (в случае, если это контент).
Тэг <article> это и есть то ради чего мы сидим в интернете. Это тот элемент на странице в котором должен находится контент (статья блога, пост на форуме, отзыв пользователя...). На странице может находится любое количество этих тэгов. Их следует включать в section-тэг, в свою очередь article-тэг может содержать section-тэг и даже article-тэг.
Возникает вопрос: а надо ли создавать такие глубокие ветвления? По своему небольшому SEO-опыту замечу, что поисковые машины любят, когда страницы предельно просты и не имеют нагромождений в разметке. По этому для верстальщиков совет: используйте article-тэг без множественных вложений в него самого себя и section-тэгов.
Тэг <nav> предназначен для содержания в себе ссылок. В контексте этого определения можно заключить, что все группы ссылок на странице нужно упаковывать в nav-тэг. На данный момент по спецификации сказано, что следует выделять только главный блок навигации (будь он в "Шапке" или в боковой колонке) nav-тэгом, а все остальные помещать в другие элементы ( к примеру <p>). Следует ожидать, что ближе к 2014 году нам дадут более точные рекомендации по использованию этого тэга.
Тэг <aside> весьма необычен для моего понимания. Его рекомендуют использовать для отделения конкретных частей страниц. К примеру все, что находится в левой колонке сайта, может быть внутри asid-тэга... Так же есть рекомендации использовать aside-тэг для заключения в себе второстепенных блоков навигации (те, которым не выпала честь находится внутри nav-тэга).
Тэг <footer> это один из самых однозначных тэгов в HTML5. Он зачастую должен находится в самом низу страницы, но тем не менее, нет жестких требований к его расположению. Копирайт, ссылки, информация об авторе - вот, что призвано наполнять footer-тэг. Разумеется можно придумать еще что-то для размещения в footer-тэге, но об этом не в этой статье.
Всем спасибо за внимание. Был очень рад видеть каждого кто пришел на моюпрофанскую своеобразную лекцию по введению в тэги HTML5. Рекомендую для более детального изучения материала, перейти по ссылке и попробовать самому вникнуть в предназначение каждого тэга.
Несомненно верстку сайтов можно отнести к искусству и нельзя его освоить за неделю или месяц. Но тем не менее, знание предмета даже на поверхностном уровне, дает огромное преимущество developer'у (будь то сотрудник QA-отдела или отдела разработки).
Не смотря на то, что HTML5 официально должен быть презентован в 2014 году, все чаще и чаще можно встретить верстальщика, который использует в своей работе тэги из HTML5.
Вот так мы плавно и переходим к описанию новых тэгов. Но прежде хочу отнять еще 1 минуту времени и напомнить о том, что по сути самый популярный тип верстки это DIV-ная верстка. Этот тип характерен тем, что каждый логический блок на странице задается DIV'ом со своим атрибутом (id или class).
Тэг <header> пришел на замену своей более громоздкой конструкции <div id='header'> (к примеру именно так принято обозначать "шапку" сайта в HTML4). С помощью header можно и даже следует начать тело документа. По спецификации, внутри этого элемента должны находится заголовки <h1>,...,<h6> с описаниями сайта в целом или конкретной его страницы, возможны вспомогательные элементы навигации, логотип или поисковая форма. Следовательно "начинкой" header-тэга могут быть все те же, давно привычные плюшки, которые мы и привыкли видеть в "шапке" сайтов.
Тэг <section> служит оберткой для других групп тэгов на странице, которые нуждаются в объединении в связи с их подобностью или по задумке верстальщика. Т.е. реально использование section-тэга заключается в том, что в него кладут другие элементы с контентом, навигацией или формами и затем позиционируют всех их с помощью выставления нужных свойств section-тэгу. Также подразумевается, что содержимое в section-тэга, имеет что-то общее между собой (в случае, если это контент).
Тэг <article> это и есть то ради чего мы сидим в интернете. Это тот элемент на странице в котором должен находится контент (статья блога, пост на форуме, отзыв пользователя...). На странице может находится любое количество этих тэгов. Их следует включать в section-тэг, в свою очередь article-тэг может содержать section-тэг и даже article-тэг.
Возникает вопрос: а надо ли создавать такие глубокие ветвления? По своему небольшому SEO-опыту замечу, что поисковые машины любят, когда страницы предельно просты и не имеют нагромождений в разметке. По этому для верстальщиков совет: используйте article-тэг без множественных вложений в него самого себя и section-тэгов.
Тэг <nav> предназначен для содержания в себе ссылок. В контексте этого определения можно заключить, что все группы ссылок на странице нужно упаковывать в nav-тэг. На данный момент по спецификации сказано, что следует выделять только главный блок навигации (будь он в "Шапке" или в боковой колонке) nav-тэгом, а все остальные помещать в другие элементы ( к примеру <p>). Следует ожидать, что ближе к 2014 году нам дадут более точные рекомендации по использованию этого тэга.
Тэг <aside> весьма необычен для моего понимания. Его рекомендуют использовать для отделения конкретных частей страниц. К примеру все, что находится в левой колонке сайта, может быть внутри asid-тэга... Так же есть рекомендации использовать aside-тэг для заключения в себе второстепенных блоков навигации (те, которым не выпала честь находится внутри nav-тэга).
Тэг <footer> это один из самых однозначных тэгов в HTML5. Он зачастую должен находится в самом низу страницы, но тем не менее, нет жестких требований к его расположению. Копирайт, ссылки, информация об авторе - вот, что призвано наполнять footer-тэг. Разумеется можно придумать еще что-то для размещения в footer-тэге, но об этом не в этой статье.
Всем спасибо за внимание. Был очень рад видеть каждого кто пришел на мою
Неплохо было бы услышать мнение о том, а стоит ли изучать сейчас "вплотную" HTML5 ? Как бы, на данный момент, только последние версии браузеров поддерживают его и вряд ли стоит рисковать, делая очередной сайт клиенту, используя эту технологию.
ОтветитьУдалитьЛибо посмотреть на это все с другой стороны: сейчас разработчик начнет изучать и практиковаться с HTML5, а через пару годиков, когда эта технология станет более поддерживаемой браузерами + добавят еще некоторый функционал, ему будет не так накладно по времязатратам изучить до конца его возможности. Интересует твое мнение :)
Рекомендую его уже внедрять на том уровне, который позволяют браузеры... Начиная от закруглений блоков, заканчивая фишками для форм =)
УдалитьВ дальнейшем будет проще пополнять библиотеку знаний, чем брать все с нуля =)