MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

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

В этой статье мы изучим основы 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 styling которые браузеры применяют к абзацам).

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

Заметка: Вы можете найти полезные справочники включающие списки блочных и строчных элементов — смотри Block-level elements и Inline elements.

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

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

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

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

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

Атрибуты

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

<p class="editor-note">My cat is very grumpy</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>

No matter how much whitespace you use (which can include space characters, but also line breaks), the HTML parser reduces each one down to a single space when rendering the code. So why use so much whitespace? The answer is readability — it is so much easier to understand what is going on in your code if you have it nicely formatted, and not just bunched up together in a big mess. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you what style of formatting you use (how many spaces for each level of indentation, for example), but you should consider using some kind of formatting.

Entity references: including special characters in HTML

In HTML, the characters <, >,",' and & are special characters. They are parts of the HTML syntax itself, so how do you include one of these characters in your text, for example if you really want to use an ampersand or less than sign, and not have it interpreted as code as some browsers may do?

We have to use character references — special codes that represent characters, and can be used in these exact circumstances. Each character reference is started with an ampersand (&), and ended by a semi-colon (;).

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

In the below example, you can see two paragraphs, which are talking about web technologies:

<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>

In the live output below, you can see that the first paragraph has gone wrong, because the browser thinks that the second instance of <p> is starting a new paragraph! The second paragraph looks fine, because we have replaced the angle brackets with character references.

Note: A chart of all the available HTML character entity references can be found on Wikipedia: List of XML and HTML character entity references.

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

In HTML, as with most programming languages, there is a mechanism available to write comments in the code — comments are ignored by the browser and invisible to the user, and their purpose is to allow you to include comments in the code to say how your code works, what the different parts of the code do, etc. This can be very useful if you return to a code base that you've not worked on for 6 months, and can't remember what you did — or if you hand your code over to someone else to work on.

To turn a section of content inside your HTML file into a comment, you need to wrap it in the special markers <!-- and -->, for example:

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

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

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

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

You've reached the end of the article — hope you enjoyed your tour of the very basics of HTML. At this point you should understand what the language looks like, how it works at a basic level, and be able to write a few elements and attributes. This is a perfect place to be right now, as in subsequent articles in the module we will go into some of the things you have already looked at in a lot more detail, and introduce some new features of the language. Stay tuned!

Note: At this point, as you start to learn more about HTML, you might also want to start to explore the basics of Cascading Style Sheets, or CSS. CSS is the language you use to style your web pages (whether e.g. changing the font or colors, or altering the page layout.) HTML and CSS go very well together, as you'll soon discover.

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

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