Ось зображення сайту, який ми будемо верстати на HTML5 та CSS3:
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Також скачайте исходники собі на комп'ютер!
Вище на зображенні ви бачите контент папки, що містить фінальну демоверсію сторінки - як і обіцяно, жодного зображення. У нас є сторінка HTML з «просунутої» розміткою, файл CSS, що містить стилі, керовані CSS3 і папка, що містить кілька шрифтів, які ми збираємося вставити, застосувавши правило @ font-face.
Як завжди, я раджу розташувати весь вміст сайту в файлі index.html ще до того, як вам в голову прийде перейти до CSS, так що давайте прямо до цього і приступимо.
Верстка на HTML5 - розробка швидше, а код гнучкіше
До того ж до розміщення нових семантичних елементів HTML5 ще і сильно вкорочує код.
А ось як це було раніше:
Спосіб HTML5 набагато краще, правда? Далі ми відкриваємо тег html і встановлюємо мову документа. (Подтег своєї мови можна знайти в IANA Language Subtag Registry). Ще одна помітна тут зміна - відсутність лапок, оточуючих значення en. Вам доводилося для підтвердження правильності включати лапки в XHTML, але виходячи з того, що це HTML5, вони більше не потрібні.
Просуваючись до Тегу body, розмічаємо область заголовка своєї сторінки, де повно елементів HTML5:
елемент Header
Відразу ж після відкриття тега body ми скористаємося одним з нових елементів HTML5 - header. Ось яке визначення дає елементу заголовка консорціум Word Wide Web (W3C):
Елемент заголовка (header) представляє вступну групу або допоміжні засоби навігації.
Дотримуючись їх рекомендації, елемент header буде містити наш логотип, підзаголовок і основну навігацію. При введенні елемента заголовка header у нас з'являється деталь розмітки, яка містить всі ті частини сторінки, які ми інтуїтивно вважаємо заголовком. (Або все ті деталі сторінки, які будуть вкладені в елемент div з id заголовка.) На сторінці елемент header можна вжити не один раз, і ми знову будемо користуватися ним всередині елементів article, в яких будуть міститися вступу до постів.
елемент Hgroup
Першим всередині елемента заголовка йде інший новий тег - hgroup. Ми скористаємося нею для показу відповідно логотипу нашого сайту і підзаголовка в тегах h1 і h2.
Елемент hgroup використовується для групування набору елементів h1-h6, коли у заголовка є множинні рівні, такі як субіменованія, альтернативні назви або підзаголовки.
Елемент hgroup може виглядати зайвим, поки ви не оберне, як зазвичай, заголовки в елемент div для того, щоб у назви або субіменованія (й) був звичайний фон або стиль. Однак в схемі документа hgroup грає важливу роль. Алгоритм схеми перевіряє вашу сторінку і передає структуру заголовка. Перевірити начерк своєї роботи за допомогою інструменту Outliner. Коли алгоритм схеми зіткнеться з елементом hgroup, він проігнорує все, крім заголовка самого вищого рівня (зазвичай h1).
Тепер у нас виникла проблема: алгоритм схеми не бездоганний і не завершений. Наприклад, наступний елемент, який ми обговоримо - це елемент nav, і розмітка позначає його як "Untitled Section" (область без назви). До розробникам розмітки надходили прохання про зміну алгоритму схеми для того, щоб той представляв елемент nav як "Navigation" (навігація). У будь-якому випадку, елемент hgroup забезпечує вас способом групування своїх заголовків і, таким чином, організовує їх як структурно, так і семантично.
елемент Nav
Ми переходимо до наступного елементу HTML5 - nav. У nav ми включимо основну навігацію сайту, обгорнуту в невпорядкований список.
Використання nav для створення основної навігації сайту - це щось на зразок даності, але обставини такі, що на вашому сайті буде більше областей, які містять посилання; питання в тому, які з них вам слід обернути тегом nav. Ось деякі приклади використання, які, я вважаю, можуть підійти:
Таблиця змісту (TOC) в довгому документі;
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Нумеровані посилання типу «попередній / наступний» і
Згідно зі специфікацією, це можуть бути відповідні або невідповідні випадки вживання елемента nav. Специфікація не надто чітка, а наведені приклади не дуже допомагають. Так що поки специфікація не остаточна і більш конкретна, для вибору правильного методу використання елемента nav можна покладатися тільки на співтовариство розробників.
елемент Article
Наступний елемент, який я хочу вам представити - article. Основна область нашої демо-сторінки містить три цитати з постів, і кожну з них ми обгорнемо в тег article.
Ось визначення W3C для елемента article:
На цей раз специфікація зрозуміліша і пост в блог (або його уривок) набагато краще (зверніть увагу на згадування про синдикації) підходить до article. Звичайно, ми можемо розмістити на сторінці багато елементів article.
елемент Footer
Як я вже говорив, нижній колонтитул footer можна використовувати на одній сторінці стільки раз, скільки потрібно, і він являє собою сегмент нижнього колонтитула сторінки документа або частина документа.
елемент Section
Елемент section представляє загальну область документа або додатка. Секція в даному випадку - це тематичне групування вмісту, зазвичай за допомогою заголовка.
Елемент section досить хитрий, тому що у визначенні по специфікації здається дуже схожим на елемент div. Я попався в цю пастку, коли почав писати код для демо-сторінки; я розмістив всередині елемента section три елементи article. Незабаром я зрозумів помилковість своїх методів. Єдиний спосіб вирішити, чи вживати section - це подивитися, чи потрібно тій області, яку ви хочете обернути елементом section, назва (заголовок). З визначення видно, що у елемента section зазвичай є заголовок.
елемент Aside
Останній використовується для демо-сторінки елемент HTML5 - aside; ми використовували його як контейнер бічної колонки.
Елемент aside представляє секцію сторінки, що складається їх контенту, поверхнево пов'язаного з вмістом, розташованим навколо aside, і який може сприйматися окремо від цього вмісту. Такі секції часто представлені в книгодрукуванні як бічні колонки.
Згідно специфікації, один із прикладів ідеального використання елемента aside - це бічна колонка. Нижче на графіку можна побачити розташування ієрархії елемента aside нашої демо-сторінки.
Ми розмістили два section і один nav. Перший елемент section містить посилання на Twitter і RSS, а другий представляє останній твіт (запис користувача в Twitter'е). Другий елемент section, крім того - один з рідкісних випадків, коли у нього відсутня заголовок. У нього могло б бути назва, що-небудь типу: «Останній твіт», але, я думаю, це не обов'язково, тому що читачі звикли бачити блоки на зразок цього, а мітка Twitter'а під цитатою дуже впізнавана. Елемент nav нашої бічної колонки використовується для відображення списку блогів і, на відміну від основної навігації, у нього є заголовок.
Останнє слово
Отже, ось і підійшла до завершення перша частина нашої статті присвяченій верстці сайту на HTML5 та CSS3. Я намагався зробити її настільки короткою, наскільки можна, і не витрачати занадто багато часу на невизначеності в специфікації HTML5, тому що вона ще не закінчена. Тим часом нам доведеться покладатися на співтовариство і праця «лікарів» HTML5, що стануть нашими провідниками по впровадженню нових елементів в сайти.
Спасибі за прочитання і не пропустіть другу частину статті, де ми обговоримо властивості CSS3, які використовуються для декорування розмітки.
Редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
