Создание гиперссылок - Изучение веб-разработки

Создание гиперссылок
====================

* Назад
* Обзор: Introduction to HTML
* Далее

Гиперссылки очень важны — именно они делают Интернет *сетью*. В этой статье представлен синтаксис, необходимый для создания ссылки, а также обсуждаются лучшие практики обращения со ссылками.

|  |  |
| --- | --- |
| Предварительные требования: |
 Базовое знание HTML, описанное в разделе «Начало работы с HTML». Знакомство с форматированием текста, которое описано в разделе
 «Основы редактирования текста в HTML».
  |
| Задача: | Научиться эффективно использовать гиперссылки и связывать несколько файлов вместе. |

Что такое гиперссылка?
----------------------

Гиперссылки — одно из самых интересных нововведений Интернета. Они были особенностью Сети с самого начала, но именно они превращают Интернет в Интернет. Они позволяют нам связывать наши документы с любым другим документом (или ресурсом), с которым мы хотим. С их помощью мы также можем связывать документы с их конкретными частями, и мы можем сделать приложения доступными на простом веб-адресе (сравните это с локальными приложениями, которые должны быть установлены, и другими такими же вещами). Почти любой веб-контент может быть преобразован в ссылку, так что когда вы кликаете по ней (или иным образом активируете), она заставляет веб-браузер перейти на другой веб-адрес (URL).

**Примечание:** URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео и аудиофайлы и все остальное, что может жить в Интернете. Если веб-браузер не знает, как отображать или обрабатывать файл, он спросит вас, хотите ли вы открыть файл (в этом случае обязанность открытия или обработки файла передаётся в соответствующее локальное приложение на устройстве) или загрузить файл (в этом случае вы можете попытаться разобраться с ним позже).

Например, домашняя страница BBC содержит большое количество ссылок, которые указывают не только на множество новостей, но и на различные области сайта (меню), страницы входа / регистрации (пользовательские инструменты) и многое другое.

![Главная страница bbc.co.uk, показывающая множество новостей и функциональность меню навигации.](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks/updated-bbc-website.png)

Анатомия ссылки
---------------

Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите Ссылки-блоки), который вы хотите превратить в ссылку, в элемент `<a>`, и придания этому элементу атрибута `href` (который также известен как **гипертекстовая ссылка,** или **цель**), который будет содержать веб-адрес, на который вы хотите указать ссылку.

```html
<p>
  Я создал ссылку на
  <a href="https://www.mozilla.org/ru/">домашнюю страницу Mozilla</a>.
</p>
```

Это дало нам следующий результат:
Я создал ссылку на домашнюю страницу Mozilla.

### Блочные ссылки

Как упоминалось ранее, вы можете превратить любой элемент в ссылку, даже блочный элемент. Если вы хотите превратить заголовок в ссылку, то оберните его в элемент (`<a>`):

```html
<a href="https://developer.mozilla.org/ru/">
  <h1>MDN Web Docs</h1>
</a>
<p>
  Документируем веб-технологии, включая CSS, HTML и JavaScript, с 2005 года.
</p>
```

 This turns the heading into a link:

### Добавляем информацию с помощью атрибута title

Другим атрибутом, который вы можете добавить к своим ссылкам, является — `title`. Он предназначен для хранения полезной информации о ссылке. Например, какую информацию содержит страница или другие вещи, о которых вам нужно знать. Например:

```html
<p>
  Я создал ссылку на
  <a
 href="https://www.mozilla.org/ru/"
 title="Лучшее место для поиска дополнительной информации
 о миссии Mozilla и о том, как внести свой вклад"
 >домашнюю страницу Mozilla </a
 >.
</p>
```

Вот что получилось (описание появится, если навести курсор на ссылку):

**Примечание:** Описание из атрибута title отображается только при наведении курсора, значит люди, полагающиеся на клавиатурные элементы управления для навигации по веб-страницам, будут испытывать трудности с доступом к информации, которую содержит title. Если информация заголовка действительно важна для удобства использования страницы, то вы должны представить её таким образом, который будет доступен для всех пользователей, например, поместив её в обычный текст.

### Активное изучение: создаём собственную ссылку

Время упражнения: мы хотели бы, чтобы вы создали любой HTML-документ в текстовом редакторе на своём компьютере (наш базовый пример подойдёт.)

* Попробуйте добавить в тело HTML один или несколько абзацев или другие элементы, о которых вы уже знаете.
* Теперь превратите некоторые фрагменты документа в ссылки.
* Добавьте ссылкам атрибут `title`.
Краткое руководство по URL-адресам и путям
------------------------------------------

Чтобы полностью понять адреса ссылок, вам нужно понять несколько вещей про URL-адреса и пути к файлам. Этот раздел даст вам информацию, необходимую для достижения этой цели.

URL-адрес (Uniform Resource Locator, или единый указатель ресурса, но так его никто не называет) — это просто строка текста, которая определяет, где что-то находится в Интернете. Например, домашняя страница Mozilla находится по адресу `https://www.mozilla.org/ru/`.

URL-адреса используют пути для поиска файлов. Пути указывают, где в файловой системе находится файл, который вас интересует. Давайте рассмотрим простой пример структуры каталогов (смотрите каталог creating-hyperlinks.)

![A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks/simple-directory.png)

**Корень** структуры — каталог `creating-hyperlinks`. При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — `index.html` и `contacts.html`. На настоящем веб-сайте `index.html` был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определённого раздела веб-сайта).

В корне есть ещё два каталога — `pdfs` и `projects`. У каждого из них есть один файл внутри — `project-brief.pdf` и `index.html`, соответственно. Обратите внимание на то, что вы можете довольно успешно иметь два `index.html` файла в одном проекте, пока они находятся в разных местах файловой системы. Многие веб-сайты так делают. Второй `index.html`, возможно, будет главной лендинг-страницей для связанной с проектом информации.

* **Тот же каталог**: Если вы хотите подключить ссылку внутри `index.html` (верхний уровень `index.html`), указывающую на `contacts.html`, вам просто нужно указать имя файла, на который вы хотите установить ссылку, так как он находится в том же каталоге, что и текущий файл. Таким образом, URL-адрес, который вы используете — `contacts.html`:

```html
<p>
  Хотите связаться с конкретным сотрудником? Найдите подробную информацию на
  нашей <a href="contacts.html">странице контактов</a>.
</p>
```

* **Перемещение вниз в подкаталоги**: Если вы хотите подключить ссылку внутри `index.html` (верхний уровень `index.html`), указывающую на `projects/index.html`, вам нужно спуститься ниже в директории `projects` перед тем, как указать файл, который вы хотите. Это делается путём указания имени каталога, после которого идёт слеш и затем имя файла. Итак, URL-адрес, который вы используете - `projects/index.html`:

```html
<p>
  Посетите мою <a href="projects/index.html">домашнюю страницу проекта</a>.
</p>
```

* **Перемещение обратно в родительские каталоги**: Если вы хотите подключить ссылку внутри `projects/index.html`, указывающую на `pdfs/project-brief.pdf`, вам нужно будет подняться на уровень каталога, затем спустится в каталог `pdf`. "Подняться вверх на уровень каталога" обозначается двумя точками — `..` — так, URL-адрес, который вы используете `../pdfs/project-brief.pdf`:

```html
<p>
  Ссылка на
  <a href="../pdfs/project-brief.pdf">краткое описание моего проекта</a>.
</p>
```

**Примечание:** вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например:
 `../../../сложный/путь/к/моему/файлу.html`.

### Фрагменты документа

