<section id="description">
<p>Вы можете добавить еще один уровень организации в свой HTML-документ в тегах <code>html</code> с элементами <code>head</code> и <code>body</code> . Любая разметка с информацией о Вашей странице будет идти в теге <code>head</code>. Остальная разметка с содержимым страницы (то, что отображается для пользователя) войдет в тег <code>body</code> . Элементы метаданных, такие как <code>link</code>, <code>meta</code>, <code>title</code> и <code>style</code>, обычно входят в элемент <code>head</code>. Вот пример макета страницы: 
<pre class="language-html"><code>&#x3C;!DOCTYPE html>
&#x3C;html>
  &#x3C;head>
    &#x3C;!-- элементы метаданных -->
  &#x3C;/head>
  &#x3C;body>
    &#x3C;!-- содержание страницы -->
  &#x3C;/body>
&#x3C;/html></code></pre></p>
</section>

Define the Head and Body of an HTML Document

<section id="description">
<p>Упражнения до сих пор охватывали конкретные элементы HTML и их использование. Однако есть несколько элементов, которые дают общую структуру вашей странице и должны быть включены в каждый HTML-документ. В верхней части документа вам нужно указать браузеру, какую версию HTML использует ваша страница. HTML - развивающийся язык и регулярно обновляется. Большинство браузеров поддерживают самую последнюю спецификацию—HTML5, но старые веб-страницы могут использовать предыдущие версии языка. Чтобы сообщить браузеру какую версию HTML использовать нужно добавить следующий тег в первую строку вашего документа <code>&#x3C;!DOCTYPE ...></code> , где « <code>...</code> » - это версия HTML. Для HTML5 вы используете <code>&#x3C;!DOCTYPE html></code> . <code>!</code> и <code>DOCTYPE</code> должно быть написано заглавными буквами, особенно для старых браузеров. Далее, весь ваш HTML-код необходимо обернуть в теги <code>html</code> . Открытие <code>&#x3C;html></code> идет непосредственно под линией <code>&#x3C;!DOCTYPE html></code> , а закрытие <code>&#x3C;/html></code> идет в конце страницы. Вот пример структуры страницы: 
<pre class="language-html"><code>&#x3C;!DOCTYPE html>
&#x3C;html>
  &#x3C;!-- Ваш HTML-код идет здесь -->
&#x3C;/html> </code></pre>
</p>
</section>

Declare the Doctype of an HTML Document

<section id="description">
<p>Наш телефон в размерах довольно ограниченный. Давайте удалим ненужные элементы, чтобы мы могли начать строить наше веб-приложение CatPhotoApp.</p></section>

Delete HTML Elements

<section id="description">
  <p>HTML5 вводит более описательные HTML-теги. К ним относятся <code>header</code> , <code>footer</code> ,
    <code>nav</code> , <code>video</code> , <code>article</code> , <code>section</code> и другие.</p>
    
    <p>
       Эти теги упрощают
    чтение вашего HTML, а также помогают в поисковой оптимизации (SEO) и доступности. <code>main</code> тег HTML5
    помогает поисковым системам и другим разработчикам находить основное содержимое вашей страницы. </p>
    
<p>
  Пример использования тега <code>main</code>
  <pre class="language-html"><code>&lt;main&gt; 
  &lt;h1&gt;Hello World&lt;/h1&gt;
  &lt;p&gt;Hello Paragraph&lt;/p&gt;
&lt;/main&gt;</code>
</pre>
</p>

<p>
  <strong>Заметка</strong> <br> Многие из новых тегов HTML5 и их преимущества описаны в разделе «Прикладная доступность».
  </p>
</section>

Introduction to HTML5 Elements

<section id="description">
<p>Вам могут потребоваться определенные поля формы, чтобы ваш пользователь не смог отправить вашу форму до тех пор, пока не будут заполнены все необходимые поля. Например, если вы хотите сделать поле обязательным для ввода, вы можете просто добавить атрибут <code>required</code> в ваш элемент <code>input</code> , например: 
<pre class="language-html"><code>&#x3C;input type="text" required></code></pre>
</p>
</section>

