HTML (Hypertext Markup Language) — это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных.

 

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

 

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

Анатомия HTML элемента

 

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

 

Открывающий тег (Opening tag): Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.

 

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

 

Контент (Content): Это контент элемента

 

Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.

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

Вы также можете располагать элементы внутри других элементов — это называется вложением.

 

<p> Пример <strong> правильного вложения </strong> тегов </p>

Однако вы, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент <p>, затем элемент <strong>, потом мы должны закрыть сначала элемент <strong>, затем <p>. Приведенное ниже неверно:

<p> Пример <strong> неправильного вложения </p> тегов </strong>

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

Теперь рассмотрим в отдельности все html теги которые должны присутствовать на странице.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Моя тестовая страница</title>
  </head>
  <body>
    <img src="images.png" alt="Моё тестовое изображение">
  </body>
</html>

<!DOCTYPE html> — В прошлом, (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML.

 

<html> </html> — Элемент <html>, этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.

 

 <head> </head> — элемент <head>. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска

 

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

 

<meta charset=»utf-8″> — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите.

 

<title> </title> — элемент <title>. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете ее в закладки/избранное.