Принципи семантичної верстки сайту та основні теги HTML5

  1. Семантична верстка в HTML
  2. Приклади семантичної верстки HTML5
  3. Поширені теги HTML5 для семантичної верстки

Привіт, шановні читачі блогу Привіт, шановні читачі блогу.

Ми з вами вже не раз торкалися теми верстки сайту, зокрема, розглядали основи роботи з html-кодом і редагування css-стилів . Сьогодні ми підемо далі і розберемося з тим, що таке семантична верстка сайту, для чого вона потрібна і як її застосовувати на практиці. Для розуміння даної теми важливо попередньо вивчити хоча б основні принципи html і css, або ж осягати нову інформацію по ходу прочитання сьогоднішньої статті, звертаючись за роз'ясненнями до більш раннім статей на моєму блозі.

зміст:

  1. Що таке семантична верстка: суть і значення
  2. приклади використання
  3. Основні теги HTML5

Семантична верстка в HTML

Семантика в мовознавстві означає сенс, значення слова або мовного обороту. Ми вже зустрічали цей термін, коли розглядали збір семантичного ядра для сайту . І в тому контексті, і в сьогоднішній статті визначення «семантичний» вказує на те, що в основі лежить сенс. А отже, семантична верстка - це верстка, побудована на смисловій структурі. На відміну від так званої верстки на дівах (div - html-тег), всі елементи семантичної верстки підпорядковані смисловий ієрархії. І найбільш наочний приклад для пояснення - це використання тегів заголовків і підзаголовків h1, h2, h3 і т.д. Семантика в мовознавстві означає сенс, значення слова або мовного обороту

Це теги семантичної розмітки. І якщо спочатку в html для виділення підзаголовків використовувалися теги <b> або <strong>, то сьогодні таке акцентування для заголовків майже не вживається. Замість цього теги h1 і h2 увібрали всі необхідні функції для виділення назв розділів жирним збільшеним шрифтом. Крім того, ці теги дають набагато більше інформації про текст, як самим веб-розробникам, так і роботам, що обробляють веб-сторінки. Тобто раніше html-верстка була більш описової, приділялася увага зовнішнім атрибутам елементів, які складали загальну структуру окремими блоками. У семантичній ж верстці - основний акцент робиться на підпорядкуванні структурних елементів загальної смислової ієрархії, де кожен блок має своє призначення для цілого.

Вживання тегів семантичної верстки дозволяє зменшити кількість коду сторінки, прискорити обробку, а відповідно і завантаження документа. Також зрозуміла структура коду набагато швидше розпізнається, а тому і вище котирується пошуковими системами. Нагадаю, як ми використовували мікророзмітки для розширеного опису сайту у видачі .

Коли кожному структурному елементу сайту відповідає певний тег, код стає впорядкованим і зрозумілим. При цьому опис стилів елементів виводяться в окремий css-файл. Для того, щоб побачити наскільки сторінки вашого сайту структуровані можна виконати простий експеримент. Вимкніть на час в браузері підтримку CSS і JavaScript і подивіться, де на вашому ресурсі назви статей, зміст, підзаголовки і т.д. Чи можете ви розібратися в структурі вашого сайту, використовуючи тільки html-розмітку?

Приклади семантичної верстки HTML5

Ще один наочний приклад, де ясно видно відміну семантичної верстки від минулих стандартів html, - використання тега <em> (від англійського emphasis - акцент). Тег <em> замінив тег <i> (виділення курсивом). Для тега <em> в файлі стилів може здаватися відображення курсивом, підкресленням, напівжирним. Але значення даного тега - саме акцентування тексту, наприклад, для виділення нового терміна. Однак, в разі, коли потрібно вжити цитату, в семантичної верстки буде вже використовуватися тег <cite>, хоча раніше обидва ці елементи (і новий термін, і цитата) були б укладені в тег <i> (виділені курсивом).

А тепер наведемо приклад, як верстка дивами замінюється семантичної.

Приклад звичайної верстки:

1 2 3 4 5 6 <div class = "new"> <div class = "article"> <div class = "title"> Тема поста </ div> <div class = "text"> Текст поста </ div> </ div> </ div>

<Div class = "new"> <div class = "article"> <div class = "title"> Тема поста </ div> <div class = "text"> Текст поста </ div> </ div> </ div>

Заміна на семантичну:

