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

Семантична верстка, або семантичний HTML-код, — це підхід до створення веб-сторінок мовою HTML, заснований на використанні HTML-тегів у відповідності з їхньою семантикою (призначенням)[1], а також котрий припускає логічну та послідовну ієрархію сторінки[2][3]. Він протиставляється підходу, при якому написання HTML-коду визначається зовнішнім видом веб-сторінки. Для оформлення веб-сторінок, написаних у відповідності до семантики, використовують каскадні таблиці стилів (CSS). Стандарт HTML із самого початку включав у себе ряд семантичних тегів[4], але велику популярність семантична верстка отримала після початку робіт над HTML5.

HTML

Історія

HTML включив семантичну верстку з моменту її створення. У HTML-документі автор може "починати із заголовка, додавати заголовки та абзаци, додавати зображення, додавати посилання на інші сторінки, використовувати різні види списків ".

Різні версії стандарту HTML включають розмітку презентацій, такі як <font> (всі версії) (додано в HTML 3.2; видалено в HTML 4.0 Strict) та <center> (додано в HTML 3.2). Існують також семантично нейтральні елементи <span> та <div>. З кінця 1990-х, коли каскадні таблиці стилів (CSS) починають застосовувати в більшості браузерах, веб-авторам рекомендується уникати використання презентаційної HTML розмітки з метою розділення презентації та контенту.

У 2001 році Тім Бернерс-Лі брав участь в обговоренні Semantic Web, де було представлено, що «агенти» інтелектуального програмного забезпечення можуть автоматично сканувати інтернет, знаходити, фільтрувати та співвідносити раніше не пов’язані між собою опубліковані факти на користь користувачів. Важливим типом веб-агента, який виконує сканування та читання веб-сторінок автоматично, без попереднього знання того, що воно може знайти, — веб-сканер або павук пошукової системи. Ці програмні агенти залежать від смислової чіткості веб-сторінок, які вони знаходять, використовуючи різні методи та алгоритми для читання й індексації мільйонів веб-сторінок на день та надання веб-користувачам засобів пошуку.

Застосування

У якості прикладу можна привести зміни у стандарті HTML, які торкнулися, зокрема, тегу фізичного форматування <i> (англ. italic, той, що робить текст курсивним) — замість нього тепер рекомендується використовувати тег логічного форматування <em> (від англ. emphasis, акцентування). Відтак із допомогою CSS акцентування можна візуально представити курсивом, напівжирним шрифтом, підкресленням, аудіозаписом (при озвучуванні тексту на основі TTS-технологій), сповільненням темпу промови або більш гучним голосом і тому подібне. Ці зміни викликані тим, що візуально курсивом оформлюється не тільки акцентування тексту, але й, наприклад, цитати, для котрих із HTML4 з'явився тег <cite>. Іншим застосуванням курсиву може бути визначення іноземних фраз або слів, при цьому веб-розробники можуть використати вбудовані в XHTML атрибути вказівки мови або зробити свою розмітку семантичною, вказавши правильний клас елемента з текстом через атрибут <class> (наприклад, class="foreign"). Використання різної розмітки для акцентів, цитат та іноземних слів дозволяє електронним веб-агентам, таким як павуки пошукових систем, точніше визначати значущість як окремих елементів веб-сторінки, так і всього тексту в цілому.

Також для семантичної верстки введено такі нові теги, як header, article, footer, nav, section, aside. Коротко розглянемо кожен із них.

<header> — представляє собою набір початкових даних і певної навігації. В ньому розміщують логотипи, заголовки, посилання на сайт, а інколи і меню навігації по сайту. Тобто цей елемент — це "шапка" веб-сторінки.

<article> — відповідає статті, запису в замітці, новині. Все, що відноситься, наприклад, до вашої статті на сайті повинне бути включене в тег <article>(тобто це і заголовок статті, дата, сам контент, а також коментарі). Щодо коментарів, то вони також окремі в <article>, але вкладені в основний.

<footer> — це нижня частина сайту, де зазвичай розміщують авторські права, додаткову інформацію, меню сайту та інше.

<nav> — виділяє панель навігації по сайту, меню. На сторінці може бути декілька таких елементів.

<section> — із його допомогою можна розділяти веб-сторінку на певні тематичні розділи або розділити статтю на розділи. Як правило має власний заголовок.

<aside> — використовується для контенту, який повинен розміщуватись окремо від основного. Це може бути бокова панель, частина сторінки перед <footer> абощо. В тезі можна розміщувати меню, рекламу та інший додатковий контент.

Література

Див. також

Примітки
  1. Рыжков Е. (18 лютого 2010). Семантический HTML код — рекомендация с большими выгодами (кг). xiper.net. Процитовано 2014-10-12 19:47:14.
  2. Рябоконь С. (18 червня 2013). Вёрстка: переход к семантической разметке — главная цель HTML (рос.). Хабрахабр.
  3. Marsman J. (1 серпня 2011). HTML5 Part 1: Semantic Markup and Page Layout (англ.). MSDN Blogs. Процитовано 2014-10-12 19:36:48.
  4. Amerland, 2013, с. 166.
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.