1. Что это и зачем
Заголовок документа во вкладке браузера и в поисковой выдаче.
Каждый тег — это элемент разметки, который сообщает браузеру, какую роль играет его содержимое: заголовок, абзац, ссылка, картинка. Документ строится как дерево таких элементов: одни вкладываются в другие, и браузер по этому дереву строит модель DOM, с которой потом работают CSS и JavaScript.
Проверяйте вёрстку валидатором W3C: правильная вложенность тегов и закрытие обязательных элементов влияют и на доступность, и на SEO.
2. Синтаксис и пример
<title>Как устроен CSS | IT Уроки</title>
Запись выше — базовый вариант использования. Обратите внимание, как тег
: заголовок вкладки вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.</p>
<h2>3. Нюансы и частые варианты</h2>
<p>У большинства тегов есть атрибуты, уточняющие поведение: у ссылки — адрес, у картинки — источник и alt, у поля — имя и тип. Полный список атрибутов конкретного тега смотрите в базовом курсе HTML на этом сайте.</p>
<p>В реальной разметке тег <title>: заголовок вкладки встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.</p>
<h2>4. Как это работает под капотом</h2>
<p>Каждый тег — это элемент разметки, который сообщает браузеру, какую роль играет его содержимое: заголовок, абзац, ссылка, картинка. Документ строится как дерево таких элементов: одни вкладываются в другие, и браузер по этому дереву строит модель DOM, с которой потом работают CSS и JavaScript.</p>
<div class="tip">Проверяйте вёрстку валидатором W3C: правильная вложенность тегов и закрытие обязательных элементов влияют и на доступность, и на SEO.</div>
<div class="note">Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.</div>
<h2>5. Совместимость и поддержка</h2>
<p>Тег поддерживается всеми современными браузерами и не требует префиксов. Старые браузеры игнорируют незнакомые теги, но HTML-парсер при этом не «ломается»: страница просто покажет содержимое без разметки, поэтому безопасно использовать тег и дополнять его CSS-стилями.</p>
<div class="note">Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.</div>
<h2>6. Распространённые ошибки</h2>
<div class="warning">Уникальный и информативный title улучшает SEO-выдачу.</div> <div class="warning">Ленивые фразы «Добро пожаловать» не раскрывают тему страницы.</div>
<h2>7. Практическое задание</h2>
<p>Проверьте title всех страниц своего сайта.</p>
<p>Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.</p>
<div class="demo-box">
<textarea class="demo-code" spellcheck="false" rows="10"><title>Как устроен CSS | IT Уроки</title></textarea>
<div class="demo-toolbar">
<button type="button" class="demo-run">Запустить</button>
</div>
<iframe class="demo-preview" title="Живой пример: Тег <title>: заголовок вкладки"></iframe>
</div>
<h2>8. Как применять в проектах</h2>
<p>В реальном проекте тег встраивается в типовые конструкции страницы: боковые колонки, карточки, формы, меню. Комбинируйте его с семантическими обёртками и следите, чтобы вложенность отражала смысл, а не только форму.</p>
<p>Этот приём работает в связке с остальными: раскладку страниц собирают в уроке <a href="flexbox-grid.html">Flexbox и Grid</a>, цвет и контраст — в <a href="colors-contrast.html">Цвет и контраст</a>, типографику — в <a href="web-typography.html">Веб-типографика</a>.</p>
<h2>9. Чек-лист перед сдачей</h2>
<ul>
<li>тег выбран по смыслу, а не «потому что так свёрстал сосед»;</li>
<li>вложенность корректна: закрывающий тег на месте (если он обязателен);</li>
<li>нужные атрибуты заданы, alt и lang заполнены;</li>
<li>значение тега не дублирует соседний элемент без нужды;</li>
<li>вкладка в DevTools показывает именно ожидаемое дерево DOM;</li>
</ul>
<div class="tip">Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.</div>
<h2>10. Как закрепить</h2>
<p>Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам <a href="{rel1}">{rel1t}</a> и <a href="{rel2}">{rel2t}</a>, а знания подрядчите на странице <a href="tests.html">Тесты HTML и CSS</a>. Если хотите собрать первый настоящий проект — в уроке <a href="landing-practice.html">Практика: лендинг</a> весь процесс разобран по шагам.</p>
<p><a class="btn" href="../index.html#courses">← Вернуться к курсам</a></p>
</main>
</div>
<footer class="footer">
<p>IT Уроки © 2026 · <a href="../index.html">Главная</a> · <a href="../index.html#courses">Все курсы</a></p>
</footer>
<script src="../js/theme.js"></script>
<script src="../js/mobile.js"></script>
<script src="../js/sandbox.js"></script>
<script src="../js/progress.js"></script>
</body>
</html>