path: root/files/ru/learn/getting_started_with_the_web/html_basics/index.html

---
title: Основы HTML
slug: Learn/Getting_started_with_the_web/HTML_basics
tags:
  - HTML
  - Web
  - Новичку
  - Обучение
translation_of: Learn/Getting_started_with_the_web/HTML_basics
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>

<div class="summary">
<p>HTML (Hypertext Markup Language) - это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.</p>
</div>

<h2 id="Что_такое_HTML_на_самом_деле">Что такое HTML на самом деле?</h2>

<p>HTML не является языком программирования; это <em>язык разметки</em>, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда <strong>{{Glossary("element", "элементов")}}</strong>, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие {{Glossary("tag", "теги")}} могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:</p>

<pre>Моя кошка очень раздражена</pre>

<p>Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:</p>

<pre class="brush: html">&lt;p&gt;Моя кошка очень раздражена&lt;/p&gt;</pre>

<h3 id="Анатомия_HTML_элемента">Анатомия HTML элемента</h3>

<p>Давайте рассмотрим элемент абзаца более подробно.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>

<p>Главными частями нашего элемента являются:</p>

<ol>
 <li><strong>Открывающий тег (Opening tag)</strong>: Состоит из имени элемента (в данном случае, "p"), заключённого в открывающие и закрывающие <strong>угловые скобки</strong>.  Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.</li>
 <li><strong>Закрывающий тег (Closing tag):</strong> Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.</li>
 <li><strong>Контент (Content)</strong>: Это контент элемента, который в данном случае является просто текстом.</li>
 <li><strong>Элемент(Element)</strong>: Открывающий тег, закрывающий тег и контент вместе составляют элемент.</li>
</ol>

<p>Элементы также могут иметь атрибуты, которые выглядят так:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>

<p>Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">class</span></font> это <em>имя</em> <em>атрибута,</em> а <code>editor-note</code> это <em>значение атрибута</em>. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.</p>

<p>Атрибут всегда должен иметь:</p>

<ol>
 <li>Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).</li>
 <li>Имя атрибута, за которым следует знак равенства.</li>
 <li>Значение атрибута, заключённое с двух сторон в кавычки.</li>
</ol>

<h3 id="Вложенные_элементы">Вложенные элементы</h3>

<p>Вы также можете располагать элементы внутри других элементов — это называется <strong>вложением</strong>. Если мы хотим заявить, что наша кошка <strong>очень</strong> раздражена, мы можем заключить слово "очень" в элемент {{htmlelement("strong")}} , который указывает, что слово должно быть сильно акцентированно:</p>

<pre class="brush: html">&lt;p&gt;Моя кошка &lt;strong&gt;очень&lt;/strong&gt; раздражена.&lt;/p&gt;</pre>

<p>Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент {{htmlelement("p")}}, затем элемент {{htmlelement("strong")}}, потом мы должны закрыть сначала элемент {{htmlelement("strong")}}, затем {{htmlelement("p")}}. Приведённое ниже неверно:</p>

<pre class="example-bad brush: html">&lt;p&gt;Моя кошка &lt;strong&gt;очень раздражена.&lt;/p&gt;&lt;/strong&gt;</pre>

<p>Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше,  ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!</p>

<h3 id="Пустые_элементы">Пустые элементы</h3>

<p>Некоторые элементы не имеют контента, и называются <strong>пустыми элементами</strong>. Возьмём  элемент {{htmlelement("img")}}, который уже имеется в нашем HTML:</p>

<pre class="brush: html">&lt;img src="images/firefox-icon.png" alt="Моё тестовое изображение"&gt;</pre>

<p>Он содержит два атрибута, но не имеет закрывающего тега <code>&lt;/img&gt;</code>, и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.</p>

<h3 id="Анатомия_HTML_документа">Анатомия HTML документа</h3>