Use HTML5 to Require a Field

<section id="description">
<p>Давайте добавим кнопку <code>&#x3C;button type="submit" /></code> в вашу форму. Нажатие этой кнопки отправит данные из вашей формы по URL-адресу, указанному вами с помощью атрибута формы <code>action</code>. 
</p>

<p>
  Обратите внимание на атрибут <code>type="submit"</code>. Именно он делает кнопку не просто кнопкой, а такой специальной, по которой если кликнуть, сработает отправка формы. Ежели создать просто кнопку <code>&#x3C;button /></code> и не прописать ей этот атрибут, то без дополнительных js-скриптов она будет бесполезна.
</p>

<p>
  Вот пример кнопки отправки: 
<pre class="language-html"><code>&#x3C;button type="submit">this button submits the form&#x3C;/button></code></pre>
</p>
</section>

Add a Submit Button to a Form

<section id="description">
<p>Вы можете сделать чекбокс или радиокнопку включенными по умолчанию с помощью атрибута <code>checked</code>. Для этого просто добавьте слово "checked" во внутреннюю часть тега input. Например: 
<pre class="language-html"><code>&#x3cinput type="radio" name="test-name" checked>
</code></pre>
</p></section>

Check Radio Buttons and Checkboxes by Default

<section id="description">
<p>Вы можете вставлять ссылки в другие текстовые элементы. 

<pre class="language-html"><code> &#x3C;Р>
    Вот вам ссылка:
    &#x3C;a target="_blank" href="http://freecodecamp.org"> на freecodecamp.org &#x3C;/a> для вас.
  &#x3C;/p> </code></pre>

Давайте разберем пример: Обычный текст завернут в элемент <code>p</code>: 
<pre class="language-html"><code>&#x3C;p> Here's a ... for you to follow. &#x3C;/p></code></pre>

Следующий элемент <code>&#x3C;a></code> (для которого требуется закрывающий тег <code>&#x3C;/a></code> ):

<pre class="language-html"><code>&#x3C;a> ... &#x3C;/a></code></pre>

<code>target</code> - это атрибут тега привязки, который указывает, где можно открыть ссылку, а значение <code>"_blank"</code> указывает на открытие ссылки на новой вкладке. <code>href</code> является атрибутом тега привязки, который содержит URL-адрес связь: 

<pre class="language-html"><code>&#x3C;a href="http://freecodecamp.org"> ... &#x3C;/a></code></pre>

Внутри тега <code>a</code> будет отображаться текст <code>ссылка на freecodecamp.org</code>.

<pre class="language-html"><code>&#x3C;a href=" ... ">ссылка на freecodecamp.org&#x3C;/a></code></pre> 

Окончательный результат примера будет выглядеть так: <br></p><p> Вот <a target="_blank" href="http://freecodecamp.org">ссылка на freecodecamp.org</a> для вас. </p>
</section>

Nest an Anchor Element within a Paragraph

<section id="description">
<p>Используя чистый HTML, вы можете создавать веб-формы, которые фактически отправляют данные на сервер. Вы можете сделать это, указав действие в элементе <code>form</code>. 
Например: 
<pre class="language-html"><code>&#x3C;form action="/url-where-you-want-to-submit-form-data">
  &#x3C;input />
&#x3C;/form></code></pre>

В данном случае в теге <code>form</code> используется атрибут <code>action</code>, в котором мы указываем адрес куда будут отправлены данные формы.
</p>
</section>

Create a Form Element

<section id="description">
<p>Элемент <code>div</code>, также известный как элемент разделения (<b>div</b>ision), является контейнером общего назначения для других элементов. Элемент <code>div</code> вероятно, является наиболее часто используемым HTML-элементом. Как и любой другой несамозакрывающийся элемент, вы можете открыть элемент <code>div</code> с помощью <code>&#x3C;div></code> и закрыть его в другой строке с помощью <code>&#x3C;/div></code> .</p></section>

Nest Many Elements within a Single div Element

