MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

В процессе перевода.

В этой статье будут изучены основные понятия языка 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 образец на MDN Learning Area Github repo.

You can now open this file in a web browser to see what the rendered code looks like, and then edit the code and refresh the browser to see what the result is. Initially it will look like this:

A simple HTML page that says This is my pageSo in this exercise, you can edit the code locally on your computer, as outlined above, or you can edit it in the editable sample window below (the editable sample window represents just the contents of the <body> element, in this case.) We'd like you to have a go at implementing the following steps:

  • Just below the opening <body> tag, add a main title for the document. This should be wrapped inside an <h1> opening tag and </h1> closing tag.
  • Edit the paragraph content to include some text about something you are interested in.
  • Make any important words stand out in bold by wrapping them inside a <strong> opening tag and </strong> closing tag
  • Add a link to your paragraph, as explained earlier in the article.
  • Add an image to your document, below the paragraph, as explained earlier in the article. You'll get bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the Web.)

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

Пробелы в HTML

In the above examples you may have noticed that a lot of whitespace is included in the code listings — this is not necessary at all; the two following code snippets are equivalent:

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

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

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