diff --git a/html/semantics/demos/bad-markup/index.html b/html/semantics/demos/bad-markup/index.html
index 006b7bbc8b..278a3058d9 100644
--- a/html/semantics/demos/bad-markup/index.html
+++ b/html/semantics/demos/bad-markup/index.html
@@ -1,7 +1,7 @@
- Плохая вёрстка — Что такое семантика? — Дока
+ Вёрстка на дивах и спанах — Что такое семантика? — Дока
diff --git a/html/semantics/demos/good-markup/index.html b/html/semantics/demos/good-markup/index.html
index e0c0b5c136..0b0cf64e04 100644
--- a/html/semantics/demos/good-markup/index.html
+++ b/html/semantics/demos/good-markup/index.html
@@ -1,7 +1,7 @@
- Правильная вёрстка — Что такое семантика? — Дока
+ Продуманная вёрстка — Что такое семантика? — Дока
diff --git a/html/semantics/images/article-semantic-markup.png b/html/semantics/images/article-semantic-markup.png
new file mode 100644
index 0000000000..78fb0d91b0
Binary files /dev/null and b/html/semantics/images/article-semantic-markup.png differ
diff --git a/html/semantics/images/modern-semantic-markup.png b/html/semantics/images/modern-semantic-markup.png
new file mode 100644
index 0000000000..bc4c0dab96
Binary files /dev/null and b/html/semantics/images/modern-semantic-markup.png differ
diff --git a/html/semantics/index.md b/html/semantics/index.md
index 4e70da5eae..f771a6b531 100644
--- a/html/semantics/index.md
+++ b/html/semantics/index.md
@@ -1,6 +1,6 @@
---
title: "Что такое семантика?"
-description: "Как работает семантическая вёрстка и зачем она вообще нужна."
+description: "Как работает семантика в HTML и зачем она вообще нужна."
authors:
- punkmachine
contributors:
@@ -17,21 +17,32 @@ tags:
## Кратко
-Семантическая вёрстка — особый подход к написанию HTML-разметки страниц. При этом подходе разработчик опирается не на содержание сайта, а на смысловое предназначение каждого блока и логическую структуру страницы.
+Одна из важных особенностей HTML — семантика, которая буквально переводится как «обозначающий». При помощи HTML мы описываем структуру страниц и их содержимого, то есть объясняем браузерам, вспомогательным и другим технологиям и программам _значение элементов_. Это может быть параграф текста, кнопка, часть страницы с основным содержимым или ничего не значащий контейнер.
-## Семантические теги
+На практике семантика HTML-элементов передаётся через их [роли](/a11y/aria-roles/), а ещё [состояния и свойства](/a11y/aria-attrs/). Роли описывают основной смысл элемента, а состояния и свойства добавляют больше деталей: выбран или не выбран чекбокс, активно или неактивно поле в форме и так далее.
-В современном стандарте HTML есть большое количество семантических тегов под разные логические блоки веб-документа. Приведу список семантических тегов, разделяющих HTML-документ на секции:
+