<section id="description">
<p>Для создания текста параграфа веб-сайта лучше использовать элемент <code>p</code>. <code>p</code> - это сокращение от слова «paragraph» (параграф). Вы можете создать параграф с этим элементом следующим образом: 
<pre class="language-html"><code>&#x3C;p>I'm a p tag!&#x3C;/p></code></pre>
</p>
</section>

Inform with the Paragraph Element

<section id="description">
<p>Комментирование - это способ, с помощью которого вы можете оставлять комментарии для других разработчиков в своем коде, не влияя на итоговый вывод, который отображается конечному пользователю. Комментирование также является удобным способом сделать код неактивным, не удаляя его целиком. Комментарии в HTML начинаются с <code>&#x3C;!--</code> , и заканчиваются с <code>--></code></p>
</section>

Uncomment HTML

<section id="description">
<p>Помните, что для того, чтобы начать комментарий, вам нужно использовать <code>&#x3C;!--</code> и для завершения комментария, вам нужно использовать <code>--></code> Здесь вам нужно будет закончить комментарий до того, как начнется ваш элемент <code>h2</code> .</p></section>

Comment out HTML

<section id="description">
<p>Вы можете добавлять изображения на свой сайт с помощью элемента <code>img</code> и указывать URL-адрес определенного изображения, используя атрибут <code>src</code> . Примером этого может быть: <pre class="language-html"><code>&#x3C;img src="https://www.your-image-source.com/your-image.jpg"></code></pre> 
</p>
<p>
Обратите внимание, что элементы <code>img</code> самозакрываются. Все элементы <code>img</code> <strong>должны</strong> иметь атрибут <code>alt</code> . Текст внутри атрибута <code>alt</code> используется для чтения с экрана для улучшения доступности и отображается в виде текста, если изображение не загружается. </p>
<p>
Примечание. Если изображение является чисто декоративным, использование чистого атрибута <code>alt</code> является наилучшей практикой. В идеале атрибут <code>alt</code> не должен содержать специальных символов, если это не требуется. 
</p>
<p>
Давайте добавим атрибут <code>alt</code> к нашему примеру <code>img</code> выше: 
<pre class="language-html"><code>&#x3C;img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up."></code></pre> </p>
</section>

Add Images to Your Website

<section id="description">
<p>Вы можете использовать элементы <code>a</code> (anchor или якорь) для ссылки на контент вне вашей веб-страницы. Элементам <code>a</code> нужен УРЛ-адрес назначения, называемый атрибутом <code>href</code>. Внутри тега следует размещать текст и/или другие HTML-теги, так как если ничего внутри тега не будет, то и ссылку не будет видно. 

Вот пример: <pre class="language-html"><code>&#x3C;a href="https://freecodecamp.org">это ссылка на freecodecamp.org&#x3C;/a></code></pre> 

Затем ваш браузер отобразит текст <code>это ссылка на freecodecamp.org</code> в качестве ссылки, которую вы можете щелкнуть. И эта ссылка приведет вас к веб-адресу <code>https://www.freecodecamp.org</code> .</p></section>

Link to External Pages with Anchor Elements

<section id="description">
<p>Иногда вы хотите добавить ссылки на свой веб - сайт, прежде чем решите куда они должны ссылаться, то есть конечный адрес еще не известен. Это также удобно, когда вы меняете поведение ссылки с помощью <code>JavaScript</code>, о чем мы узнаем позже.</p></section>

Make Dead Links Using the Hash Symbol

<section id="description">
<p>Вы можете превращать элементы в ссылки, вложив их внутрь элемента <code>a</code>. Вложение вашего изображения внутрь <code>a</code> элемента. Вот пример: 

<pre class="language-html"><code>&#x3C;a href="#">&#x3C;img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera.">&#x3C;/a></code></pre>

Не забудьте использовать <code>#</code> в качестве свойства <code>href</code> вашего элемента <code>a</code> для того, чтобы превратить его в мертвую ссылку.</p></section>

Turn an Image into a Link