<p>Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш <code>index.html</code> (с которым мы впервые встретились в статье <a href="/ru/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a>):</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Моя тестовая страница&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;img src="images/firefox-icon.png" alt="Моё тестовое изображение"&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>Здесь мы имеем:</p>

<ul>
 <li><code>&lt;!DOCTYPE html&gt;</code> — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.</li>
 <li><code>&lt;html&gt;&lt;/html&gt;</code> — элемент {{htmlelement("html")}}. Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.</li>
 <li><code>&lt;head&gt;&lt;/head&gt;</code> — элемент {{htmlelement("head")}}. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но<em> не являющегося </em>контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.</li>
 <li><code>&lt;body&gt;&lt;/body&gt;</code> — элемент {{htmlelement("body")}}. В нем содержится <em>весь</em> контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то ещё.</li>
 <li><code>&lt;meta charset="utf-8"&gt;</code> — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.</li>
 <li><code>&lt;title&gt;&lt;/title&gt;</code> — элемент {{htmlelement("title")}}. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.</li>
</ul>

<h2 id="Изображения">Изображения</h2>

<p>Давайте снова обратим наше внимание на элемент {{htmlelement("img", "изображения")}}:</p>

<pre class="brush: html">&lt;img src="images/firefox-icon.png" alt="Mоё тестовое изображение"&gt;</pre>

<p>Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута <code>src</code> (source, источник), который содержит путь к нашему файлу изображения.</p>

<p>Мы также включили атрибут <code>alt</code> (alternative, альтернатива). В этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение, возможно, по следующим причинам:</p>

<ol>
 <li>У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.</li>
 <li>Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте <code>src</code>, сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:</li>
</ol>

<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p>

<p>Альтернативный текст - это "пояснительный текст". Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передаёт изображение. В этом примере наш текст "My test image" ("Моё тестовое изображение") не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет "The Firefox logo: a flaming fox surrounding the Earth" ("Логотип Firefox: огненный Лис вокруг Земли").</p>

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

<div class="note">
<p><strong>Примечание</strong>: Узнайте больше о <a href="/ru/docs/Web/Accessibility">специальных возможностях</a>.</p>
</div>

<h2 id="Разметка_текста">Разметка текста</h2>

<p>В этом разделе рассмотрим некоторые из основных HTML элементов, которые вы будете использовать для разметки текста.</p>

<h3 id="Заголовки">Заголовки</h3>

<p>Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков {{htmlelement("h1")}}–{{htmlelement("h6")}}, хотя обычно вы будете использовать не более 3-4 :</p>

<pre class="brush: html">&lt;h1&gt;Мой главный заголовок&lt;/h1&gt;
&lt;h2&gt;Мой заголовок верхнего уровня&lt;/h2&gt;
&lt;h3&gt;Мой подзаголовок&lt;/h3&gt;
&lt;h4&gt;Мой под-подзаголовок&lt;/h4&gt;</pre>

<p>Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше  элемента {{htmlelement("img")}}.</p>

<h3 id="Абзацы">Абзацы</h3>

<p>Как было сказано раньше, элемент {{htmlelement("p")}} предназначен для абзацев текста; вы будете использовать их регулярно при разметке текстового контента:</p>

<pre class="brush: html">&lt;p&gt;Это одиночный абзац&lt;/p&gt;</pre>

<p>Добавьте свой образец текста (вы создавали его в статье <a href="/ru/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>Каким должен быть ваш веб-сайт?</em></a>) в один или несколько абзацев, расположенных прямо под элементом {{htmlelement("img")}}.</p>

<h3 id="Списки">Списки</h3>

<p>Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространёнными типами списков являются нумерованные и ненумерованные списки:</p>

<ol>
 <li><strong>Ненумерованные списки</strong> - это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент {{htmlelement("ul")}}.</li>
 <li><strong>Нумерованные списки -</strong> это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент {{htmlelement("ol")}}.</li>
</ol>

<p>Каждый пункт внутри списков располагается внутри элемента {{htmlelement("li")}} (list item, элемент списка).</p>

<p>Например, если мы хотим включить часть следующего фрагмента абзаца в список:</p>

<pre class="brush: html">&lt;p&gt;Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе ... &lt;/p&gt;</pre>

<p>Мы могли бы изменить разметку на эту:</p>

<pre class="brush: html">&lt;p&gt;Mozilla, мы являемся мировым сообществом&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;технологов&lt;/li&gt;
  &lt;li&gt;мыслителей&lt;/li&gt;
  &lt;li&gt;строителей&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;работающих вместе ... &lt;/p&gt;</pre>

<p>Попробуйте добавить упорядоченный или неупорядоченный список на свою страницу.</p>

<h2 id="Ссылки">Ссылки</h2>

<p>Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — {{htmlelement("a")}} — <em>a</em> это сокращение от "anchor" ("якорь"). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:</p>

<ol>
 <li>Выберите некоторый текст. Мы выбрали текст "Манифест Mozilla".</li>
 <li>Оберните текст в элемент {{htmlelement("a")}}, например так:
  <pre class="brush: html">&lt;a&gt;Манифест Mozilla&lt;/a&gt;</pre>
 </li>
 <li>Задайте элементу {{htmlelement("a")}} атрибут<strong> </strong><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">href</span></font>, например так:
  <pre class="brush: html">&lt;a href=""&gt;Манифест Mozilla&lt;/a&gt;</pre>
 </li>
 <li>Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку:
  <pre class="brush: html">&lt;a href="https://www.mozilla.org/ru/about/manifesto/details/"&gt;Манифест Mozilla&lt;/a&gt;</pre>
 </li>
</ol>

<p>Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите <code>https://</code> или <code>http://</code> часть, называемую <em>протоколом</em>. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.</p>

<div class="note">
<p><code>href</code> сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как <em><strong>h</strong>ypertext <strong>ref</strong>erence </em>("гипертекстовая ссылка").</p>
</div>

<p>Теперь добавьте ссылку на вашу страницу, если вы ещё не сделали этого.</p>

<h2 id="Заключение">Заключение</h2>

<p>Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете <a href="http://mdn.github.io/beginner-html-site/">посмотреть её здесь</a>):<br>
 <br>
 <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>

<p>Если вы застряли, вы всегда можете сравнить свою работу с нашим <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">готовым примером кода</a> на GitHub.</p>

<p>Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу <a href="/ru/Learn/HTML">Обучение HTML: руководства и уроки</a>.</p>

<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p>

<h2 id="В_этом_модуле">В этом модуле</h2>

<ul>
 <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
 <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
 <li id="Dealing_with_files"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
 <li id="HTML_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
 <li id="CSS_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
 <li id="JavaScript_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
 <li id="Publishing_your_website"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
 <li id="How_the_web_works"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
</ul>