Можно ссылаться на определённую часть документа HTML (известную как **фрагмент документа**), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут `id` элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:

```html
<h2 id="Почтовый\_адрес">Почтовый адрес</h2>
```

Затем, чтобы связаться с этим конкретным `id`, вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:

```html
<p>
  Хотите написать мне письмо? Используйте наш
  <a href="contacts.html#Почтовый\_адрес">почтовый адрес</a>.
</p>
```

Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на *другую часть того же документа*:

```html
<p>
  <a href="#Почтовый\_адрес">Почтовый адрес компании</a>
  можно найти в нижней части этой страницы.
</p>
```

### Абсолютные и относительные URL-адреса

Два понятия, с которыми вы столкнётесь в Интернете, — это **абсолютный URL** и **относительный URL**:

**Абсолютный URL**

Указывает на местоположение, определяемое его абсолютным местоположением в Интернете, включая протокол и доменное имя. Например, если страница `index.html` загружается в каталог, называемый `projects`, который находится внутри корня веб-сервера, а домен веб-сайта — `http://www.example.com`, страница будет доступна по адресу `http://www.example.com/projects/index.html` (или даже просто `http://www.example.com/projects/`), так как большинство веб-серверов просто ищет целевую страницу, такую как `index.html`, для загрузки, если он не указан в URL-адресе.).

*Абсолютный URL* всегда будет указывать на одно и то же местоположение, независимо от того, где он используется.

**Относительный URL**

Указывает расположение *относительно* файла, с которого вы связываетесь, это больше похоже на случай, который мы рассматривали в предыдущей секции. Для примера, если мы хотим указать со страницы `http://www.example.com/projects/index.html` на PDF файл, находящийся в той же директории, наш URL может быть просто названием файла — `project-brief.pdf` — никакой дополнительной информации не требуется. Если PDF расположен в поддиректории `pdfs` внутри каталога `projects`, относительная ссылка будет `pdfs/project-brief.pdf` (аналогичный абсолютный URL был бы `http://www.example.com/projects/pdfs/project-brief.pdf`.).

*Относительный URL* будет указывать на различные места, в зависимости от того, где находится файл, в котором он используется, — например, если мы переместим наш файл `index.html` из каталога `projects` в корневой каталог веб-сервера (верхний уровень, не в директорию) , то относительный URL `pdfs/project-brief.pdf` будет вести на `http://www.example.com/pdfs/project-brief.pdf`, а не на `http://www.example.com/projects/pdfs/project-brief.pdf`.

Советуем вам основательно разобраться в этой теме!

Практика написания хороших ссылок
---------------------------------

При написании ссылок рекомендуется следовать некоторым правилам. Давайте рассмотрим их.

### Используйте чёткие формулировки описания ссылок

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

* Пользователям программ читающих с экрана нравится переходить по ссылкам на странице, читая адрес ссылки в тексте.
* Поисковые системы используют текст ссылки для индексирования файлов, поэтому рекомендуется включать ключевые слова в текст ссылки, чтобы эффективно описывать, куда ведёт ссылка.
* Пользователи часто бегло просматривают страницу, не читая каждое слово, и их глаза будут привлечены к тексту, который выделяется, например, ссылки. Им будет полезно описание того, куда ведёт ссылка.

Взгляните на этот пример:

***Хороший** текст ссылки:* Скачать Firefox

```html
<p><a href="https://firefox.com/"> Скачать Firefox </a></p>
```

***Плохой** текст ссылки:* Нажми сюда, чтобы скачать Firefox

```html
<p><a href="https://firefox.com/"> Нажми сюда </a> чтобы скачать Firefox</p>
```

Советы:

* Не пишите URL-адрес как часть текста ссылки. URL-адреса выглядят сложными, а звучат ещё сложнее, когда программы чтения с экрана читают их по буквам.
* Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчёркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).
* Следите за тем, чтобы текст ссылки был как можно короче. Длинный текст ссылки особенно раздражает пользователей программ чтения с экрана, которым придётся услышать всё, что написано.
* Минимизируйте случаи, когда несколько копий одного и того же текста ссылок указывает на разные страницы. Это может вызвать проблемы для пользователей программ чтения с экрана, которые часто вызывают список ссылок — несколько ссылок, помеченных как «нажмите здесь», «нажмите здесь», «нажмите здесь», будут путать.
### Используйте относительные ссылки, где это возможно

Из прочитанного выше, вы можете подумать, что всё время использовать абсолютные ссылки — хорошая идея; в конце концов, они не ломаются, когда страница перемещается. Тем не менее, лучше использовать относительные ссылки везде, где это возможно, в пределах *одного сайта* (при ссылке на *другие сайты* необходимо использовать абсолютную ссылку):

* Во-первых, гораздо проще прописать в коде относительные URL-адреса, как правило, они намного короче абсолютных URL-адресов, что значительно упрощает чтение кода
* Во-вторых, использование относительных URL-адресов эффективней по следующей причине. Когда вы используете абсолютный URL-адрес, браузер начинает поиск реального местоположения сервера запрашивая адрес у Domain Name System (DNS; также прочтите Как работает web), затем он переходит на этот сервер и находит файл, который запрашивается. С относительным URL-адресом проще: браузер просто ищет файл, который запрашивается на том же сервере. Используя абсолютные URL-адреса вместо относительных, вы постоянно нагружаете свой браузер дополнительной работой.
### Создавая ссылки на не HTML ресурсы — добавляйте описание

Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте чёткую формулировку, чтобы уменьшить путаницу. Отсутствие описания может раздражать пользователя. Приведём пример:

* Если вы используете соединение с низкой пропускной способностью и вдруг нажмёте на ссылку без описания, начнётся загрузка большого файла.
* Если у вас нет установленного Flash-плеера и вы нажмёте ссылку, то внезапно перейдёте на страницу с Flash-контентом.

Посмотрите на примеры, чтобы увидеть, как добавить описание:

```html
<p>
  <a href="http://www.example.com/large-report.pdf">
    Скачать отчёт о продажах (PDF, 10MB)
  </a>
</p>

<p>
  <a href="http://www.example.com/video-stream/">
    Посмотреть видео (видео откроется в отдельном окне, HD качество)
  </a>
</p>

<p>
  <a href="http://www.example.com/car-game">
    Играть в гонки (необходим Flash)
  </a>
</p>
```

### Используйте атрибут download, когда создаёте ссылку

Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут `download`, чтобы создать имя файла по умолчанию для сохранения . Приведём пример ссылки для загрузки браузера Firefox 39:

```html
<a
 href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
 download="firefox-39-installer.exe">
  Скачать Firefox 39 для Windows
</a>
```

Активное изучение: создание меню навигации
------------------------------------------

Для этого упражнения мы хотим, чтобы вы создали ссылки на страницы в меню навигации в многостраничном сайте. Это один из распространённых способов создания сайта: на каждой странице используется одна и та же структура страниц, включая одно и то же меню навигации, поэтому при нажатии ссылок создаётся впечатление, что вы остаётесь в одном месте: меню остаётся на месте, а контент меняется.

Вам нужно скачать или создать следующие страницы в одном каталоге (Смотрите navigation-menu-start):

* index.html
* projects.html
* pictures.html
* social.html

Что делать:

1. Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имён страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.
2. Создайте ссылки каждому элементу списка, ведущие на эти страницы.
3. Скопируйте созданное меню в каждую страницу.
4. На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой приём помогает визуально определить, смотря на меню, в какой части сайта мы находимся.

Когда закончите задание, посмотрите, как это должно выглядеть:

![An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks/navigation-example.png)

