Семантична верстка або семантичний HTML код це підхід до створення вебсторінок мовою HTML заснований на використанні HTM

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

Не плутати з Семантична павутина.

Історія

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> абощо. В тезі можна розміщувати меню, рекламу та інший додатковий контент.

Література

Amerland D. Google Semantic Search. — Que Publishing, 2013. — 240 p. — ISBN 9780133434170.
Berners-Lee T. Weaving the Web: the original design and ultimate destiny of the World Wide Web by its inventor. — 1st ed. — San Francisco: HarperSanFrancisco, 1999. — 226 p. — ISBN 978-0062515872.
Семантична верстка HTML5 [1].

Див. також

Примітки

Рыжков Е. (18 лютого 2010). Семантический HTML код — рекомендация с большими выгодами (кг) . xiper.net. Процитовано 2014-10-12 19:47:14.
Рябоконь С. (18 червня 2013). Вёрстка: переход к семантической разметке — главная цель HTML (рос.). Хабрахабр.
Marsman J. (1 серпня 2011). HTML5 Part 1: Semantic Markup and Page Layout (англ.). MSDN Blogs. Процитовано 2014-10-12 19:36:48.
Amerland, 2013, с. 166.
Dave Raggett's Introduction to HTML. www.w3.org. Процитовано 13 липня 2022.
The Semantic Web. Scientific American (англ.). Процитовано 13 липня 2022.

[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.

[FOOTNOTEAmerland2013166-4] Amerland, 2013, с. 166.

[5] Dave Raggett's Introduction to HTML. www.w3.org. Процитовано 13 липня 2022.

[6] The Semantic Web. Scientific American (англ.). Процитовано 13 липня 2022.