<section id="description">
<p>HTML имеет специальный элемент для создания <code>ненумерованных списков</code> или списков стилей в стиле пули (bullet). Ненумерованные списки начинаются с элемента открытия <code>&#x3C;ul></code> , за которым следует любое количество элементов <code>&#x3C;li>...&#x3C;/li></code> . Наконец, неупорядоченные списки закрываются с помощью <code>&#x3C;/ul></code> 

Например: 
<pre class="language-html"><code>&#x3C;ul>
  &#x3C;li>молоко &#x3C;/li>
  &#x3C;li>сыр &#x3C;/li>
&#x3C;/ul></code></pre>

создаст список «молоко» и «сыр».</p></section>

Create a Bulleted Unordered List

<section id="description">
<p>HTML имеет еще один специальный элемент для создания <code>ordered lists</code> или нумерованных списков. Нумерованные списки начинаются с элемента <code>&#x3C;ol></code> , за которым следует любое количество элементов <code>&#x3C;li>...&#x3C;/li></code>. Наконец, упорядоченные списки закрываются с помощью <code>&#x3C;/ol></code> 
Например: 
<pre class="language-html"><code>&#x3C;ol>
  &#x3C;li>Гарфилд &#x3C;/li>
  &#x3C;li>Сильвестр &#x3C;/li>
&#x3C;/ol> </code></pre>

создаст нумерованный список «Гарфилд» и «Сильвестр».</p></section>

Create an Ordered List

<section id="description">
<p>Теперь давайте создадим веб-форму. Элементы ввода - удобный способ ввода данных от пользователя. Вы можете создать текстовый ввод следующим образом: <code>&#x3C;input type="text" /></code> Обратите внимание, что <code>input</code> элементы самозакрываются (то есть не используется закрывающий тег), но лучше сразу привыкать ставить слеш в конце тега, чтобы не было потом мучительно больно.</p></section>

Create a Text Field

<section id="description">
<p>Текст placeholder'а - это то, что отображается в вашем элементе <code>input</code> до того, как ваш пользователь ввел что-либо. Вы можете создать текст placeholder'а следующим образом: 
<pre class="language-html"><code>&#x3C;input type="text" placeholder="this is placeholder text"></code></pre>
</p>
</section>

Add Placeholder Text to a Text Field

<section id="description">
<p>Веб-разработчики традиционно используют <code>lorem ipsum text</code> в качестве текста-заполнителя. Текст «lorem ipsum» случайным образом взят из знаменитого отрывка Цицерона Древнего Рима. Текст "lorem ipsum" использовался в качестве текста-заполнителя наборщиками текста с 16 века, и эта традиция продолжается на веб-страницах. Однако, 5 веков - это достаточно долго. Раз уж мы создаем CatPhotoApp, давайте использовать что-то под названием <code>kitty ipsum text</code> .</p></section>

Fill in the Blank with Placeholder Text

<section id="description">
<p>Вы можете использовать <code>radio buttons</code> (радиокнопки) для вопросов, в которых вы хотите, чтобы пользователь дал вам один ответ из нескольких вариантов. Радиокнопки - это тип <code>input</code>. Каждая из ваших радиокнопок может быть вложена в свой собственный элемент <code>label</code>. Обернув элемент <code>input</code> в элемент <code>label</code> вы автоматически свяжете радиокнопку с окружающим ее элементом <code>label</code>. Все связанные радиокнопки должны иметь одинаковый атрибут <code>name</code> для создания группы переключателей. Создавая группу радиокнопок, при выборе любой одной радиокнопки автоматически отменяется выбор других радиокнопок в пределах одной группы, разрешая пользователю только один ответ. Вот пример переключателя: 
<pre class="language-html"><code>&#x3C;label>
  &#x3C;input type="radio" name="indoor-outdoor"> Indoor
&#x3C;/label> </code></pre>

Рекомендуется использовать атрибут <code>for</code> тега <code>label</code> со значением, которое соответствует значению атрибута <code>id</code> <code>input</code> элемента. Это позволяет вспомогательным технологиям создавать взаимосвязанные отношения между <code>label</code> и элементом <code>input</code> . Например: 
<pre class="language-html"><code>&#x3C;label for="indoor">
  &#x3C;input id="indoor" type="radio" name="indoor-outdoor"> Indoor
