path: root/files/ru/web/html/index.html

---
title: HTML
slug: Web/HTML
tags:
  - HTML
  - HTML5
  - Landing
  - Web
  - Веб
  - Главная
  - Справка
  - гипертекст
  - лендинг
translation_of: Web/HTML
---
<div>{{HTMLSidebar}}</div>

<p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language — «язык гипертекстовой разметки») — самый базовый строительный блок {{glossary("World Wide Web", "Веба")}}. Он определяет содержание и структуру веб-контента. Другие технологии, помимо HTML, обычно используются для описания внешнего вида/представления (<a href="/ru/docs/Web/CSS">CSS</a>) или функциональности/поведения (<a href="/ru/docs/Web/JavaScript">JavaScript</a>) веб-страницы.</span></p>

<p>Под гипертекстом ("hypertext") понимаются ссылки, которые соединяют веб-страницы друг с другом либо в пределах одного веб-сайта, либо между веб-сайтами. Ссылки являются фундаментальным аспектом Веба. Загружая контент в Интернет и связывая его со страницами, созданными другими людьми, вы становитесь активным участником Всемирной паутины.</p>

<p>HTML использует разметку ("markup") для отображения текста, изображений и другого контента в веб-браузере. HTML-разметка включает в себя специальные "элементы", такие как {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}} и многие другие.</p>

<p>HTML-элемент выделяется из прочего текста в документе с помощью "{{glossary("tag", "тегов")}}", которые состоят из имени элемента окружённого "<code>&lt;</code>" и "<code>&gt;</code>". Имя элемента внутри тега не чувствительно к регистру. То есть, оно может быть написано в верхнем или нижнем регистре, или смешано. Например, тег <code>&lt;title&gt;</code> может быть записан как <code>&lt;Title&gt;</code>, <code>&lt;TITLE&gt;</code>, или любым другим способом.</p>

<p>Статьи, представленные ниже, могут помочь вам больше узнать о HTML.</p>

<section class="cleared" id="sect1">
<ul class="card-grid">
 <li><span>Введение в HTML</span>

  <p>Если вы новичок в веб-разработке, обязательно прочитайте нашу статью <a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">"Основы HTML"</a>, чтобы узнать, что такое HTML и как его использовать.</p>
 </li>
 <li><span>Руководства по HTML</span>
  <p>Статьи о том, как использовать HTML, а также обучающие материалы и исчерпывающие примеры можно найти в разделе "<a href="/ru/docs/Learn/HTML">Пространство изучения HTML</a>".</p>
 </li>
 <li><span>Справка по HTML</span>
  <p>В нашем обширном разделе "<a href="/ru/docs/Web/HTML/Ссылки">Справка по HTML</a>" вы найдёте подробности о каждом элементе и атрибуте в HTML.</p>
 </li>
</ul>

<div class="row topicpage-table">
<div class="section">
<h2 class="Tools" id="Руководства_для_начинающих">Руководства для начинающих</h2>

<p>Наше <a href="/ru/docs/Learn/HTML">Пространство изучения HTML</a> содержит множество модулей, которые обучают HTML с нуля — начальные знания не требуются.</p>

<dl>
 <dt><a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a></dt>
 <dd>Этот модуль закладывает основу, знакомя вас с важными понятиями и синтаксисом, такими как применение HTML к тексту, создание гиперссылок и использование HTML для построения веб-страницы.</dd>
 <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding">Мультимедиа и встраивание</a></dt>
 <dd>В этом модуле рассматривается, как использовать HTML для добавления мультимедиа на ваши веб-страницы, включая различные способы вставки изображений, а также для встраивания видео, аудио, и даже других веб-страниц целиком.</dd>
 <dt><a href="/ru/docs/Learn/HTML/Tables">HTML-таблицы</a></dt>
 <dd>Представление табличных данных на веб-странице в понятной, доступной форме может быть проблемой. Этот модуль охватывает базовую разметку таблиц, а также более сложные особенности, такие как добавление заголовков и описаний.</dd>
 <dt><a href="/ru/docs/Learn/HTML/Forms">HTML-формы</a></dt>
 <dd>Формы являются очень важной частью Веба — они предоставляют большую часть функциональности, необходимого для взаимодействия с веб-сайтами, например регистрация и вход в систему, отправка отзывов, покупка товаров, и многое другое. Этот модуль познакомит вас с созданием клиентских (client-side/front-end) частей форм.</dd>
 <dt><a href="/ru/docs/Learn/HTML/Рецепты">Используйте HTML для решения распространённых задач.</a></dt>
 <dd>Содержит ссылки на разделы, объясняющие как использовать HTML для решения самых распространённых задач при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение контента, создание простой формы и т.д.</dd>
</dl>

<h2 id="Продвинутые_темы">Продвинутые темы</h2>

