Что такое HTML?

HTML5 & CSS3
HTML Вёрстка для новичков
Фото аватара
Александр

HTML (Hypertext Markup Language) является языком разметки веб-страниц. В современном варианте HTML нужен для отображения каркаса сайта. Создавать сайты на чистом HTML можно, но это уже не практикуется.

Возможности HTML

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

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

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

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

  • Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, «p»), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
  • Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
  • Контент (Content): Это контент элемента, который в данном случае является просто текстом.
  • Элемент (Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент. Элементы также могут иметь атрибуты. Подробную информацию о HTML элементах можно получить здесь: https://developer.mozilla.org/ru/docs/Web/HTML/Reference/Elements
  • Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. Самым популярным атрибутом элемента является class, который позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.

Часто используемые теги HTML

Заголовки


В HTML бывает шесть уровней заголовков. Они определяются парными тегами h1, h2, h3, h4, h5 и h6.
Пример кода заголовков:

<h1>Заголовок 1-го уровня</h1>
  <h2>Заголовок 2-го уровня</h2>
    <h3>Заголовок 3-го уровня</h3>
      <h4>Заголовок 4-го уровня</h4>
        <h5>Заголовок 5-го уровня</h5>
          <h6>Заголовок 6-го уровня</h6>

Пример вывода в браузере заголовков:

Заголовок 1-го уровня

Заголовок 2-го уровня

Заголовок 3-го уровня

Заголовок 4-го уровня

Заголовок 5-го уровня
Заголовок 6-го уровня

Заголовок типа h1 используют обычно один раз, потому что он основной.

Абзац

Как и на обычном письме, делит текст на текстовые блоки по смыслу. Для определения абзаца используется парный тег p.
Пример кода абзаца:

<p>Это первый абзац нашего текста</p>
<p>Это второй абзац нашего текста</p>
<p>Это третий абзац нашего текста</p>

Пример вывода в браузере абзацев:

Это первый абзац нашего текста

Это второй абзац нашего текста

Это третий абзац нашего текста

Списки

Самые распространенные типы списков нумерованные и ненумерованные. Ненумерованные или маркированные списки добавляются парным тегом ul. Такие списки применяются когда нам не важна последовательность их элементов. Отдельные элементы в любом типе списков заводятся тегом li, который также нужно закрывать после каждого пункта.

Пример кода ненумерованного списка:

<ul>
  <li>Один</li> 
  <li>Два</li>
  <li>Три</li>
</ul>

Пример вывода в браузере ненумерованного списка:

  • Один
  • Два
  • Три

В нумерованном списке, где пункты расположены в определенном порядке, используется тег ol .
Пример кода нумерованного списка:

<ol>
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
</ol>

Пример вывода в браузере нумерованного списка:

  1. Один
  2. Два
  3. Три

Гиперссылки


Гиперссылки могут быть абсолютными (с указанием домена) и относительными (без указания домена).
Обычно относительные ссылки используются внутри сайта без перехода на новую вкладку браузера. Ссылки используют парный тег a.
Вот пример кода относительной ссылки:

<a href="/info">Это относительная ссылка</a>

Пример вывода в браузере относительной ссылки:

Это относительная ссылка

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

<a href="https://testsite.org">Это абсолютная ссылка</a>

Пример вывода в браузере абсолютной ссылки:

Это абсолютная ссылка

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