**Примечание:** Если не удаётся сделать, или вы не уверены, что сделали верно, посмотрите наш вариант navigation-menu-marked-up.

Ссылки электронной почты
------------------------

Можно создавать ссылки или кнопки, которые при нажатии открывают новое исходящее сообщение электронной почты, а не ссылку на ресурс или страницу. Для этого используется элемент `<a>` и `mailto:` — *адрес почты*.

Самыми простыми и часто используемыми формами `mailto:` являются *subject*, *cc*, *bcc* и *body*; дальше прописываем адрес электронной почты. Например:

```html
<a href="mailto:nowhere@mozilla.org">Отправить письмо для nowhere</a>
```

В результате получим ссылку вида: Отправить письмо для nowhere.

Сам адрес электронной почты не является обязательным для заполнения. Если оставить это поле пустым (в поле `href` оставить только "mailto:"), откроется новое исходящее сообщение почтовой программой, в поле получателя будет пусто. Это можно использовать для кнопки "Поделиться".

### Особенности и детали

Помимо адреса электронной почты, вы можете предоставить другую информацию. Фактически, любые стандартные поля для отправки почты могут быть добавлены к указанному вами адресу `mailto`. Часто используемыми из них являются «subject», «cc» и «body» (которые не являются истинным полем заголовка, но позволяют указать дополнительную информацию для нового сообщения электронной почты). Каждое поле и его значение задаются в качестве условия запроса.

Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):

```html
<a
 href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email &body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>
```

**Примечание:** Значение каждого поля должно быть написано в URL-кодировке (то есть с непечатаемыми символами и пробелами percent-escaped). Обратите внимание на знак вопроса (?) для разделения основного адреса и дополнительных полей, амперсанд (&) для разделения каждого поля `mailto:` URL. Для этого используется стандартное описание URL запроса. Прочтите о методе GET, чтобы лучше понимать описание URL запроса.

Вот несколько примеров использования `mailto` URLs:

* mailto:
* mailto:nowhere@mozilla.org
* mailto:nowhere@mozilla.org,nobody@mozilla.org
* mailto:nowhere@mozilla.org?cc=nobody@mozilla.org
* mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject
Заключение
----------

Этой информации достаточно для создания ссылок! Вы вернётесь к ссылкам позже, когда начнёте изучать стили. Дальше вы рассмотрите семантику текста и более сложные и необычные возможности, которые будут полезны при создании контента сайта. В следующей главе будет рассматриваться продвинутое форматирование текста.

* Назад
* Обзор: Introduction to HTML
* Далее


Что внутри "head"? Метаданные в HTML - Изучение веб-разработки

Что внутри "head"? Метаданные в HTML
====================================

* Назад
* Обзор: Introduction to HTML
* Далее

Элемент head HTML-документа не отображается на странице в веб-браузере. Он содержит такую информацию, как:

* заголовок (title) страницы
* ссылки на файлы CSS (если вы хотите применить к вашему HTML стили CSS)
* ссылки на иконки
* другие метаданные (данные о HTML: автор и важные ключевые слова, описывающие документ.)

В этой статье мы рассмотрим всё вышеперечисленное и многое другое, чтобы дать вам хорошую основу для работы с разметкой.

| Предварительные требования: | Базовое знакомство с HTML , описанное в Начало работы с HTML. |
| --- | --- |
| Задача: | Узнать о заголовке HTML, его значении, важнейших элементах, которые содержатся в нём, и о том, как он может повлиять на HTML-документ. |

Что такое <head>?
-----------------

Давайте снова посмотрим на HTML-документ из прошлой статьи:

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Моя тестовая страница</title>
  </head>
  <body>
    <p>Это — моя страница</p>
  </body>
</html>
```

Содержимое `<head>`, в отличие от содержимого элемента `<body>`, не отображается на странице. Задача <head> — хранить метаданные документа. В приведённом выше примере <head> совсем небольшой:

```html
<head>
  <meta charset="utf-8" />
  <title>Моя тестовая страница</title>
</head>
```

Однако на больших страницах блок <head> может быть довольно объёмным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое <head> с помощью инструментов разработчика. Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнём.

Название страницы (title)
-------------------------

Мы уже видели, как работает элемент `<title>`: его используют для добавления заголовка (названия страницы) в документ. Элемент `<h1>` (en-US) тоже иногда называют заголовком страницы. Но это разные вещи!

* Элемент `<h1>` (en-US) виден на странице, открытой в браузере, — его используют **один раз на странице**, чтобы выделить название содержимого. Это может быть название истории, заголовок новости или что-то в этом роде.
* Элемент `<title>` — метаданные, название всего HTML-документа, а не заголовок внутри его содержимого.
### Активное изучение: разбор простого примера

1. Чтобы приступить к активному изучению, скачайте страницу title-example.html из нашего GitHub-репозитория. Это можно сделать двумя способами:
    1. Скопируйте и вставьте код страницы в новый текстовый файл в своём редакторе кода, затем сохраните его в любом удобном месте.
    2. Нажмите на странице кнопку "Raw", нажмите *Файл > Сохранить Как...* в меню браузера и выберите папку для сохранения.
2. Откройте файл в браузере. Вы увидите что-то вроде этого:

 ![A simple web page with the title set to 'title' element, and the 'h1' set to 'h1' element.](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/title-example.png)Теперь должно стать совершенно ясно, в чём разница между `<h1>` и `<title>`!
3. Откройте код страницы в редакторе, измените содержимое элементов и обновите страницу в браузере. Развлекайтесь!

Содержимое элемента `<title>` используется и в других местах. Например, при добавлении страницы в избранное (*Bookmarks > Bookmark This Page* в Firefox), текст из `<title>` предлагается в качестве названия закладки.

![A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the 'title' element ](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bookmark-example.png)

Текст из `<title>` также появляется в результатах поиска, как мы скоро увидим.

Метаданные: Элемент <meta>
--------------------------

Метаданные — данные, которые описывают данные. У HTML есть «официальное» место для метаданных документа — элемент `<meta>`. Конечно, другие вещи, о которых мы говорим в этой статье, тоже можно назвать метаданными. Существует множество разновидностей `<meta>`. Не станем пытаться охватить их все сразу — так недолго и запутаться, а рассмотрим несколько самых популярных, чтобы разобраться, что к чему.

### Указываем кодировку текста документа

В заголовке примера выше есть следующая строка:

```html
<meta charset="utf-8" />
```

В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . `utf-8` — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-страницах, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:

![a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/correct-encoding.png)Если использовать, скажем, кодировку `ISO-8859-1` (набор символов для латиницы), текст страницы испортится:

![a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bad-encoding.png)

**Примечание:** Некоторые браузеры (например, Chrome) автоматически исправляют неправильную кодировку, поэтому, в зависимости от используемого вами браузера, вы можете не увидеть эту проблему. Несмотря на это вам всё равно необходимо указывать кодировку UTF-8 для вашей страницы, чтобы избежать возможных проблем в других браузерах.

### Активное изучение: экспериментируем с символьными кодировками

Чтобы проверить это, вернитесь к HTML из примера `<title>` (странице title-example.html), поменяйте meta charset на `ISO-8859-1` и попробуйте написать что-нибудь на японском или русском. Вот текст из нашего примера (кстати, там написано *«рис горячий»*):

```html
<p>Пример на японском: ご飯が熱い。</p>
```

### Указываем автора и описание

У элементов `<meta>` часто есть атрибуты `name` и `content`:

* `name` — тип элемента, то есть какие именно метаданные он содержит.
* `content` — сами метаданные.

Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:

```html
<meta name="author" content="Крис Миллс" />
<meta
 name="description"
 content="Задача MDN — в том, чтобы обучить