<dl>
 <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS: включённые изображения</a></dt>
 <dd class="landingPageList">Атрибут {{htmlattrxref("crossorigin", "img")}} в сочетании с соответствующим заголовком {{glossary("CORS")}}, позволяет загружать изображения, определённые элементом {{HTMLElement("img")}}, из внешних источников и использовать в элементе {{HTMLElement("canvas")}}, как если бы они были загружены из текущего источника.</dd>
 <dt class="landingPageList"><a href="/ru/docs/Web/HTML/CORS_settings_attributes">CORS: Настройки атрибутов</a></dt>
 <dd class="landingPageList">Некоторые HTML-элементы, предоставляющие поддержку <a href="/ru/docs/Web/HTTP/CORS">CORS</a>, такие как {{HTMLElement("img")}} или {{HTMLElement("video")}}, имеют атрибут <code>crossorigin</code> (свойство <code>crossOrigin</code>), который позволяет вам настраивать CORS-запросы для получаемых элементом данных.</dd>
 <dt class="landingPageList"><a href="/ru/docs/Web/API/Document/hasFocus">Управление фокусом в HTML</a></dt>
 <dd class="landingPageList">DOM-Атрибут <code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> и DOM-метод <code><a href="/ru/docs/Web/API/Document/hasFocus">hasFocus()</a></code> помогают отслеживать и контролировать взаимодействие пользователя с элементами на веб-странице.</dd>
 <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Preloading_content">Предварительная загрузка контента с помощью rel="preload"</a></dt>
 <dd class="landingPageList">Значение <code>preload</code> атрибута {{htmlattrxref("rel", "link")}} элемента {{htmlelement("link")}} позволяет писать декларативные <a href="/ru/docs/Web/API/Fetch_API/Using_Fetch">fetch-запросы</a> в HTML {{htmlelement("head")}}, указывая ресурсы, которые потребуются вашим страницам сразу после загрузки и, следовательно, которые вы хотите начать предварительно загружать на раннем этапе жизненного цикла страницы, прежде чем браузером запустится основной механизм рендеринга (отрисовки). Это гарантирует, что они станут доступными раньше и с меньшей вероятностью заблокируют первый рендеринг страницы, что приведёт к улучшению производительности. В этой статье приведено начальное руководство по работе с <code>preload</code> (предзагрузкой).</dd>
</dl>
</div>

<div class="section">
<h2 class="Documentation" id="Справочники">Справочники</h2>

<dl>
 <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Ссылки">Справка по HTML</a></dt>
 <dd class="landingPageList">HTML состоит из <strong>элементов</strong>, каждый из которых может быть изменён некоторым количеством <strong>атрибутов</strong>. HTML-документы связаны между собой <a href="/ru/docs/Web/HTML/Типы_ссылок">ссылками</a>.</dd>
 <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Element">Справка по HTML-элементам</a></dt>
 <dd class="landingPageList">Просмотр списка всех {{glossary("Element", "элементов")}} {{glossary("HTML")}}.</dd>
 <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Attributes">Справка по HTML-атрибутам</a></dt>
 <dd class="landingPageList">У элементов в HTML есть <strong>атрибуты</strong>. Это дополнительные величины, которые настраивают элементы или управляют их поведением различными способами.</dd>
 <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Общие_атрибуты">Глобальные атрибуты</a></dt>
 <dd class="landingPageList">Глобальные атрибуты могут быть указаны для всех <a href="/ru/docs/Web/HTML/Element">элементов HTML</a>, <em>даже тех, которые не указаны в стандарте</em>. Это означает, что любые нестандартные элементы обязаны по-прежнему разрешать эти атрибуты, даже если эти элементы делают документ несовместимым с {{glossary("HTML5")}}.</dd>
 <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Строчные_Элементы">Строчные</a> и <a href="/ru/docs/Web/HTML/Block-level_elements">блочные</a> элементы</dt>
 <dd class="landingPageList">Элементы HTML являются обычно "строчными" или "блочными". Строчный элемент занимает только пространство, ограниченное тегами, которые его определяют. Блочный элемент занимает все пространство своего родительского элемента (контейнера), тем самым создавая "блок".</dd>
 <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Типы_ссылок">Типы ссылок</a></dt>
 <dd class="landingPageList">В HTML различные типы ссылок могут использоваться для установления и определения связи между двумя документами. Элементы-ссылки, типы которых могут быть заданы, включают в себя {{HTMLElement("a")}}, {{HTMLElement("area")}} и {{HTMLElement("link")}}.</dd>
 <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы">Поддержка медиа-форматов с помощью HTML-элементов audio и video</a></dt>
 <dd class="landingPageList">Элементы {{HTMLElement("audio")}} и {{HTMLElement("video")}} позволяют вам воспроизводить аудио и видео. Эти элементы предоставляют браузерную альтернативу аналогичным возможностям, которые есть в Adobe Flash и других плагинах.</dd>
 <dt class="landingPageList"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Виды HTML-контента</a></dt>
 <dd class="landingPageList">HTML состоит из нескольких видов контента, каждый из которых разрешено использовать в определённых контекстах и запрещено в других. Так же, у каждого есть набор других категорий контента, которые они могут содержать, и элементы, которые могут или не могут использоваться в них. Это руководство по таким категориям.</dd>
 <dt class="landingPageList"><a href="/ru/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Режим совместимости и стандартный режим</a></dt>
 <dd class="landingPageList">Историческая справка по режиму совместимости и стандартному режиму.</dd>
</dl>

<h2 class="landingPageList" id="Похожие_темы">Похожие темы</h2>

<dl>
 <dt><a href="/ru/docs/Web/HTML/Applying_color">Применение цвета к HTML-элементам с помощью CSS</a></dt>
 <dd>В этой статье описывается большинство способов использования CSS для добавления цвета к HTML-контенту, а также перечисляется, какие части документов HTML могут быть окрашены, и какие свойства CSS при этом используются. Включает примеры, ссылки на инструменты для создания палитры и многое другое.</dd>
</dl>
</div>
</div>
<span class="alllinks"><a href="/ru/docs/tag/HTML">Посмотреть все...</a></span></section>