Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы возможно слышали, а также об их роли в языке. Мы также покажем как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!

Необходимые знания: Умение работать с компьютером, наличие необходимого ПО, базовые знания о работе с файлами.
Цель: Познакомиться с языком HTML и научиться описывать некоторые его элементы.

Что такое HTML?

HTML (HyperText Markup Language - язык гипертекстовой разметки) —  не является языком программирования; это язык разметки, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда элементов, которые вы используете для того, чтобы охватить, обернуть или разметить различные части содержимого, чтобы оно имело определенный вид или срабатывало определенным способом. Встроенные теги могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее.  Например, рассмотрим следующую строку:

My cat is very grumpy

Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как "параграф", заключив её в теги элемента "параграф" <p></p>, например:

<p>My cat is very grumpy</p>

Структура HTML элементов

Давайте рассмотрим элемент  "параграф" чуть подробнее:

Основными частями элемента являются:

  1. Открывающий тег: Он состоит из названия (обозначения) элемента (в нашем случае, p), помещённого внутри угловых скобок. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое.
  2. Закрывающий тег: выглядит как и открывающий, но содержит слэш перед названием тега. Он служит признаком конца элемента. Пропуски закрывающих тегов — типичная ошибка новичков, которая может приводить к неопределённым результатам — в лучшем случае всё сработает правильно, в других страница может вовсе не прорисоваться или прорисоваться не как ожидалось (например).
  3. Содержимое: Как видно, в нашем случае содержимым является простой текст.
  4. Элемент: открывающий тег + закрывающий тег + содержимое = элемент.

Активное изучение: создание вашего первого HTML элемента

Отредактируйте строку текста ниже в поле Ввод, обернув ее тегами <em> и </em> (вставьте <em> перед строкой, чтобы указать начало элемента, и </em> после нее, чтобы указать конец элемента) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле Вывод.

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

Вложенные элементы

Вы также можете вкладывать элементы внутрь других элементов — это называется вложенностью. Если мы хотим подчеркнуть, что наш кот очень грустный, мы можем заключить слово "very" в <strong> элемент, который означает, что это слово крайне важно в данном контексте:

<p>My cat is <strong>very</strong> grumpy.</p>

Вы так же должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем p элемент первым, затем strong элемент, затем мы закрываем strong элемент первым, затем p. Следующее не правильно:

<p>My cat is <strong>very grumpy.</p></strong>

Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!

Блочные и строчные элементы

Существует две важных категории элементов в HTML, которые вам стоит знать — элементы блочного уровня и строчные элементы.

  • Элементы блочного уровня формируют видимый блок на странице — они окажутся на новой строке после любого контента, который шел до них, и любой контент после них также окажется на новой строке. Чаще всего элементами блочного уровня бывают структурные элементы страницы, представляющие собой, например, параграфы (абзацы), списки, меню навигации, подвалы, и т. п. Элементы блочного уровня не вкладываются в строчные элементы, но иногда могут вкладываться в другие элементы блочного уровня.
  • Строчные элементы — это те, которые содержатся в элементах блочного уровня и окружают только малые части содержимого документа, не целые абзацы и групировки контента. Строчные элементы не приводят к появлению новой строки в документе: они обычно встречаются внутри абзаца текста, например, элемент <a> (ссылка) или акцентирующие элементы вроде <em> или <strong>.

Посмотрите на следующий пример:

<em>Первый</em><em>второй</em><em>третий</em>

<p>четвертый</p><p>пятый</p><p>шестой</p>

<em> — это строчный элемент, так что, как вы здесь видите, первые три элемента находятся на одной строке друг с другом без пробелов между ними. С другой стороны, <p> — это элемент блочного уровня, так что каждый элемент находится на новой строке, с пространством выше и ниже каждого (этот интервал определяется CSS-оформлением по умолчанию, которое браузеры применяют к абзацам).

Примечание: HTML5 переопределил категории элементов в HTML: смотри «Категории типов содержимого элементов». Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.

Примечание: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноименными типами отображения в CSS. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.

Примечание: Вам могут пригодиться справочники, включающие списки блочных и строчных элементов — смотри «Элементы блочного уровня» и «Строчные элементы».

Пустые элементы

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

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

Это выведет на вашу страницу следующее:

Примечание: Пустые элементы иногда называют void-элементы.

Атрибуты