новичков всему тому, что нужно им для разработки веб-сайтов и приложений." />
```

По указанному имени автора (author) можно найти человека, который написал страницу, и связаться с ним. Некоторые системы управления содержимым (CMS) автоматически обрабатывают эту информацию и делают её доступной для таких целей.

Краткое описание (description) содержимого страницы учитывается поисковыми системами при совпадении ключевых слов. Такое называют поисковой оптимизацией, или SEO.

### Активное изучение: как поисковые системы используют описание

Описание из `<meta name="description">` используется на страницах поисковой выдачи. Проведём небольшое исследование такого сценария.

1. Перейдите на главную страницу Mozilla Developer Network.
2. Откройте исходный код страницы (кликните правой кнопкой мыши и выберите *Просмотреть код* в контекстном меню.)
3. Найдите тег meta с описанием. Он выглядит так:

```html
<meta
 name="description"
 content="Веб-документация на MDN
предоставляет собой информацию об открытых веб-технологиях,
включая HTML, CSS и различные API для веб-сайтов и
прогрессивных веб-приложений. Также на сайте содержатся материалы
для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox." />
```

4. Теперь найдите "Mozilla Developer Network" в своём поисковике (мы использовали Google). Обратите внимание, что описание и название из `<meta>` и `<title>` используется в результатах поиска, — мы не зря указали их!

![Результат поиска в Google](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/updated_search_result__ru.jpg)

**Примечание:** Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через Google Search Console, чтобы пользователи могли сразу перейти к ним со страницы поиска.

**Примечание:** Многие типы `<meta>` больше не используются. Так, поисковые системы больше не используют данные из элемента `<meta type="keywords" content="ваши, ключевые, слова, введите, здесь">`, в котором указывали ключевые слова, по которым можно найти страницу: спамеры засовывали туда все слова, какие могли придумать, чтобы их сайты почаще появлялись в поиске.

### Другие виды метаданных

В сети вы найдёте также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определённым сайтам (например, социальных сетей) специальной информации, которую они могут использовать.

Например, Протокол Open Graph создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:

```html
<meta
 property="og:image"
 content="https://developer.mozilla.org/mdn-social-share.png" />
<meta
 property="og:description"
 content="Веб-документация на MDN предоставляет
собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов
и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких
продуктах Mozilla, как Инструменты разработчика Firefox." />
<meta property="og:title" content="MDN Web Docs" />
```

Один из результатов добавления этих метаданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия \_(User eXperience, UX)\_.

![Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/facebook-output.png)У Twitter также есть собственный формат метаданных, с помощью которого создаётся аналогичный эффект, при отображении URL сайта на twitter.com:

```html
<meta name="twitter:title" content="MDN Web Docs" />
```

Добавление иконок
-----------------

Чтобы добавить своему сайту узнаваемости, можно указать в метаданных разные иконки.

Favicon, один из старожилов интернета, стал первой из таких иконок. Браузеры показывают её в заголовке вкладки и в списке избранных страниц.
 ![The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bookmark-favicon.png)

Чтобы добавить на страницу favicon:

1. Сохраните изображение в формате `.ico` (многие браузеры поддерживают и в более привычных форматах, таких как `.gif` или `.png`) в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат `.ico`
2. Добавьте ссылку на иконку в `<head>` документа:

```html
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
```

Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:

```html
<!-- Для iPad 3 с Retina-экраном высокого разрешения: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="144x144"
 href="https://developer.mozilla.org/static/img/favicon144.png" />
<!-- Для iPhone с Retina-экраном высокого разрешения: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="114x114"
 href="https://developer.mozilla.org/static/img/favicon114.png" />
<!-- Для iPad первого и второго поколения: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="72x72"
 href="https://developer.mozilla.org/static/img/favicon72.png" />
<!-- Для iPhone, iPod Touch без Retina и устройств с Android 2.1+: -->
<link
 rel="apple-touch-icon-precomposed"
 href="https://developer.mozilla.org/static/img/favicon57.png" />
<!-- Для других случаев - обычный favicon -->
<link
 rel="shortcut icon"
 href="https://developer.mozilla.org/static/img/favicon32.png" />
```

В комментариях указано, для чего используется каждая иконка — например, при добавлении страницы на домашний экран iPad будет использована иконка в высоком разрешении.

Не беспокойтесь о реализации всех этих типов значков — это довольно продвинутая функция, и мы не станем возвращаться к ней в курсе. Основная цель — показать вам, что это такое, если вы столкнётесь с ними при просмотре исходного кода других веб-сайтов.

Подключение CSS и JavaScript
----------------------------

Современные сайты используют CSS, чтобы выглядеть привлекательнее, и добавляют интерактивные функции через JavaScript: видеоплееры, карты, игры. Обычно связанные стили добавляют на страницу через элемент `<link>`, а скрипты — через элемент `<script>` .

* Элемент `<link>` помещают в заголовок документа. У него есть два атрибута: `rel="stylesheet"` показывает, что мы указываем *стиль* документа, а в `href` указан путь к файлу:

```html
<link rel="stylesheet" href="my-css-file.css" />
```

* Элемент `<script>` не обязательно находится в заголовке — на самом деле лучше поместить его в самом конце страницы, прямо перед закрывающем тегом `</body>`. Так браузер сначала отобразит саму страницу, а уже затем загрузит и запустит скрипт — иначе скрипт может обратиться к ещё не созданному элементу страницы и сломаться.

```html
<script src="my-js-file.js"></script>
```

**Примечание**: Элемент `<script>` кажется пустым, но это не всегда так, и указывать закрывающий тег обязательно. Вместо того чтобы ссылаться на внешний скрипт, код можно писать прямо внутри этого элемента — так можно не тратить время на загрузку отдельного скрипта, но зато не выйдет сослаться на один js-файл с нескольких страниц.
### Активное изучение: добавляем на страницу CSS и JavaScript

1. Для этого упражнения скачайте файлы meta-example.html, script.js и style.css и положите их в одну папку на своём компьютере. Проверьте, что они сохранились с правильными именами и расширениями.
2. Откройте HTML в браузере и текстовом редакторе.
3. Следуя изученному материалу, добавьте на страницу скрипт и стиль с помощью элементов `<link>` и `<script>`.

Если всё получилось, когда вы сохраните HTML и обновите страницу в браузере, вы увидите кое-что новенькое:

![Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/js-and-css.png)

* JavaScript добавил на страницу пустой список. При нажатии на красную область появляется окно, в которое можно ввести текст нового пункта списка. При нажатии на кнопку OK пункт добавляется на страницу. Текст существующих пунктов списка можно редактировать, нажимая на них.
* CSS покрасил фон зелёным и увеличил размер шрифта, а также стилизовал элементы, добавленные JavaScript. Красный прямоугольник и рамка вокруг списка — тоже его рук дело.

**Примечание:** Если вам никак не удаётся подключить CSS или JS, посмотрите на наш готовый пример — страницу css-and-js.html.

Основной язык HTML страницы
---------------------------

Наконец, стоит отметить, что вы можете (и действительно должны) установить язык для своей страницы. Это можно сделать, добавив атрибут lang в открывающий HTML-тег (как в примере meta-example.html: и как показано ниже):
```