&#x3C;/label></code></pre>
</p>
</section>

Create a Set of Radio Buttons

<section id="description">
<p>В формах обычно используют <code>checkboxes</code>'ы для вопросов, которые могут иметь более одного ответа. Чекбокс - это тип <code>input</code> Каждый из ваших чекбоксов может быть вложен в свой собственный элемент <code>label</code> . Обернув элемент <code>input</code> элементом <code>label</code> вы автоматически свяжете этот чекбокс с элементом <code>label</code>, который окружает его. Все связанные с ним флажки должны иметь одинаковый атрибут <code>name</code> . Считается лучшей практикой явно определить отношения между <code>input</code> с типом чекбокс и соответствующим <code>label</code>, установив атрибут <code>for</code> на <code>label</code> элемента в соответствии с <code>id</code> атрибута соответствующего <code>input</code> элемента. Вот пример чекбокса: 
<pre class="language-html"><code>&#x3C;label for="loving">
  &#x3C;input id="loving" type="checkbox" name="personality">Loving
&#x3C;/label></code></pre>
</p>
</section>

Create a Set of Checkboxes

<section id="description">
<p>В течение следующих нескольких уроков мы по частям построим HTML5 веб-приложение с картинками котят. Элемент <code>h2</code>, который вы добавите на этом шаге, добавит заголовок второго уровня на веб-страницу. Этот элемент сообщает браузеру информацию о структуре вашего веб-сайта. Элементы <code>h1</code> часто используются для основных заголовков, а элементы <code>h2</code> обычно используются для подзаголовков. Существуют также элементы <code>h3</code> , <code>h4</code> , <code>h5</code> и <code>h6</code> для обозначения разных уровней подзаголовков.</p></section>

Headline with the h2 Element

<section id="description">
<p>Элементы <code>a</code> также могут использоваться для создания внутренних ссылок для перехода к различным разделам веб-страницы. 

Чтобы создать внутреннюю ссылку, вы назначаете атрибут <code>href</code> ссылки на хэш-символ <code>#</code> плюс значение атрибута <code>id</code> для элемента, к которому вы хотите внутренне связать, обычно дальше вниз по странице. Затем вам нужно добавить тот же атрибут <code>id</code> к элементу, к которому вы привязываетесь. 

<code>id</code> - это атрибут, который однозначно описывает элемент (то есть на странице не должно быть более одного элемента с одним и тем же атрибутом <code>id</code>). 

Ниже приведен пример внутренней привязной ссылки и ее целевого элемента: <pre class="language-html"><code>&#x3C;a href="#contacts-header">Контакты&#x3C;/a>
 ...
&#x3C;h2 id="contacts-header">Контакты&#x3C;/h2>
</code></pre>

Когда пользователи нажимают ссылку «Контакты», они будут отправлены в раздел веб-страницы с элементом заголовка <b>Контакты</b> .</p></section>

Link to Internal Sections of a Page with Anchor Elements

<section id="description">
<p>Добро пожаловать в курс по HTML от freeCodeCamp. Мы проведем вас через веб-разработку шаг за шагом. Сначала вы начнете с создания простой веб-страницы с использованием HTML. Вы можете редактировать код в редакторе кода, который встроен в эту веб-страницу. Вы видите <code>&#x3C;h1>Hello&#x3C;/h1></code> в редакторе кода? Это элемент HTML. Большинство элементов HTML имеют открывающий тег и закрывающий тег. Открывающие теги выглядят следующим образом: 
<pre class="language-html"><code>&#x3C;h1></code></pre>
Закрывающие же теги выглядят так: 
<pre class="language-html"><code>&#x3C;/h1></code></pre>
Единственная разница между открывающим и закрывающим тегами - это слеш вправо после открывающей скобки закрывающего тега. У каждого упражнения есть тесты, которые вы можете запустить в любое время, нажав кнопку «Запустить тесты».</p></section>