1 2 3 4 5 6 <section class = "new"> <article> <h1> Тема поста </ h1> <p> Текст поста </ p> </ article> </ section>

<Section class = "new"> <article> <h1> Тема поста </ h1> <p> Текст поста </ p> </ article> </ section>

Тут ми використовували теги семантичної верстки: section, article, h1, p.

Стилі прописуються, як правило, в окремому в файлі (у випадку з WordPress в style.css) наступним чином:

1 2 3 4 5 6 7 8 9 10 11 12 header {width: 90%; margin: auto; } H1 {text-align: center; font-size: 2em; } Nav {background: # f1f1f1; color: # 777; }

header {width: 90%; margin: auto; } H1 {text-align: center; font-size: 2em; } Nav {background: # f1f1f1; color: # 777; }

У разі верстки з div, дане опис виглядало б так:

1 2 3 4 5 6 7 8 9 10 11 12 div.header {width: 90%; margin: auto; } Div .header span {text-align: center; font-size: 2em; } Div .menu {background: # f1f1f1; color: # 777; }

div.header {width: 90%; margin: auto; } Div.header span {text-align: center; font-size: 2em; } Div.menu {background: # f1f1f1; color: # 777; }

Однак всі переваги семантичної верстки не скасовують можливості вживання старих напрацювань. Важливо, підійти до побудови текстової розмітки з розумом, щоб кожен елемент вписувався в загальну структуру.

Поширені теги HTML5 для семантичної верстки

Для того, щоб глибше зрозуміти сьогоднішню тему розглянемо деякі теги, які використовуються при семантичної верстки в html5. А потім застосуємо їх на практиці.

<Header> - задає шапку сайту або розділу, в нього зазвичай включений заголовок, а також всередину можуть поміщатися інші теги, крім вищих по ієрархії (html, body, head і т.п.)

<Article> - тег, в який укладають елементи статті: безпосередньо текст, зображення, коментарі

<Section> - розділяє веб-документ на смислові секції, є можливість вкладати один тег section в інший

<Footer> - підвал сайту, де міститься інформація про контакти, адреси, посилання, авторство та інше

<Nav> - тег html5 для навігації по сайту, в нього поміщаються найбільш пріоритетні посилання, хоча допустимо використання декількох тегів на сторінці

<Aside> - блок неосновного контенту, як правило, бічна панель (сайдбар): рекламні блоки, рубрики, мітки і т.д.

Тепер, знаючи вищенаведені теги, подивимося, як вони працюють на прикладі нижче.

Прописуємо такий код в редакторі Notepad або Блокнот:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <header> Шапка сайту </ header> <nav> Навігація <ul> <li> <a href="#"> Посилання 1 </a> </ li> <li> <a href="#"> Посилання 2 </a> </ li> </ ul> </ nav> <section> Секція 1 <article> <h1> Заголовок статті </ h1> <p> Контент </ p> <h2> Підзаголовок статті </ h2> </ article> </ section> <footer> <p> Дата, адреса, авторство </ p> </ footer>

<Header> Шапка сайту </ header> <nav> Навігація <ul> <li> <a href="#"> Посилання 1 </a> </ li> <li> <a href="#"> Посилання 2 </a> </ li> </ ul> </ nav> <section> Секція 1 <article> <h1> Заголовок статті </ h1> <p> Контент </ p> <h2> Підзаголовок статті </ h2> </ article> </ section> <footer> <p> Дата, адреса, авторство </ p> </ footer>

Тепер запустимо документ, як html-файл.

Далі нам необхідно задати стилі для кожного елемента. У нашому випадку, додамо тег <style> з описами в уже створений html-файл. Якщо ж ви вносите зміни на сайті на WordPress, додавайте правки в файл стилі style.css.

Отже, загальний вигляд нашого файлу style.css буде таким:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 header {text-align: center; background: # FF0000; } Nav {float: right; width: 300px; background: # 3CB371; } Section {float: right; margin: 10px auto; width: 1250px; background: # 808080} section h1 {color: # 800000; padding: 10px; text-align: center; } Article {float: left; width: 595px; margin: 5px; padding-left: 5px; text-align: center; background: # 800080; } Article h2 {width: 250px; margin: 10px auto; text-align: center; background: # D2691E; } Footer {clear: both; height: 40px; padding: 10px; background: # 00FFFF; } Footer p {font-size: 14px; text-align: center; }

header {text-align: center; background: # FF0000; } Nav {float: right; width: 300px; background: # 3CB371; } Section {float: right; margin: 10px auto; width: 1250px; background: # 808080} section h1 {color: # 800000; padding: 10px; text-align: center; } Article {float: left; width: 595px; margin: 5px; padding-left: 5px; text-align: center; background: # 800080; } Article h2 {width: 250px; margin: 10px auto; text-align: center; background: # D2691E; } Footer {clear: both; height: 40px; padding: 10px; background: # 00FFFF; } Footer p {font-size: 14px; text-align: center; }

Детально вивчивши наведений код, ви побачите, що для кожного тега (header, section, article, footer) задані розташування, ширина, колір заливки або шрифту.

Такого ж виду веб-сторінки можна було б досягти, зверстати документ за допомогою тегів <div>, проте використавши теги семантичної верстки ми наочно дізналися про її переваги. Переглянувши код, відразу стає зрозумілим значення того чи іншого блоку, що дає можливість веб-розробникам ефективніше працювати з документами. У свою чергу структурованість семантичної верстки дозволяє пошуковим роботам швидко обробляти сторінки, що дає фору в ранжируванні, створеного таким чином, ресурсу.

Крім наведених основних тегів html5 для семантичної верстки, існує також безліч спеціальних, виконують важливе призначення. Наведемо короткий список найбільш використовуються семантичних тегів html5:

  • <Video> - відтворення і управління відео;
  • <Audio> - додавання і управління аудіо на сторінці;
  • <Canvas> - область для створення зображень і інших об'єктів Javascript;
  • <Command> - кнопка або перемикач всередині тега <menu>;
  • <Menu> - створення меню і контейнер для тега <command>;
  • <Datalist> - список варіантів, доступний після введення в текстовому полі (приклад такого списку - підказки Google);
  • <Figure> - групування елементів (наприклад, зображення з підписами);
  • <Hgroup> - групування заголовків і підзаголовків;
  • <Mark> - смислове виділення тексту;
  • <Meter> - висновок значень в заданому діапазоні, як правило, числові дані;
  • <Ruby> - додавання анотації зверху або знизу основного тексту (приклад - транскрипція під словами);
  • <Source> - вставка аудіо- або відеофайлу всередині тегів audio, video;
  • <Time> - текст всередині тега набуває значення дати, часу;

Наостанок, дивіться пізнавальний відео-урок з основ html5, його тегами і прикладами їх використання:

При належній спрямованості, ви обов'язково зможете освоїти необхідні знання. Вірте в свої сили.

До нової зустрічі!

Чи можете ви розібратися в структурі вашого сайту, використовуючи тільки html-розмітку?
Меню сайта
Мини-профиль
  • Регистрация Напомнить пароль?

    Бесплатно можно смотреть фильмы онлайн и не забудьте о шаблоны dle на нашем ресурсе фильмы бесплатно скачать c лучшего сайта
    Опросы
    Топ новости
    Инструкция: как включить подсветку клавиатуры на ноутбуке Asus


    Заблокировалась и отключилась встроенная клавиатура на ноутбуке: как снять блокировку и включить? 


    Ремонт ноутбука ASUS N75S в Санкт-Петербурге (СПб): замена дисплея, замена клавиатуры, ремонт корпуса Асус N75S, замена матрицы
    Услуга Стоимость, руб. Диагностика ASUS N75S Бесплатно (500р при необходимости разбора) Профилактические работы с системой охлаждения + замена кулера 2500 р * Замена чипа (видеочипа) ASUS N75S 6000-6500 Замена

    Как поменять клавиатуру на ноутбуке самостоятельно?
    Владельцы мастерских по ремонту компьютеров часто встречаются со случаями, когда приносят ноутбук, на который была пролита какая-либо жидкость. В некоторых случаях подобная ситуация означает, что понадобится

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

    Как почистить клавиатуру компьютера
    С появлением компьютера человек все больше времени проводит за ним. Это и рабочий инструмент, и средство развлечения. Поэтому, совсем неудивительно, что определенные устройства, используемые для ввода

    Замена и ремонт клавиатуры для ноутбука, видео-инструкции
    Замена клавиатуры и кнопок ноутбука показано на видео с подробным объяснением процесса. Цена замены в сервисном центре от 200 рублей . Звоните по тел: +7 (812) 640-03-20 . Замена или ремонт

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

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

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