<html lang="en-US">
```

```
<html lang="ru">
```

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

Можно также указать язык для части документа. Например, мы могли бы установить язык для части страницы на японском:

```html
<p>Пример на японском: <span lang="ja">ご飯が熱い。</span>.</p>
```

Коды языков определены в стандарте ISO 639-1. Подробнее о работе с языками можно узнать в Языковые тэги в HTML и XML.

Заключение
----------

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

* Назад
* Обзор: Introduction to HTML
* Далее


Продвинутое форматирование текста - Изучение веб-разработки

Продвинутое форматирование текста
=================================

* Назад
* Обзор: Introduction to HTML
* Далее

В HTML для форматирования текста есть много других элементов, не рассмотренных в статье Основы редактирования текста в HTML. Элементы, описанные в этой статье, не так часто используются, но всё же полезны для понимания (и это всё ещё будет не полный список элементов). Здесь вы узнаете о цитатах, списках описания, компьютерном коде и другом виде текстовых элементов, подстрочном и надстрочном тексте, контактной информации и других типах текста.

| Предварительные требования: | Базовое знакомство с HTML, раскрытое в Начало работы с HTML. Форматирование текста с помощью HTML, описанное в статье Основы редактирования текста в HTML. |
| --- | --- |
| Задача: | Научиться использовать менее известные HTML-элементы для продвинутой семантической разметки текста. |

Списки описания
---------------

В основах HTML-текста мы рассмотрели, как пометить привычные типы списков в HTML, но мы не упоминали о третьем типе списка, с которым вы иногда сталкиваетесь, — списке описания. Цель этих списков состоит в том, чтобы пометить набор элементов и их связанных описаний, таких как термины и определения или вопросы и ответы.

Давайте рассмотрим пример набора терминов и определений:
```

Солилоквий
Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).
Монолог
Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.
Ремарка
В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.
```

В списках описания используется иная оболочка, чем в других типах списков — `<dl>` (от *description list*); кроме того, каждый термин завёрнут в элемент `<dt>` (*description term* — термин для описания) и каждое определение завёрнуто в элемент `<dd>` (*description definition* — описание определения).

Закончим разметку нашего примера:

```html
<dl>
  <dt>Солилоквий</dt>
  <dd>
    Драматическая речь, в которой персонаж разговаривает сам с собой, передавая
    свои ощущения и мысли публике (но не другим персонажам).
  </dd>
  <dt>Монолог</dt>
  <dd>
    Драматическая речь, в которой персонаж передаёт свои мысли публике и
    некоторым персонажам.
  </dd>
  <dt>Ремарка</dt>
  <dd>
    В драме: речь персонажа, при которой делается замечание с юмористическим или
    драматическим эффектом; чаще всего это чувства, мысли или предпосылки к
    чему-либо.
  </dd>
</dl>
```

В стилях браузера по умолчанию будут отображаться списки описания с некоторыми отступами от терминов. Стили, определённые на MDN, довольно близки к этому соглашению, но также вносят некоторые изменения:

Солилоквий

Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).

Монолог

Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.

Ремарка

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

Заметьте, что разрешено давать одному элементу несколько описаний:

Ремарка

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

В письменности: отметка, примечание (*устар.*).

### Активное обучение: разметка набора определений

Пришло время попробовать свои силы в списках описания: добавьте элементы в исходный текст в поле Ввод, чтобы он отображался как список описания в поле *Вывод*. Вы можете попробовать использовать свои собственные термины и описания, если хотите.

Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой *Сбросить*. Если упражнение вызывает у вас затруднения, то нажмите кнопку *Показать решение*, чтобы увидеть правильный ответ.
```

<h2>Результат</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Редактируемый код</h2>
<p class="a11y-label">
  Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).
</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
Бекон
Скрепляет мир вокруг.
Яйца
Скрепляют пироги вокруг.
Кофе
Рычаг, движущий планетами.
Светло-коричневого цвета.</textarea
>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить" />
  <input id="solution" type="button" value="Показать решение" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var solution = document.getElementById("solution");
var output = document.querySelector(".output");
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Показать решение";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Показать решение") {
    textarea.value = solutionEntry;
    solution.value = "Спрятать решение";
  } else {
    textarea.value = userEntry;
    solution.value = "Показать решение";
  }
  updateCode();
});

var htmlSolution =
  "<dl>\n <dt>Бекон</dt>\n <dd>Скрепляет мир вокруг.</dd>\n <dt>Яйца</dt>\n <dd>Скрепляют пироги вокруг.</dd>\n <dt>Кофе</dt>\n <dd>Рычаг, движущий планетами.</dd>\n <dd>Светло-коричневого цвета.</dd>\n</dl>";
var solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Показать решение") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

Цитаты
------

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

### Блочные цитаты

Если часть содержимого уровня блока (будь то абзац, несколько абзацев, список и т. д.) цитируется из другого источника, вы должны обернуть её внутри элемента `<blockquote>`, чтобы обозначить это, и указать URL-адрес, указывающий на источник цитаты, внутри атрибута `cite`.

Например, следующая разметка берётся из страницы элемента MDN **`<blockquote>`**:

```html
<p>
  <strong>HTML-элемент<code><blockquote></code></strong> (от англ.
  <em>HTML Block Quotation Element</em>) указывает на то, что заключённый в нём
  текст является развёрнутой цитатой.
</p>
```

Чтобы превратить её в блочную цитату, мы просто делаем следующее:

```html
<blockquote
 cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote">
  <p>
    <strong>HTML-элемент<code><blockquote></code></strong> (от англ.
    <em>HTML Block Quotation Element</em>) указывает на то, что заключённый в
    нём текст является развёрнутой цитатой.
  </p>
</blockquote>
```

Стиль браузера по умолчанию будет отображать это как абзац с отступом, как индикатор того, что это цитата; абзац над цитатой призван продемонстрировать это. MDN делает это, но также добавляет некоторый дополнительный стиль:

>
> **HTML-элемент <blockquote>** (от англ. *Block Quotation*) указывает на то, что заключённый в нём текст является развёрнутой цитатой.
>
>
>

### Строчные цитаты

Строчные цитаты работают точно так же, за исключением того, что они используют элемент `<q>` (en-US). Например, следующий кусочек разметки содержит цитату из страницы `<q>` MDN:

```html
<p>
  Элемент цитирования — <code><q></code> —
  <q cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/q"
 >предназначен для коротких цитат, не требующих прерывания абзаца</q
 >.
</p>
```

Стиль браузера по умолчанию будет отображать это как обычный текст, заключённый в кавычки для обозначения цитаты, например:

Элемент цитирования — `<q>` — "предназначен для коротких цитат, не требующих прерывания абзаца".

### Цитирование

Содержание атрибута `cite` выглядит полезным, но, к сожалению, браузерам, программам чтения с экрана и т. д. оно на самом деле мало чем помогает. Невозможно заставить браузер отображать содержимое атрибута `cite` без написания собственного решения с использованием JavaScript или CSS. Если вы хотите, чтобы источник цитирования был доступен на странице, лучший способ его разметки - поместить элемент `<cite>` рядом с элементом цитаты (или внутри него). Это действительно будет означать то, что имя источника цитаты — то есть имя книги или имя человека, которое произвело цитату, — будет включено в текст. Нет причин, по которым вы не могли бы связать текст внутри `<cite>` с источником цитаты:

```html
<p>
  Как указано в статье о
  <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote">
    <cite>блочных цитатах</cite></a
 >:
</p>

<blockquote
 cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote">
  <p>
    <strong>HTML-элемент<code><blockquote></code></strong> (от англ.
    <em>HTML Block Quotation Element</em>) указывает на то, что заключённый в
    нем текст является развёрнутой цитатой.
  </p>
</blockquote>

<p>
  Элемент цитирования — <code><q></code> —
  <q cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/q"
 >предназначен для коротких цитат, не требующих прерывания абзаца</q
 >. --
  <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/q">
    <cite>Строчные цитаты</cite></a
 >.
</p>
```

