Что же такое HTML? Именно с помощью HTML обеспечивается структура контента, который отображается на веб-странице.

HTML расшифровывается как HyperText Markup Language - язык гипертекстовой разметки. Язык HTML отвечает за структуру и содержание страницы, а кирпичиками для построения страницы являются теги.

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

HTML теги

Тегов существует не очень много и с практикой ты их все запомнишь.

У всех тегов есть имена, которые заключены в угловые скобки, или, другими словами, знаки меньше < и больше >. Мы начнем с парных тегов, потому что состоят из двух частей: открывающий тег и закрывающий. Закрывающий тег отличается наличием / перед именем тега. Давай рассмотрим на примерах:

  • <h1> - <h6> - используются для определения заголовков HTML. <h1> определяет самый важный заголовок. <h6> определяет наименее важный заголовок. Заголовок первого уровня отображается с самым большим размером шрифта, каждый последующий заголовок все меньше и меньше.
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>

Как видишь, каждая строка начинается с открывающего тега (например <h1>), затем следует текст заголовка, и сразу после него закрывающий тег, перед именем которого стоит слэш (</h1>).

Принцип написания всех парных тегов одинаковый, меняется только имя.

Кроме заголовков, которые есть во всех веб страницах, очень часто используются теги <p> и <div>:

  • <p> - определяет абзац или параграф. Браузеры автоматически добавляют одну пустую строку до и после каждого элемента <p>.
<p>Это первый параграф.</p>
<p>Это второй параграф. Он обязательно начнется с новой строки</p>
  • <div> - раздел в документе HTML. Также, этот элемент используется, как контейнер для других HTML элементов. Это — один из самых распространенных HTML тегов. Содержимое тега <div>, как и тегов заголовка или параграфа, всегда начинается с новой строки. Его мощь ты сможешь полностью понять только после того, как познакомишься со стилями.

Одинарные теги

Кроме парных тегов, существуют одинарные. Они отличаются тем, что состоят только из одной части.

Например, есть такой тег <hr>, который рисует горизонтальную линию-разделитель. Давай посмотрим как будут выглядеть два параграфа с заголовком второго уровня каждый, разделенные горизонтальной линией:

<h2>Это заголовок первого параграфа</h2>
<p>Первый параграф</p>
<hr>
<h2>Это заголовок второго параграфа</h2>
<p>А это второй параграф</p>

Теперь ты знаешь какой из тегов HTML рисует горизонтальную линию. <hr> — это одинарный тег. Обрати внимание, что он используется сам по себе, так как одинарным тегам не нужен закрывающий тег.

Блочные элементы

Все теги, которые мы рассмотрели выше, относятся к категории блочных элементов. Они занимают всю ширину экрана или “родительского контейнера”, но об этом тебе пока рано переживать.

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

Задача блочных элементов — задавать структуру веб-страницы. Если страница — это дом, то блочные элементы — это несущие стены.

Использование тегов

Чтобы начать создавать веб страницы, тебе нужен только текстовый редактор. Если ты уже работаешь в IDE, например VSCode, то все отлично. Создавай файл index.html и попробуй добавить туда этот пример:

<h1>CoderslangJS</h1>
<h2>Учим HTML</h2>
<p>
  Тяжело в учении, легко в бою.
</p>
<hr>
<p>
  Главное - постоянство. Тренируйся каждый день и скоро станешь профессионалом.
</p>

Любые теги можно писать как прописными, так и строчными символами или их комбинациями. <DIV>, <div>, <DiV> - все три варианта абсолютно правильные и результат будет одинаковым.

Но, твои коллеги наверняка будут писать все маленькими буквами, поэтому советую следовать такому стилю и тебе.