У элементов так же могут быть атрибуты, которые выглядят так:

&lt;p class="editor-note">My cat is very grumpy&lt;/p>

Атрибуты содержат дополнительную информацию об элементе, которая, по вашему мнению, не должна отображаться в содержимом элемента. В данном случае атрибут class позволяет вам дать элементу идентификационное имя, которое в дальнейшем может быть использовано для обращения к элементу с информацией о стиле и прочими вещами.

Атрибут должен иметь:

  1. Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).
  2. Имя атрибута и следующий за ним знак равенства.
  3. Значение атрибута, заключенное в кавычки.

Активное изучение: Добавление атрибутов в элемент

Возьмем для примера элемент <a> — означает anchor (якорь) и делает текст внутри него гиперссылкой. Может иметь несколько атрибутов, вот два из них:

  • href: В значении этого атрибута прописывается веб-адрес, на который, по вашей задумке, должна указывать ссылка, куда браузер переходит когда вы по ней кликаете. Например, href="https://www.mozilla.org/".
  • title: Атрибут title описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведет. Например, title="The Mozilla homepage". Она появиться в виде всплывающей подсказки, когда вы наведет на ссылку курсор.

Измените строку текста ниже в поле Ввод так, чтобы она вела на ваш любимый вебсайт. Сначала добавьте элемент <a>, затем атрибут href, затем атрибут title. Вы можете наблюдать сделанные изменения в реальном времени в поле Вывод. Вы должны увидеть гиперссылку, при наведении курсора на которую появляется содержимое атрибута title, а при щелчке переходит по адресу в атрибуте href. Помните, что между именем элемента и каждым из атрибутов должен быть пробел.

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

Булевы атрибуты

Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо.  Такие атрибуты называются булевы и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмем атрибут disabled, который вы можете назначить элементам input, если вы хотите, чтобы они были неактивны (затенены) и пользователь не сможет ввести в них данные.

<input type="text" disabled="disabled">

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

<input type="text" disabled>

<input type="text">

На выходе оба варианта будут выглядеть следующим образом:

Опускание кавычек вокруг значений атрибутов

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

<a href=https://www.mozilla.org/>favourite website</a>

Однако, как только мы добавим атрибут title в таком же стиле, мы поступим неверно:

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>

В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут title это на самом деле три разных атрибута — атрибут title со значением "The" и два булевых атрибута: Mozilla и homepage. Это, очевидно, не то, что имелось ввиду и приведет к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть на что похож текст title!

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

Одинарные или двойные кавычки?

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

<a href="http://www.example.com">A link to my example.</a>

<a href='http://www.example.com'>A link to my example.</a>

Однако, вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!

<a href="http://www.example.com'>A link to my example.</a>

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

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

Если вы хотите вставить кавычки того же типа, то вы должны использовать Entity references: including special characters in HTML.

Структура HTML документа

Ниже дан пример оборачивания основных, самостоятельных HTML элементов, которые не очень полезны сами по себе. Давайте посмотрим как самостоятельные элементы объединяются для формирования всей HTML страницы:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Тестовая страница</title>
  </head>
  <body>
    <p>Моя первая страница</p>
  </body>
</html>

Вот что мы имеем:

  1. <!DOCTYPE html>: The doctype. Очень давно, еще когда HTML был молод (1991/2), doctypes использовались в качестве ссылок на набор правил, которым HTML страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Doctypes выглядели примерно вот так: 
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Однако, в наши дни никто особо не думает о них, и doctypes стали историческим артефактом, которые должны быть включены везде, чтобы все работало правильно. <!DOCTYPE html> это самый короткий вид doctype, который считается действующим. На самом деле это все, что нужно вам знать о doctypes .
  3. <html></html>:  <html> элемент. Этот элемент содержит в себе все содержимое на всей странице, и иногда его называют "корневой элемент". 
  4. <head></head>: <head> элемент. Данный элемент выступает в качестве контейнера для всего содержимого, которое вы хотите включить в HTML документ, но не хотите показывать посетителям вашей страницы. Он включает такие вещи, как ключевые слова и описание страницы, которые вы хотели бы показывать в поисковых запросах, CSS для стилизирования вашего контента, объявление поддерживаемого набора символов и многое другое. Вы узнаете больше об этом из следующей статьи данного руководства.
  5. <meta charset="utf-8">: этот элемент устанавливает в качестве символьной кодировки для вашего документа utf-8 , который включает большинство символов из всех известных человечеству языков. По существу, теперь страница сможет отобразить любой текстовый контент, который вы сможете в неё вложить.  Нет причин не устанавливать эту кодировку, это также позволит избежать некоторых проблем позднее.
  6. <title></title>: Этот элемент устанавливает заголовок вашей страницы, который появляется во вкладке браузера где загружается ваша страница, также это заглавие используется при описании страница когда вы сохраняете её в закладках или избранном.
  7. <body></body>: <body> элемент. Он содержит весь контент, который вы хотите показывать посетителям вашей страницы — текст, изображения, видео, игры, проигрываемые аудио дорожки или что-то ещё.