По умолчанию цитаты стилизованы курсивом. Этот код можно увидеть в нашем примере quotations.html

### Активное обучение: кто это сказал?

Время для другого примера активного обучения! В этом примере мы хотели бы, чтобы вы совершили следующие действия:

1. Преобразуйте средний абзац в блочную цитату (`<blockquote>`), который включает атрибут `cite`.
2. Заверните часть третьего абзаца в строчную цитату, которая включает атрибут `cite`.
3. Включите элемент `<cite>` для каждой ссылки.

Источники цитирования, которые вам потребуются:

* http://www.brainyquote.com/quotes/authors/c/confucius — HTML-страница с цитатами Конфуция
* https://www.affirmationsforpositivethinking — HTML-страница *The Need To Eliminate Negative Self Talk*.

Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой *Сбросить*. Если упражнение вызывает у вас затруднения, то нажмите кнопку *Показать решение*, чтобы увидеть правильный ответ.
```

<h2>Результат</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Редактируемый код</h2>
<p class="a11y-label">
  Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).
</p>

<textarea id="code" class="input" style="min-height: 150px; width: 95%">
<p>Здравствуйте и добро пожаловать на мою страницу мотивации! Конфуций как-то сказал:</p>
<p>Не важно, с какой скоростью ты движешься к своей цели, — главное не останавливаться.</p>
<p>Мне также нравится концепция позитивного мышления, и я считаю, каждый ощущает Необходимость избавления от негативного внутреннего разговора (как сказано в зарубежной статье Affirmations for Positive Thinking.)</p>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить" />
  <input id="solution" type="button" value="Показать решение" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var solution = document.getElementById("solution");
var output = document.querySelector(".output");
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Показать решение";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Показать решение") {
    textarea.value = solutionEntry;
    solution.value = "Спрятать решение";
  } else {
    textarea.value = userEntry;
    solution.value = "Показать решение";
  }
  updateCode();
});

var htmlSolution =
  '<p>Здравствуйте и добро пожаловать на мою страницу мотивации! <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Конфуций</cite></a> как-то сказал:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>Не важно, с какой скоростью ты движешься к своей цели, — главное не останавливаться.</p>\n</blockquote>\n\n<p>Мне также нравится концепция позитивного мышления, и я считаю, каждый ощущает <q cite="http://www.affirmationsforpositivethinking.com/index.htm">Необходимость избавления от негативного внутреннего разговора</q> (как сказано в зарубежной статье <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>';
var solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Показать решение") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

Аббревиатуры
------------

Другой довольно часто встречающийся элемент, который вы будете часто встречать в Интернете, — это `<abbr>`, используемый для обёртывания аббревиатур или акронимов и обеспечивающий полную расшифровку сокращения (с помощью атрибута `title`.)

Давайте рассмотрим несколько примеров:
```

<p>Мы используем <abbr title="Hypertext Markup Language">HTML</abbr> для структурирования наших веб-документов.</p>

<p>Я думаю, <abbr title="Почтенный">Почт.</abbr> Грин сделал это на кухне с бензопилой.</p>
```

Они будут выглядеть примерно так (расшифровка появится в подсказке при наведении курсора мыши на сокращение):

Мы используем HTML для структурирования наших веб-документов.

Я думаю, Почт. Грин сделал это на кухне с бензопилой.

**Примечание:** Существует ещё один элемент `<acronym>`, который в основном делает то же самое, что и `<abbr>`, но предназначен специально для акронимов (тип аббревиатур). Это, однако, было излишним, — он не поддерживается в браузерах на том же уровне, что `<abbr>`, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте `<abbr>`.

### Активное обучение: выделение аббревиатуры

В рамках этого простого упражнения мы хотели бы, чтобы вы просто указали аббревиатуру. Вы можете использовать наш образец ниже или заменить его на свой собственный.
```

<h2>Результат</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Редактируемый код</h2>
<p class="a11y-label">
  Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).
</p>

<textarea id="code" class="input" style="min-height: 50px; width: 95%">
<p>Безусловно, NASA занимается классными вещами.</p>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить" />
  <input id="solution" type="button" value="Показать решение" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var solution = document.getElementById("solution");
var output = document.querySelector(".output");
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Показать решение";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Показать решение") {
    textarea.value = solutionEntry;
    solution.value = "Спрятать решение";
  } else {
    textarea.value = userEntry;
    solution.value = "Показать решение";
  }
  updateCode();
});

var htmlSolution =
  '<p>Безусловно, <abbr title="National Aeronautics and Space Administration">NASA</abbr> занимается классными вещами.</p>';
var solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Показать решение") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

Разметка контактных данных
--------------------------

HTML имеет элемент для разметки контактных данных — `<address>`. Он просто обёртывает ваши контактные данные, например:

```html
<address>
  <p>Крис Миллс, Манчестер, Жестокий Север, РФ</p>
</address>
```

Однако следует помнить, что элемент `<address>` предназначен для разметки контактных данных человека, который написал HTML-документ, а не *любого* адреса. Таким образом, написанное выше было бы корректным только в том случае, если бы Крис написал документ, на котором появляется разметка. Обратите внимание, что следующее также подойдёт:

```html
<address>
  <p>Автор страницы — <a href="../authors/chris-mills/">Крис Миллс</a>.</p>
</address>
```

Верхний и нижний индекс
-----------------------

Иногда вам понадобится использовать надстрочный или подстрочный индекс при разметке таких вещей, как даты, химические формулы и математические уравнения, чтобы они имели правильное представление. Элементы `<sup>` (en-US) и `<sub>` (en-US) созданы для таких ситуаций.

Приведём пример:

```html
<p>Я просыпаюсь в 6<sup>35</sup> часов утра.</p>
<p>
  Химическая формула кофеина:
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.
</p>
<p>Если x<sup>2</sup> равно 9, x должен равняться 3 или -3.</p>
```

Результат этого кода выглядит следующим образом:

Я просыпаюсь в 635 часов утра.

Химическая формула кофеина: C8H10N4O2.

Если x2 равно 9, x должен равняться 3 или -3.

Представление компьютерного кода
--------------------------------

Существует несколько элементов для маркировки компьютерного кода с использованием HTML:

* `<code>`: Для разметки общих частей компьютерного кода.
* `<pre>`: Для сохранения пробелов (как правило, кодовых блоков) — если вы используете отступы или лишние пробелы внутри вашего текста, браузеры будут игнорировать его, и вы не увидите его на вашей отображаемой странице; если вы поместите текст в теги `<pre></pre>`, то ваши пробелы будут отображаться идентично тому, как вы видите текст в редакторе.
* `<var>` (en-US): Для конкретной маркировки имён переменных.
* `<kbd>`: Для маркировки ввода с клавиатуры (и других типов).
* `<samp>` (en-US): Для маркировки вывода компьютерной программы.

Давайте рассмотрим несколько примеров. Вы должны попробовать поиграть с ними (захватите копию нашего файла other-semantics.html):

```html
<pre><code>var para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}</code></pre>

<p>
  You shouldn't use presentational elements like <code><font></code> and
  <code><center></code>.
</p>

<p>
  In the above JavaScript example, <var>para</var> represents a paragraph
  element.
</p>

<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
```

Вышеприведённый код будет выглядеть так:

Разметка времени и даты
-----------------------

