Основы HTML для контент-мейкеров

# Основы HTML для контент-мейкеров: от первой картинки до структуры сайта

HTML (HyperText Markup Language) — это не язык программирования, а язык разметки, который сообщает браузеру, как отображать текст, изображения и другие элементы на веб-странице. Для контент-мейкера понимание HTML критически важно, потому что оно позволяет не просто вставлять контент в конструктор, а контролировать его структуру, SEO-оформление и визуальную подачу без лишнего шума. Вы сможете самостоятельно исправлять ошибки верстки, добавлять нужные заголовки для поисковиков, вставлять ссылки и картинки с правильными атрибутами, превращая хаос идей в профессиональную медиа-площадку.

В этой статье мы разберем HTML через понятные аналогии из мира стиля: теги — это как детали гардероба, структура документа — как логика построения образа, а атрибуты — как аксессуары, которые меняют функцию вещи. Вы получите пошаговое руководство, чек-лист и конкретные примеры кода, которые можно сразу применять в работе с сайтами, блогами и соцсетями.

## Что такое HTML и почему контент-мейкеру нужно его знать

HTML — фундамент любого веб-сайта. Если представить сайт как одежду, то HTML определяет, где будет рукав, где воротник и как эти элементы соединены. Без него браузер не поймет, что текст нужно показать крупным заголовком, а картинку разместить рядом с абзацем.

Представьте, что вы собираете сложный многослойный аутфит. У вас есть базовая водолазка, жакет, пальто и шарф. Сами по себе это просто вещи. Но именно то, как вы их расположили — что надето первым слоем, а что верхним — создаёт силуэт и считывается как единый образ. HTML делает то же самое с контентом: он задаёт порядок слоёв и их функции.

### Ключевые отличия HTML от языков программирования

Часто новички путают HTML с языками программирования вроде Python или JavaScript. Это совершенно разные инструменты, как разница между эскизом наряда и швейной машинкой. Эскиз (HTML) описывает, где будет шов или складка. Машинка (язык программирования) выполняет само действие — прошивает ткань, делает петлю для пуговицы. Важно понимать эту границу, чтобы не ждать от HTML того, чего он не умеет «думать» или «решать задачи». Он просто описывает, что должно быть на странице.

### Зачем это нужно именно вам?

Как контент-мейкер, вы сталкиваетесь с ситуациями, где стандартные инструменты конструкторов (Tilda, WordPress, Wix) не дают нужной гибкости. Готовый шаблон всегда компромисс, а вам нужна посадка по фигуре.

1. **SEO-оптимизация:** Поисковики (Google, Яндекс) читают структуру заголовков (`h1`, `h2`, `h3`). Если вы не знаете, как правильно их вставить, сайт может не попасть в топ. Это как прийти на важную встречу без опознавательных знаков — никто не поймёт, кто вы и о чём говорите.
2. **Визуальная точность:** Конструкторы иногда «съедают» отступы или неправильно показывают картинки. HTML позволяет вручную настроить `alt` (альтернативный текст) для изображений, что важно для доступности и SEO. По сути, вы добавляете подпись на этикетке — чтобы даже если «ткань» не прогрузилась, смысл не потерялся.
3. **Кастомизация:** Вы можете добавить уникальные элементы (например, горизонтальную линию `hr` или перенос строки `br`), которые не доступны в стандартном интерфейсе. Это как возможность вшить скрытый карман или изменить форму лацкана — вещь сразу обретает характер.
4. **Работа с CMS:** В WordPress или других системах часто нужно вставлять код вручную (например, в блоки «HTML-код»). Без знания основ вы не сможете это сделать. Вы оказываетесь заперты в рамках визуального редактора, который, как неопытный стилист, может предложить только базовые сочетания.

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

## Структура HTML-документа: базовый шаблон

