Повернення до основ або як створити html5 шаблон!
LPgenerator - професійна Landing Page платформа для збільшення продажів вашого бізнесу
МАГАЗИН Лендінзі УНІВЕРСИТЕТ АКЦІЇ ВІД ПАРТНЕРІВ

Розмітка HTML - це прекрасна річ, яка, безумовно, змінилася за ці роки.
На відміну від попередніх версій HTML, де код здебільшого був обмеженою структурою, яка визначала використання класів і ID елементів, HTML5 намагається забезпечити більш складні структури.
Весь макет може бути створений за допомогою семантичних тегів і елементів, які допоможуть структурувати кожну сторінку. Це створює код, який є набагато чистішим і Новомосковскемим ніж в попередніх версіях HTML. Нові мітки вимагають, щоб ви думали про те, як ви структуруєте вашу сторінку.
До розуміння структури HTML5, і як створюється і кодується приклад шаблону для проектів, ви повинні знати історію його походження. Тільки пам'ятайте, що поточна версія HTML5 ще не та версія, яку W3C може назвати остаточною. Але, у вас і так є досить багато матеріалу для узученія і застосування його в коді.
Одним з головних питань про HTML5 є
DOCTYPE це не зовсім HTML елемент, а більше як декларація, яка стає все більш і більш важливою. Використовуючи його відповідне, ви можете допомогти браузеру зрозуміти який HTML він намагається розібрати. Тому завжди потрібно використовувати відповідні DOCTYPEs. На даний момент, ви можете просто використовувати HTML5 doctype для всього. Але, давайте також розглянемо деякі варіанти з минулого. Ось звідки ми прийшли до такої простоти:
Інші спрощення в HTML5
Кореневий елемент був спрощений, де замість того, щоб писати щось на зразок цього:
ми просто можемо написати:
Речі, які нам потрібно скопіювати і вставити, стають все менше і менше з кожним днем. Наприклад, в head елементі, кодування символів перейшла від цього:
до нової версії в HTML5:
І, нарешті, наші посилання скинули type атрибут. Наприклад це:
Section елемент, є спільною секцією HTML документа. Найбільш типовим, буде тематична угруповання контенту, у якого може бути heading, але не обов'язково.
Загальне правило для використання розділу заголовка (section heading), є його використання, тільки якщо на нього явно посилаються в загальних нарисах документа. Якщо, в начерках, була 'section'. на яку ви посилалися або відчуваєте, що весь вміст однієї області відноситься до 'section', тоді включіть section тег. Якщо ви хочете використовувати його в основному для стилізації, тоді вживайте
"Nav" елемент представляє будь-які частини сторінки, які посилаються на інші частини цієї сторінки або інші сторінки сайту. Коли мова заходить про навігаційні посилання, ви першим ділом повинні думати про "nav" теги.
nav елементи, призначені для великих блоків навігації. Будь-який великий елемент, який посилається на інші розділи або сторінки сайту. Майте на увазі, що розділ навігації не повинен бути у вигляді списку, хоча це досить стандартно.
Articles можуть містити в собі "section", "header", і навіть "hgroup". Але майте на увазі, коли і як ви використовуєте цей елемент, так як він не настільки широко використовується як тег
Ви, навіть можете використовувати елемент в aside для великих розділів сайту, таких як допоміжна панель для Twitter або Facebook, або випадкових лінків. Зробіть їх aside, а потім використовуйте header і nav розділ в ньому, щоб пояснити, що там відбувається. Також його можна використовувати в footer блогу, щоб посилатися на речі про нього, або майже в будь-якому іншому місці, aside може бути відмінно реалізований.
hgroup елемент, являє heading (заголовок) розділу. Цей елемент найкраще використовувати для групування набору h1-h6 елементів, коли заголовок має кілька рівнів, або підзаголовки (точно такі, як у статті, яку ви зараз Новомосковскете). Це було б ідеально для hgroup. Ви, також можете використовувати його для альтернативних назв чи tag-lines (тег-ліній).
Інший областю застосування, може бути блог, де ви розміщуєте заголовки і підзаголовки для вашого блогу. Також можна використовувати його для назви книги і опису, для переліку лікарів у вашому районі і області їх експертизи, або навіть використовувати hgroup, щоб допомогти скопіювати функціональність таблиці. Давайте поглянемо на такий приклад:
header тег, являє собою будь-яку групу вступних або навігаційних засобів всередині сайту або його розділів. Тепер, коли формальне визначення тега було зроблено, давайте його трохи розберемо. Ми всі знаємо, що таке заголовок, але, якщо бути по конкретніше, то він включає в себе різні речі вгорі самого сайту. Ці області заголовків зазвичай включають в себе брендинг розділів (branding sections), елементи призову до дії (call to action), і, можливо, трохи навігації. Там, де ви раніше писали:
Footer елемент, являє собою "підвал" для свого найближчого вкладеного розділу батько, і як правило, містить інформацію про розподіл батьків (parents section). Footer тег дуже схожий на header тег, але в протилежній частині сторінки. Найчастіше ви побачите футер сторінки, який містить посилання, які були в навігації, і, можливо, логотип або інші подібні речі (всі вони можуть бути розміщені в
address елемент, представляє контактну інформацію для свого найближчого article або body елемента. наприклад:

Отже, після того, як ми дізналися про HTML5, давайте перейдемо до кодування нашого власного HTML5 шаблону. Давайте почнемо з звичайного документа.
Тепер давайте додамо stylesheet посилання
Тепер можна починати настройку нашого body елемента зі структурою, для використання в інших проектах. Так що з урахуванням цього, давайте зробимо:
Зараз, як ви бачите, у нас з'явилося місце для нашого контенту. В наявності є кілька певних секцій: footer, header і section елемент в документі. Тепер, давайте додамо елемент навігації.
Ми, додали навігацію з неврегульованим списком в заголовку. А що робити, якщо у вас є великий підвал (footer) і ви хочете, щоб ті ж самі елементи-навігатори знаходилися там. Давайте додамо їх туди. За винятком того, що на цей раз ми не будемо використовувати тег
Тепер давайте додамо трохи деталей для IE, і інші тонкощі:
Ось і все, стандартний HTML5 шаблон готовий!
LPgenerator - професійна Landing Page платформа для збільшення продажів вашого бізнесу
УВАГА! Ви використовуєте застарілий браузер Internet Explorer
Даний сайт побудований на передових, сучасних технологіях і не підтримує Internet Explorer 6-ої і 7-ої версії.