HTML также содержит элемент `<time>` для отметки времени и дат в машиночитаемом формате. Например:

```html
<time datetime="2020-01-20">20 Января 2020</time>
```

Почему это полезно? Ну, есть много разных способов, которыми люди записывают даты. Вышеуказанная дата может быть записана как:

* 20 Января 2020
* 20-ое Января 2020
* Янв 20 2020
* 20/01/20
* 01/20/20
* 20e Janvier 2020
* 2020 年 1 月 20 日
* и другое...

Но эти разные формы не могут быть легко распознаны компьютерами — что, если вы хотите автоматически захватить даты всех событий на странице и вставить их в календарь? Элемент `<time>` позволяет прикрепить к этой цели однозначное машиночитаемое время / дату.

В приведённом выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:

```html
<!-- Стандартная дата -->
<time datetime="2020-01-20">20 Января 2020</time>
<!-- Только год и месяц -->
<time datetime="2020-01">Январь 2020</time>
<!-- Только месяц и день -->
<time datetime="01-20">20 Января</time>
<!-- Только время, часы и минуты -->
<time datetime="19:30">19:30</time>
<!-- Также вы можете отобразить секунды и миллисекунды! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Дата и время -->
<time datetime="2020-01-20T19:30">7.30pm, 20 Января 2020</time>
<!-- Дата и время со смещением по часовому поясу -->
<time datetime="2020-01-20T19:30+01:00"
 >7.30pm, 20 Января 2020, — это 8.30pm во Франции.</time
>
<!-- Вызов номера недели -->
<time datetime="2020-W04">Четвёртая неделя 2020</time>
```

Заключение
----------

На этом мы подошли к концу нашего изучения семантики текста HTML. Имейте в виду, что то, что вы видели во время этого курса, не является исчерпывающим списком текстовых элементов HTML. Мы попытались охватить основные из них, с которыми вы, скорее всего, столкнётесь в практической деятельности или, по крайней мере, сочтёте их интересными. Чтобы найти больше элементов HTML, вы можете взглянуть на нашу ссылку на Элемент. В следующей статье мы рассмотрим элементы HTML, которые вы будете использовать для структурирования различных частей HTML-документа.

* Назад
* Обзор: Introduction to HTML
* Далее


Структурируем страницу - Изучение веб-разработки

Структурируем страницу
======================

* Назад
* Обзор: Introduction to HTML

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

| Что нужно знать: | Вам понадобятся навыки из всего курса. Особое внимание уделите разделу Структура документа и веб-сайта. |
| --- | --- |
| Цель: | Проверить знания структуры веб-страницы и её перевода в разметку. |

Отправная точка
---------------

Чтобы начать это, вы должны перейти и скачать архив содержащий все начальные активы. Архив содержит:

* HTML, где вам нужно добавить структурную разметку.
* CSS для стилизации вашей разметки.
* Изображения, которые используются на странице.

Создайте пример на вашем локальном компьютере или, альтернативно, используйте сайт, например JSBin или Thimble для исследования.

Краткое описание проекта
------------------------

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

* Заголовок, охватывающий всю ширину сайта, содержащий основное название страницы, логотип сайта и меню навигации. Заголовок и логотип появляются рядом друг с другом, когда применяется стилизация, и навигация появляется ниже этих двух элементов.
* Основная область содержимого, содержащая два столбца - основной блок, содержащий текст приветствия, и боковую панель для размещения миниатюр изображений.
* Нижний колонтитул, содержащий информацию об авторских правах и разработчиках.

Вам необходимо добавить подходящую обёртку для:

* Заголовка
* Меню навигации
* Основного содержимого
* Приветственного текста
* Боковой панели изображения
* Нижнего колонтитула

Вы также должны:

* Примените предоставленный CSS к странице, добавив ещё один элемент `<link>` чуть ниже существующего, указанного в начале.
Советы и подсказки
------------------

* Используйте W3C HTML validator для проверки вашего HTML; вы получите бонусные баллы, если он будет проверять как можно больше (строка «googleapis» используется для импорта пользовательских шрифтов на страницу из службы Google Fonts, она не проверяет, но не беспокойтесь об этом слишком много - валидатор - полезный инструмент, но 100% проверка является идеальной, а не полностью необходимой).
* Вам не нужно знать CSS, чтобы сделать эту оценку; вам просто нужно поместить предоставленный CSS внутри HTML-элемента.
* Предоставленный CSS разработан таким образом, что при добавлении правильных структурных элементов в разметку они будут отображаться зелёными на отображаемой странице.
* Если вы застряли и не можете понять, какие элементы куда помещать, часто помогает вывести простую блок-схему макета страницы и сделать надписи на элементах, которые, по вашему мнению, должны обернуть каждый блок.
Пример
------

Следующий скриншот показывает пример того, как может выглядеть домашняя страница после маркировки.

![The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message](/ru/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content/example-page.png)

Оценивание
----------

Если вам дали это задание на каком-то курсе, просто передайте свою страницу для проверки преподавателю. Если вы учитесь сами, обратитесь на форум, задав тему обсуждения этого упражнения, или в IRC-канале #mdn в IRC Mozilla, или в IRC-канале #mdn в IRC Mozilla. Попробуйте выполнить задание сами, ведь вам некого обманывать, кроме себя самого!

* Назад
* Обзор: Introduction to HTML


Структура документа и веб-сайта - Изучение веб-разработки

Структура документа и веб-сайта
===============================

* Назад
* Обзор: Introduction to HTML
* Далее

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

| Необходимые знания: | Базовое знакомство с HTML, описано в разделе Начало работы с HTML. Форматирование текста в HTML, описано в разделе Основы текста в HTML. Как работают гиперссылки, описано в разделе Создание гиперссылок. |
| --- | --- |
| Задача: | Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта. |

Основные составляющие документа
-------------------------------

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

Заголовок (колонтитул)

Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.

Навигационное меню

Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остаётся неизменной на всех страницах сайта — наличие непоследовательной навигации на вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает доступность, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.

Основное содержимое

Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определённо будет меняться от страницы к странице!

Боковая панель

Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьёй, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.

Нижний колонтитул (футер)

Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для SEO целей, предоставляя ссылки для быстрого доступа к популярному контенту.

"Типичный веб-сайт" может быть структурирован примерно так:

![](/ru/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/sample_website__ru.png)

HTML для структурирования содержимого
-------------------------------------

Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею вы поняли. С правильным CSS вы могли бы использовать практически любые элементы для обёртывания различных разделов и стилизовать их так, как вам хочется, но, как обсуждалось ранее, нам нужно уважать семантику и **использовать правильный элемент для правильной работы**.

Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчёт людей со слабым зрением, к примеру, для которых концепция "розового" и "большого шрифта" не будет полезной?

**Примечание:** Люди с дальтонизмом составляют около 8% мирового населения. Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было 285 миллионов таких людей, а общая численность населения составляла около 7 миллиардов).

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

Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:

* **Заголовок:** `<header>`.
* **Навигационное меню:** `<nav>`.
* **Основное содержимое:** `<main>`, с различными подразделами содержимого, представленными элементами `<article>`, `<section>` и `<div>`.
* **Боковая панель:** `<aside>`, обычно располагается внутри `<main>`.
* **Нижний колонтитул:** `<footer>`.
### Активное обучение: исследование кода для нашего примера