Активное изучение: Добавление элементов в ваш HTML-документ.

Если вы хотите поэксперементировать с написанием HTML на своём компьютере, то можете:

  1. Скопировать пример HTML-страницы, расположенный выше.
  2. Создать новый файл в текстовом редакторе.
  3. Вставить код в ваш новый текстовый файл.
  4. Сохранить файл как index.html.

Примечание: вы также можете найти этот базовый пример HTML на в Github-репозитории МDN Learning Area.

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

A simple HTML page that says This is my pageДля этого упражнения вы можете редактировать код локально на своём компьютере, как предлагается выше, а можете работать в редакторе , расположенном ниже. В редакторе показано только содержимое элемента <body>. Попробуйте сделать следующее:

  • Добавьте заголовок страницы сразу за открывающим тегом <body>. Текст должен находиться между открывающим тегом <h1> и закрывающим </h1>.
  • Напишите в параграфе о чём-нибудь, что кажется вам интересным.
  • Выделите важные слова, обернув их в открывающий тег <strong> и закрывающий </strong>.
  • По объяснению раннее в статье добавьте в параграф ссылку.
  • Под параграфом поместите картинку по объяснению раннее в статье. Если сможете использовать другую картинку (со своего компьютера или из интернета) — вы большой молодец!

Если вы запутались, всегда можно запустить пример сначала кнопкой Reset. Сдаётесь — посмотрите ответ, нажав на Show solution.

Пробелы в HTML

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

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

Не важно, сколько пустого места вы используете в разметке (что может включать пробелы и сдвиги строк), браузер, при анализе кода, сократит все пустое место до одного пробела. Зачем использовать много пробелов? Ответ это доступность для понимания — гораздо легче разобраться, что происходит в твоем коде, если он удобно отформатирован, а не просто собран вместе в одном большом беспорядке. В нашем коде каждый вложенный элемент сдвинут на два пробела относительно элемента, в котором он находится. Вы можете использовать любое форматирование (в частности, количество пробелов для отступа), но лучше придерживаться одного стиля.

Ссылки на сущности: Включение специальных символов в HTML

В HTML символы <, >,",' и & являются специальными символами. Они часть HTML синтаксиса сами по себе, так как вам включить один из этих символов в текст, например, если вам действительно хотите использовать ампрессанд или знак "меньше чем", и вам не нужно, чтобы это интерпретировалось браузером как часть разметки?

Мы должны использовать ссылки-мнемоники  — специальные коды, которые отображают спецсимволы, и могут быть использованы в точных позициях. Каждая ссылка-мнемоник начинается с ампрессанда (&), и завершается точкой с запятой (;).

Literal character Character reference equivalent
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

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

<p>In HTML, you define a paragraph using the <p> element.</p>

<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>

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

Примечание: Таблица всех доступных в  HTML символов-мнемоников  в Википедии: List of XML and HTML character entity references.

HTML комментарии

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

Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры <!-- и -->, например:

<p>Этот текст будет отображён</p>

<!-- <p>Внутри комментария текст не отображается</p> -->

Как вы увидете ниже, первый параграф будет отображён на экране, а второй нет.

Подведение итогов

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

Примечание:  Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей (CSS — Cascading Style Sheets). CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймете, HTML и CSS созданы друг для друга.

Метки документа и участники

 Внесли вклад в эту страницу: SedovDP, 5iv1i73, SelenIT, SergeyIrk, ax2mx, StrixG, nikin93, thoughtspile, katerina_ti, zloyKrolik, Startsev, kolanski, AKonia
 Обновлялась последний раз: SedovDP,