Каждый HTML-файл должен иметь строгую структуру. Это как основа гардероба: если вы не знаете, что должно быть в «базе», вы не сможете создать сложный образ. Нельзя построить капсулу, не имея понятия о сочетаемости фактур и назначении вещей. Так и здесь: базовый шаблон — это ваш белый холст, с которого начинается каждая страница в интернете.

### Минимальный шаблон страницы

Вот код, который создает пустую, но рабочую веб-страницу:

Разберем каждую часть по порядку, чтобы понимать не просто «как», а «зачем»:

1. **«** — объявление стандарта. Это как маркировка на одежде: «состав 100% хлопок, стандарт 2026». Браузер видит это и понимает, что нужно использовать современный стандарт HTML5, а не пытаться угадывать по косвенным признакам, как в старые времена.
2. **« и «** — основной тег, внутри которого находится всё содержимое страницы. Всё, что за пределами этих тегов, браузер проигнорирует. Это сама ткань вашего будущего «изделия».
3. **« и «** — «шапка» документа. Здесь находится информация, которую пользователь **не видит** на странице, но браузер использует для работы: название сайта, подключение стилей (CSS), скрипты (JS). Это внутренние швы и подкладка, которые не видны снаружи, но без них костюм развалится.
4. **``** — название страницы, которое отображается в заголовке браузера и в результатах поиска. Это ваш «бренд» для поисковика. Аналог — именная бирка, по которой вещь идентифицируют в каталоге.<br /> 5. **« и «** — «тело» документа. Здесь находится весь контент, который видит пользователь: текст, картинки, ссылки, заголовки. Это лицо вашего аутфита, та часть, которую видят и оценивают все окружающие.</p> <p>### Как создать и открыть файл</p> <p>Никакой магии. Это базовая механика, которую стоит попробовать руками хотя бы раз.</p> <p>1. Создайте текстовый файл в любом редакторе (Notepad, VS Code, Sublime Text).<br /> 2. Вставьте код выше.<br /> 3. Сохраните файл с именем `index.html` (обязательно расширение `.html`).<br /> 4. Откройте файл в браузере (Chrome, Safari, Firefox). Вы увидите заголовок и текст.</p> <p>> **Важно:** Если вы сохраните файл как `index.txt`, браузер не распознает его как HTML и покажет просто текст кода. Это всё равно что пришить пуговицы к выкройке и удивляться, почему она не держится на теле.</p> <p>## Теги: основные элементы разметки</p> <p>Теги — это команды для браузера. Они заключены в угловые скобки: «. Большинство тегов работают в паре: открывающий « и закрывающий `</тег>`. Между ними находится содержимое. Каждый тег можно представить как отдельный предмет одежды: у каждого своя роль и своя фактура. Футболка — не пиджак, абзац — не заголовок.</p> <p>### Заголовки: от H1 до H6</p> <p>Заголовки структурируют текст. Они нужны не только для красоты, но и для SEO. Поисковики используют их, чтобы понять, какая тема главная, а какая второстепенная. Это иерархия, и нарушать её — всё равно что надеть вечернее платье под спортивную куртку и надеяться, что это будет выглядеть осознанной эклектикой.</p> <p>| Тег | Уровень | Описание | Пример использования |<br /> |——|——-|———-|———————-|<br /> | `</p> <h1>` | 1 | Главный заголовок страницы. Только один на странице. | Название статьи: «Основы HTML для контент-мейкеров» |<br /> | `</p> <h2>` | 2 | Подзаголовок раздела. | «Что такое HTML и почему его нужно знать» |<br /> | `</p> <h3>` | 3 | Подзаголовок внутри раздела. | «Ключевые отличия HTML от языков программирования» |<br /> | `</p> <h4>`–`</p> <h6>` | 4–6 | Дополнительные уровни. | Внутренние подразделы, редко используются в блогах |</p> <p>**Правило:** Не используйте `</p> <h1>` для всего подряд. Один `</p> <h1>` — это как один главный акцент в образе. Если вы сделаете три `</p> <h1>`, это будет выглядеть как «перебор» и запутает поисковик. Робот просто не поймёт, о чём на самом деле страница, и понизит её в выдаче.</p> <p>### Абзацы и текст: `</p> <p>`, `<strong>`, `<em>`</p> <p>Текст на сайте не должен быть сплошной «кашей». Его нужно разбивать на абзацы, чтобы задать ритм чтения. Хороший текст дышит за счёт пустого пространства между блоками — это как паузы в разговоре.</p> <p>— **`</p> <p>`** — тег абзаца. Весь текст внутри `</p> <p>` и `</p> <p>` будет отображаться как отдельный блок с отступами сверху и снизу.<br /> — **`<strong>`** — делает текст **жирным**. Это не просто стиль, это семантический сигнал: «это важно». Для SEO это весомее, чем просто жирный шрифт через CSS.<br /> — **`<em>`** — делает текст *курсивным*. Это сигнал: «здесь логическое ударение». Браузеры и скринридеры считывают его иначе, чем просто декоративный курсив.</p> <p>### Списки: `</p> <ul>`, `</p> <ol>`, `</p> <li>` <p>Списки — лучший способ структурировать информацию. Они легко сканируются глазами и хорошо читаются поисковиками. Визуально это как правильно подобранные аксессуары: они группируют образ, делают его понятным.</p> <p>— **`</p> <ul>`** — неупорядоченный список (с маркерами, например, точками). Перечисление, где порядок не важен.<br /> — **`</p> <ol>`** — упорядоченный список (с номерами 1, 2, 3). Пошаговая инструкция или рейтинг.<br /> — **`</p> <li>`** — элемент списка (каждая точка или номер). <p>> **Типовая ошибка:** Не пишите текст списка прямо в `</p> <ul>`. Каждый пункт должен быть внутри `</p> <li>`. Если вы пропустите ` <li>`, браузер не поймет, где заканчивается один пункт и начинается другой. Это как нанизывать бусины без узлов — всё смешается в одну кучу. <p>### Ссылки: `<a>` и атрибут `href`</p> <p>Ссылки — это основа интернета. Без них сайт не может быть частью сети, он остаётся изолированной заметкой.</p> <p>— **`<a>`** — тег ссылки. Якорь, который связывает ваш контент с любым другим.<br /> — **`href`** — атрибут, который указывает, куда ведет ссылка (URL). Без него тег `<a>` функционально бесполезен, как пуговица без петли.</p> <p>**Важные нюансы:**<br /> — Если ссылка ведет на внешний сайт, добавьте `target=»_blank»`, чтобы она открывалась в новой вкладке. Это правило хорошего тона: вы не уводите читателя со своей страницы окончательно, а лишь приглашаете посмотреть в соседнее окно.</p> <p>— Для SEO полезно добавлять атрибут `title` (описание ссылки), который всплывает при наведении, но это не всегда критично. Работает как дополнительная подсказка к образу.</p> <p>### Изображения: `<img>` и атрибуты `src`, `alt`</p> <p>Картинки — это визуальный контент, который вы создаете. Но чтобы браузер их показал, нужно правильно их вставить. Изображение без атрибутов — как платье без намёка на размер и состав.</p> <p>— **`<img>`** — самозакрывающийся тег (не требует `</img>`). Он просто встаёт на своё место в сетке документа.<br /> — **`src`** — путь к изображению (URL или путь к файлу). Обязательный параметр, без него браузер не знает, что показывать.<br /> — **`alt`** — альтернативный текст. Если картинка не загрузится, браузер покажет этот текст. Для SEO это критически важно: поисковики «читают» `alt`, а не картинку. Это ваш шанс объяснить роботу, что изображено на фото.</p> <p>> **Типовая ошибка:** Не оставлять `alt` пустым. Если `alt=»»`, поисковик считает картинку декоративной или просто пропускает. Содержательное описание прямо влияет на видимость в поиске по картинкам.</p> <p>### Перенос строки и горизонтальная линия: `<br />`, `</p> <hr> <p>`</p> <p>Иногда нужно разделить контент, не создавая новый смысловой блок. Это как закрепить складку на ткани или добавить пояс, чтобы разбить силуэт.</p> <p>— **`<br />`** — перенос строки (без создания нового абзаца). Самозакрывающийся тег. Используйте его внутри стихотворений или адресов, где отступ абзаца будет лишним.<br /> — **`</p> <hr> <p>`** — горизонтальная линия. Разделяет смысловые блоки. Самозакрывающийся тег. Удобен как визуальный якорь для переключения между темами.</p> <p>## Атрибуты: как настроить тег под задачу</p> <p>Атрибуты — это дополнительные параметры тега, которые меняют его поведение. Они пишутся в открывающем теге после имени тега. Если теги — это предметы гардероба, то атрибуты — это их свойства: цвет, размер, фасон. Они уточняют, как именно предмет должен работать в конкретной ситуации.</p> <p>### Как работает атрибут</p> <p>Пример:</p> <p>— `href` — имя атрибута (куда идти).<br /> — `https://google.com` — значение атрибута (по какому адресу).</p> <p>### Основные атрибуты для контент-мейкеров</p> <p>Вот набор, который закрывает 90% задач при работе с контентом. Выучив их, вы сможете управлять сайтом намного увереннее, чем через кнопки визуального редактора.</p> <p>| Атрибут | Тег | Описание | Пример |<br /> |———|——|———-|———|<br /> | `href` | `<a>` | URL ссылки | `<a href="https://site.com">` |<br /> | `src` | `<img>` | Путь к изображению | `<img decoding="async" src="photo.jpg">` |<br /> | `alt` | `<img>` | Альтернативный текст | `<img alt="Описание картинки">` |<br /> | `target` | `<a>` | Куда открывать ссылку | `<a target="_blank">` |<br /> | `class` | любой | Класс для CSS (стилизация) | `</p> <div class="header">` |<br /> | `id` | любой | Уникальный идентификатор | `</p> <h1 id="main-title">` |</p> <p>> **Важно:** Значения атрибутов всегда пишутся в кавычках (обычно двойных `»`). Если не указать кавычки, браузер может ошибиться, особенно если в значении есть пробелы или специальные символы. Относитесь к кавычкам как к обязательной фурнитуре.</p> <p>## Семантическая верстка: смысловые блоки</p> <p>Семантика — это когда вы используете теги не просто для внешнего вида, а для обозначения смысла. Это как выбирать одежду по функции: пиджак для работы, шорты для пляжа. До появления семантических тегов всё лепили из безликих `</p> <div>`, что превращало код в кашу. Сейчас у нас есть понятные «лекала» для каждой части сайта.</p> <p>### Основные семантические теги</p> <p>| Тег | Смысл | Описание |<br /> |——|——-|———-|<br /> | `</p> <header>` | Шапка | Верхняя часть страницы (логотип, меню). Обычно одинакова на всех страницах. |<br /> | `<main>` | Основной контент | Главная часть страницы, уникальная для каждой. Поисковик ищет глазами именно этот блок. |<br /> | `</p> <footer>` | Подвал | Нижняя часть (контакты, копирайт). Традиционное место для технической информации. |<br /> | `</p> <section>` | Секция | Смысловой раздел (например, «О нас», «Продукты»). Группирует контент по теме. |<br /> | `</p> <article>` | Статья | Отдельный, самодостаточный контент (статья, пост). То, что можно вырвать со страницы и читать отдельно. |<br /> | `</p> <nav>` | Навигация | Блок с основными ссылками по сайту. Поисковики понимают, что это меню, а не просто список. |</p> <p>### Пример семантической структуры</p> <p>> **Почему это важно:** Поисковики (Google, Яндекс) лучше понимают структуру сайта, если вы используете семантические теги. Это напрямую повышает рейтинг страницы, потому что робот видит логически выстроенный документ, а не серую массу текста.</p> <p>## Таблицы: как структурировать данные</p> <p>Таблицы нужны, когда нужно показать данные в виде сетки (например, сравнение цен, характеристики товаров). Долгое время их неоправданно использовали для верстки целых страниц (создавая невидимые сетки), но это моветон. Сегодня таблица — это именно про данные, у которых есть строки и столбцы. Как таблица размеров в каталоге: всё чётко и по ячейкам.</p> <p>### Структура таблицы</p> <p>— **`</p> <table>`** — основной тег таблицы. Контейнер для всего.<br /> — **`</p> <tr>`** — ряд таблицы (table row). Одна горизонтальная линия.<br /> — **`</p> <td>`** — ячейка таблицы (table data). Рядовая ячейка с данными.<br /> — **`</p> <th>`** — ячейка заголовка (table header). Обычно выделяется жирным и задаёт смысловой контекст для столбца или строки.</p> <p>> **Типовая ошибка:** Не использовать `</p> <th>` для заголовков. Если вы напишете `</p> <td>` вместо `</p> <th>`, заголовки не будут выделены жирным визуально, и поисковик не поймёт, что это заголовки. Для робота это просто безликая ячейка в ряду.</p> <p>## Практика: как вставить HTML в конструкторы и CMS</p> <p>Как контент-мейкер, вы часто работаете с конструкторами (Tilda, Wix) и CMS (WordPress). Вот как использовать HTML в них. Общий принцип: вы ищете специальный блок для «сырого» кода и вставляете туда только ту часть, которая касается содержимого.</p> <p>### WordPress</p> <p>1. В редакторе статьи (Гутенберг) выберите блок **«Пользовательский HTML»**.<br /> 2. Вставьте свой код. Например, таблицу или список с особой стилизацией.</p> <p>3. Нажмите «Предпросмотр» или «Обновить».</p> <p>> **Важно:** В WordPress не нужно писать «, «, «, «. Система сама обернёт ваш код в нужную структуру. Вы вставляете только то, что должно быть внутри «. Иначе получится страница внутри страницы, и вёрстка сломается.</p> <p>### Tilda</p> <p>1. Добавьте блок **«HTML-код»** (он находится в категории «Другое» библиотеки блоков).<br /> 2. Вставьте код в появившееся поле.<br /> 3. Контент автоматически отобразится. Tilda достаточно аккуратно обрабатывает пользовательский код, но сложные скрипты могут блокироваться.</p> <p>### Wix</p> <p>1. Нажмите на «Добавить» (+) и выберите **«Встроенный код»**, затем «Вставить HTML».<br /> 2. Вставьте ваш HTML.<br /> 3. Wix покажет результат в изолированном контейнере.</p> <p>> **Ограничение:** В некоторых конструкторах нельзя использовать « (JavaScript) или « (CSS) напрямую — это блокируется политиками безопасности платформы. Для стилей обычно предусмотрены отдельные настройки.</p> <p>## Чек-лист: проверка HTML-кода перед публикацией</p> <p>Перед тем как опубликовать статью, проверьте код по этому списку. Он как финальный осмотр образа перед выходом: всё ли на месте, не завернулся ли воротник, нет ли торчащих ниток.</p> <p>— [ ] Есть « в начале (если верстаете отдельную страницу, а не блок внутри CMS).<br /> — [ ] Все открывающие теги имеют закрывающие (кроме самозакрывающихся: `img`, `br`, `hr`).<br /> — [ ] Заголовки идут по порядку: `h1` → `h2` → `h3`. Не пропускайте уровни, это нарушает семантику.<br /> — [ ] У всех картинок есть атрибут `alt` с осмысленным описанием.<br /> — [ ] Ссылки имеют атрибут `href` с корректным адресом.<br /> — [ ] Использованы семантические теги (`header`, `main`, `footer`, `article`) там, где это оправдано.<br /> — [ ] Нет лишних отступов или пустых абзацев `</p> <p>`, оставленных визуальным редактором.<br /> — [ ] Код не содержит ошибок. Самый быстрый тест: открыть файл в браузере. Если что-то не отображается или выглядит не так, как вы ожидали — ошибка в синтаксисе.</p> <p>## Типовые ошибки и как их избежать</p> <p>Даже опытные верстальщики иногда пропускают закрывающую скобку. Вот несколько частых ситуаций, с которыми сталкиваются новички. Это те самые «пятна», которые портят идеально собранный образ.</p> <p>### Ошибка 1: Забыли закрывающий тег</p> <p>**Результат:** Весь последующий текст может отобразиться внутри этого абзаца, отступы исчезнут, контент «склеится».</p> <p>**Как исправить:** Всегда дописывайте `</p> <p>` парно. Многие редакторы кода подсвечивают такие ошибки.</p> <p>### Ошибка 2: Неправильный порядок заголовков</p> <p>**Результат:** Поисковик запутается в структуре и решит, что страница нелогична. Это как надеть ремень поверх галстука.</p> <p>**Как исправить:** Используйте `h2` после `h1`. Соблюдайте иерархию: нельзя ставить `h3`, если перед ним не было `h2`.</p> <p>### Ошибка 3: Пустой `alt` у картинки</p> <p>**Результат:** Поисковик не поймет, что на картинке. SEO-рейтинг страницы снизится, а скринридер для слабовидящих проигнорирует изображение.</p> <p>**Как исправить:** Всегда описывайте изображение: `alt=»Контент-мейкер работает с HTML»`. Будьте конкретны.</p> <p>### Ошибка 4: Ссылка без `href`</p> <p>**Результат:** Ссылка не работает. Выглядит кликабельно, но никуда не ведёт. Пользовательский опыт испорчен.</p> <p>**Как исправить:** Добавьте `href=»https://example.com»`. Без него тег `<a>` — это просто текст другого цвета.</p> <p>## FAQ: частые вопросы по HTML для контент-мейкеров</p> <p>### 1. Нужно ли мне знать CSS, чтобы работать с HTML?</p> <p>Не обязательно. HTML создает структуру, CSS — внешний вид. Это как разница между созданием выкройки (HTML) и выбором ткани с принтом (CSS). Но для контент-мейкера полезно знать базовые понятия, такие как классы (`class=»header»`), чтобы понимать, как конструктор применяет стили, и при необходимости точечно их переопределять.</p> <p>### 2. Можно ли использовать HTML в соцсетях (Instagram, Telegram)?</p> <p>В большинстве соцсетей HTML не поддерживается из соображений безопасности и единообразия. Но в Telegram-каналах можно использовать базовый HTML для форматирования постов (например, `<b>`, `<i>`, `<a>`). В Instagram — только через ссылки в описании профиля. Stories и посты живут по своим законам разметки.</p> <p>### 3. Что делать, если код не отображается в браузере?</p> <p>Проверьте по порядку:<br /> — Расширение файла: должно быть `.html`, а не `.txt` или `.doc`.<br /> — Закрывающие теги: все ли закрыты в нужном порядке?<br /> — Кавычки: все ли значения атрибутов взяты в кавычки?<br /> — Браузер: очистите кеш или попробуйте открыть в другом браузере. Иногда Chrome агрессивно кеширует старую версию.</p> <p>### 4. Как проверить, что HTML работает правильно?</p> <p>Используйте бесплатный инструмент **HTML Validator** (например, на сайте [validator.w3.org](https://validator.w3.org/)). Это официальный сервис консорциума W3C. Он покажет ошибки и подскажет, как их исправить, как строгий, но справедливый технический редактор.</p> <p>### 5. Нужен ли HTML для работы с WordPress?</p> <p>Да. В WordPress часто нужно вставлять HTML в блоки «HTML-код», особенно для сложных элементов: адаптивных таблиц, кастомных списков, ссылок с атрибутами или вставки видео с нестандартными параметрами. Без этого вы ограничены только тем, что предлагает визуальный конструктор блоков.</p> <p>## Вывод: HTML как инструмент стиля</p> <p>HTML — это не просто набор тегов. Это способ говорить с браузером на одном языке, чтобы ваш контент выглядел так, как вы хотите. Как в мире стиля, где каждый элемент гардероба имеет свою функцию, в HTML каждый тег отвечает за структуру и смысл. Белый верх, тёмный низ — это не просто цвета, а правило, которое собирает силуэт. Заголовок, абзац, список — не просто шрифты разного размера, а скелет, на котором держится внимание читателя.</p> <p>Вы уже знаете:<br /> — Как создать базовый шаблон страницы.<br /> — Как использовать заголовки, абзацы, списки, ссылки и картинки.<br /> — Как настроить теги через атрибуты.<br /> — Как избежать типовых ошибок.</p> <p>Следующий шаг — изучить CSS, чтобы управлять внешним видом. Но без HTML он не будет работать. Начните с малого: вставьте один заголовок, одну ссылку, одну картинку. Проверьте, как это работает. Почувствуйте материал. И постепенно вы превратите хаос идей в профессиональную медиа-площадку, где контент обретает чёткую, продуманную форму.</p> <p>> **Совет:** Сохраните этот чек-лист и пример кода. Они будут вашим «базовым гардеробом» для любой работы с HTML — той самой капсулой, из которой всегда можно собрать рабочий образ.</p> </article> </div> <footer class="entry-footer"> <span>Автор: Анна Вереск</span> </footer> </article> <aside class="sidebar" aria-label="Боковая колонка"> <section id="recent-posts-2" class="widget widget_recent_entries"> <h2 class="widget-title">Последние записи</h2> <ul> <li><a href="https://nozhi-slon.ru/library/sistemnoe-obuchenie-veb-razrabotke-ot-upravleniya-kontentom-k-akademicheskomu-kodu/">Системное обучение веб-разработке: от управления контентом к академическому коду</a><span class="post-date">8 июня 2026</span></li> <li><a href="https://nozhi-slon.ru/library/professionalnyy-kontent-ot-issledovaniya-do-publikacii/">Профессиональный контент: от исследования до публикации</a><span class="post-date">4 июня 2026</span></li> <li><a href="https://nozhi-slon.ru/library/kastomizaciya-temy-wordpress-rukovodstvo/">Кастомизация темы WordPress: руководство</a><span class="post-date">3 июня 2026</span></li> <li><a href="https://nozhi-slon.ru/library/metodologiya-sozdaniya-kontenta-dlya-redakciy/">Методология создания контента для редакций</a><span class="post-date">3 июня 2026</span></li> <li><a href="https://nozhi-slon.ru/library/joomla-obzor-vozmozhnostey-dlya-media/">Joomla: обзор возможностей для медиа</a><span class="post-date">2 июня 2026</span></li> </ul> </section> </aside> </div> </div> </main> <footer class="site-foot"> <div class="shell"> <div class="foot-cols"> <div class="foot-col"> <section id="text-2" class="widget widget_text"><h2 class="widget-title">О проекте</h2> <div class="textwidget"><p>Образовательная площадка о том, как собирать сайты на WordPress и делать визуально выверенный контент. Каждая статья — короткое руководство или разбор инструмента, без воды и витиеватых преамбул.</p> </div> </section> </div> <div class="foot-col"> <section id="nav_menu-4" class="widget widget_nav_menu"><h2 class="widget-title">Полезные ссылки</h2><div class="menu-%d0%b3%d0%bb%d0%b0%d0%b2%d0%bd%d0%be%d0%b5-footer-container"><ul id="menu-%d0%b3%d0%bb%d0%b0%d0%b2%d0%bd%d0%be%d0%b5-footer" class="menu"><li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="https://nozhi-slon.ru/html-site-map/">Карта сайта</a></li> <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="https://nozhi-slon.ru/privacy-policy/">Политика конфиденциальности</a></li> <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="https://nozhi-slon.ru/license-agreement/">Лицензионное соглашение</a></li> </ul></div></section> </div> <div class="foot-col"> <section id="text-3" class="widget widget_text"><h2 class="widget-title">Письма Анны</h2> <div class="textwidget"><p>Раз в неделю отправляю короткое письмо: что нового в редакции, какие материалы вышли и над чем я сейчас работаю. Подписка через email — пишите на hello@nozhi-slon.ru.</p> </div> </section> </div> </div> <nav class="emoji-row" aria-label="Быстрые ссылки"> <a class="emoji-link" href="https://nozhi-slon.ru/blog/"> <span class="emoji-link__emoji">📖</span> <span class="emoji-link__label">дневник</span> </a> <a class="emoji-link" href="https://nozhi-slon.ru/blog/"> <span class="emoji-link__emoji">🧰</span> <span class="emoji-link__label">инструменты</span> </a> <a class="emoji-link" href="https://nozhi-slon.ru/blog/"> <span class="emoji-link__emoji">🎓</span> <span class="emoji-link__label">курсы</span> </a> <a class="emoji-link" href="mailto:hello@nozhi-slon.ru"> <span class="emoji-link__emoji">✉️</span> <span class="emoji-link__label">письмо</span> </a> </nav> <div class="foot-bottom"> 2026. Все права защищены. nozhi-slon.ru </div> </div> </footer> <div id="cookie-banner" class="cookie-banner" hidden> <span class="cookie-banner__text"> Мы используем cookie, чтобы сайт работал привычно и удобно. Продолжая просмотр, вы соглашаетесь с этим. <a href="https://nozhi-slon.ru/privacy-policy/">Подробнее</a> </span> <button type="button" class="cookie-banner__btn" id="cookie-accept">Принять</button> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/dds_nozhi-slon.ru/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script id="ns-navigation-js" src="https://nozhi-slon.ru/wp-content/themes/dds_nozhi-slon.ru/js/navigation.js?ver=1.1"></script> <script id="ns-main-js" src="https://nozhi-slon.ru/wp-content/themes/dds_nozhi-slon.ru/js/main.js?ver=1.1"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://nozhi-slon.ru/wp-includes/js/wp-emoji-release.min.js?ver=7.1"}} </script> <script type="module"> /*! This file is auto-generated */ var e="script#wp-emoji-settings",t=document.querySelector(e);if(!(t instanceof HTMLScriptElement))throw new Error("Element missing: "+e);const r=JSON.parse(t.text),s=(window._wpemojiSettings=r,"wpEmojiSettingsSupports"),o=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(s,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const r=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===r[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,r){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!r(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,r){let a;const s=(a="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),o=(s.textBaseline="top",s.font="600 32px Arial",{});return e.forEach(e=>{o[e]=t(s,e,n,r)}),o}function a(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}r.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(s));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(o),u.toString(),c.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"});const a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=e=>{i(n=e.data),a.terminate(),t(n)})}catch(e){}i(n=f(o,u,c,p))}t(n)}).then(e=>{for(const n in e)r.supports[n]=e[n],r.supports.everything=r.supports.everything&&r.supports[n],"flag"!==n&&(r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&r.supports[n]);var t;r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&!r.supports.flag,r.supports.everything||((t=r.source||{}).concatemoji?a(t.concatemoji):t.wpemoji&&t.twemoji&&(a(t.twemoji),a(t.wpemoji)))}); //# sourceURL=https://nozhi-slon.ru/wp-includes/js/wp-emoji-loader.min.js </script> </body> </html>