Наш пример, представленный выше, содержит следующий код (Вы также можете найти пример в нашем репозитории Github). Мы хотели бы, чтобы вы взглянули на приведённый выше пример, а затем просмотрели код ниже, чтобы узнать, из каких частей он состоит.

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Заголовок моей страницы</title>
    <link
 href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
 rel="stylesheet"
 type="text/css" />
    <link rel="stylesheet" href="style.css" />

    <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer-->
    <!--[if lt IE 9]>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
 <![endif]-->
  </head>

  <body>
    <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта -->

    <header>
      <h1>Заголовок</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Домашняя страница</a></li>
        <li><a href="#">Наша команда</a></li>
        <li><a href="#">Проекты</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>

      <!-- Форма поиска — это ещё один распространённый нелинейный способ навигации по веб-сайту. -->

      <form>
        <input type="search" name="q" placeholder="Search query" />
        <input type="submit" value="Go!" />
      </form>
    </nav>

    <!-- Здесь основное содержимое нашей страницы -->
    <main>
      <!-- Она содержит статью -->
      <article>
        <h2>Заголовок статьи</h2>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
          lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam
          viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent
          et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt
          congue enim, ut porta lorem lacinia consectetur.
        </p>

        <h3>Подраздел</h3>

        <p>
          Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum
          dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem.
          Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.
        </p>

        <p>
          Pelientesque auctor nisi id magna consequat sagittis. Curabitur
          dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet.
          Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.
        </p>

        <h3>Ещё один подраздел</h3>

        <p>
          Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum
          soclis natoque penatibus et manis dis parturient montes, nascetur
          ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem
          facilisis semper ac in est.
        </p>

        <p>
          Vivamus fermentum semper porta. Nunc diam velit, adipscing ut
          tristique vitae sagittis vel odio. Maecenas convallis ullamcorper
          ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi
          diam iaculis velit, is fringille sem nunc vet mi.
        </p>
      </article>

      <!-- Дополнительный контент также может быть вложен в основной контент -->
      <aside>
        <h2>Связанные темы</h2>

        <ul>
          <li><a href="#">Мне нравится стоять рядом с берегом моря</a></li>
          <li><a href="#">>Мне нравится стоять рядом с морем</a></li>
          <li><a href="#">Даже на севере Англии</a></li>
          <li><a href="#">Здесь не перестаёт дождь</a></li>
          <li><a href="#">Лаааадно...</a></li>
        </ul>
      </aside>
    </main>

    <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта -->

    <footer>
      <p>©Авторские права никому не принадлежат, 2050. Все права защищены.</p>
    </footer>
  </body>
</html>
```

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

Подробнее об элементах HTML макета
----------------------------------

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

* `<main>` предназначен для содержимого, *уникального для этой страницы*. Используйте `<main>` только *один* раз на странице и размещайте прямо внутри `<body>`. В идеале он не должен быть вложен в другие элементы.
* `<article>` окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге).
* `<section>` подобен `<article>`, но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с заголовка. Также обратите внимание, что в зависимости от контекста вы можете разбить `<article>` на несколько `<section>` или, наоборот, `<section>` на несколько `<article>`.
* `<aside>` содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т. д.).
* `<header>` представляет собой группу вводного содержимого. Если он дочерний элемент `<body>`, то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент `<article>` или `<section>`, то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с titles и headings).
* `<nav>` содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и / или название сайта или компании. Вторичные ссылки и т. д. не входят в навигацию.
* `<footer>` представляет собой группу конечного контента для страницы.
### Несемантические обёртки

Иногда вы будете сталкиваться с ситуацией, когда вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, CSS или JavaScript. Для таких случаев в HTML есть элементы `<div>` и `<span>`. Вам следует использовать их с подходящим значением атрибута `class` или `id`, чтобы можно было легко получить к ним доступ.

`<span>` — это строчный несемантический элемент, который стоит использовать только если вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения. Например:

```html
<p>
  Пьяный Король возвратился в свою комнату в 01:00 и всё никак не мог войти в
  дверь: хмель мешал
  <span class="editor-note"
 >[Примечание редактора: В этот момент свет на сцене должен быть
    приглушён]</span
 >.
</p>
```

В этом примере примечание редактора просто сообщает дополнительные пожелания режиссёру пьесы. В нем нет особого семантического значения. Для слабовидящих пользователей, возможно, примечание будет отделено от основного содержимого с помощью CSS.

`<div>` — это блочный несемантический элемент, который следует использовать только если вы не можете подобрать более подходящий семантический блочный элемент или если не хотите добавлять какие-либо конкретные значения. Например, представьте виджет корзины в интернет-магазине, который вы можете открыть в любой момент нахождения на сайте:

```html
<div class="shopping-cart">
  <h2>Корзина</h2>
  <ul>
    <li>
      <p>
        <a href=""><strong>Silver earrings</strong></a
 >: $99.95.
      </p>
      <img src="../products/3333-0985/thumb.png" alt="Серебряные серьги" />
    </li>
    <li>...</li>
  </ul>
  <p>Итого: $237.89</p>
</div>
```

Ему не подходит `<aside>`, поскольку это не обязательно относится к основному содержимому страницы (Вы хотите, чтобы его можно было просматривать из любого места). Также не подходит и `<section>`, т. к. это не часть основного содержимого страницы. Поэтому `<div>` подходит в этом случае. Мы включили заголовок в качестве указателя, чтобы помочь пользователям программ чтения с экрана в его поиске.

**Предупреждение:** **Внимание**: `div` настолько просто использовать, что легко переборщить. Поскольку они не несут никакого семантического значения, они просто загромождают ваш HTML-код. Старайтесь использовать их только тогда, когда нет лучшего семантического решения, и постарайтесь свести их использование к минимуму, иначе вам будет трудно обновлять и поддерживать ваши документы.

### Перенос строки и горизонтальный разделитель

Два элемента, которые вы будете периодически использовать или захотите узнать о них: `<br>` и `<hr>`:

`<br>` создаёт разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:

```html
<p>
  Жила-была девчушка Нелл,<br />
  Любившая писать HTML:<br />
  Её семантика ужасна была — <br />
  Она и сама прочитать ничего не могла.
</p>
```

Без элемента `<br>` абзац разместится в одну длинную линию (как было сказано ранее, HTML игнорирует переносы строк), а с ним в коде — разметка будет выглядеть следующим образом:

 Жила-была девчушка Нелл,
 Любившая писать HTML:
 Её семантика ужасна была —
 Она и сама прочитать ничего не могла.

`<hr>` создаёт горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:
```

<p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p>
<hr>
<p>Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".</p>
```

Будет выглядеть примерно так:

Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.

---

Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".

Планирование простого веб-сайта
-------------------------------

Когда вы уже спланировали содержание одной веб-страницы, следующий логический шаг — продумать содержание всего веб-сайта: какие страницы нужны, как они будут устроены и связаны друг с другом для лучшего восприятия пользователем. Это называется Information architecture. В большом, сложном веб-сайте на планирование может уходить много времени, однако спроектировать простой веб-сайт из нескольких страниц может быть очень легко и весело!

1. Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц.
 ![the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy](/ru/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/common-features.png)
2. Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведённый раннее). Что находится в этих блоках?
 ![A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer](/ru/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/site-structure.png)
3. Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.
 ![A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info](/ru/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/feature-list.png)
4. Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод Card sorting.
 ![The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things](/ru/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/card-sorting.png)
5. Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.

![A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page](/ru/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/site-map.png)

### Самостоятельная работа: создайте свою собственную карту сайта

Применить наш метод к своему сайту. О чем он будет?

**Примечание:** Сохраните свой код, он вам ещё понадобится.

Заключение
----------

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

Дополнительные материалы
------------------------

* Using HTML sections and outlines (en-US): Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5.
* Назад
* Обзор: Introduction to HTML
* Далее