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

Теги в HTML

Тег–это основная конструкция HTML, которая состоит из символов, написанных на английском языке и угловых скобок. Именно теги превращают обычный текст в гипертекст для веб-страницы.

Существуют парные и одиночные теги

Парные теги. Это два тега – открывающий и закрывающий, между которыми находится содержимое тега–контент. Примером двойного тега является <title>. Особенность закрывающего тега в том, что он после угловой скобки содержит «/».

Одиночные теги. Примером такого тега служит <img>. У него нет закрывающего тега и, как и большинство таких тегов, он не содержит в себе информацию напрямую, а лишь служит для вставки изображения.

Элементы в HTML

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

Выходит, что для освоения HTML необходимо хорошо знать и ориентироваться в его тегах. Но как это сделать, если таких тегов более 100 штук? Нужно ли их все учить наизусть?

И тут у нас хорошая новость для вас. С первых дней работы с HTML вам точно не нужно заучивать всю сотню тегов. Более того, примерно 50-60 % тегов многими даже самыми продвинутыми верстальщиками не используются.

Первые, самые важные теги, с которыми вы просто обязаны подружиться - это теги, составляющие каркас HTML-документа. Именно с них и начнется шпаргалка верстальщика.


Среди всего остального множества тегов можно составить HTML-шпаргалку и условно поделить все теги на группы.

Теги заголовков

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

В теги заголовков включаются 6 тегов различного уровня важности: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Они должны располагаться в документе в строгой иерархической последовательности от <h1>, наиболее важного заголовка первого уровня, к <h6>.

На странице заголовки разных уровней отображаются по-разному. Самым крупным по размеру жирным шрифтом будет отображаться заголовок первого уровня.

Все теги заголовков являются парными и требуют обязательного использования закрывающих тегов.

Форматирование и работа с текстом


Работа с таблицами в HTML

Создание таблицы в HTML-документе начинается с прописывания тега <table>. Он будет хранить в себе всю информацию о таблице. Тег этот парный и требует обязательного использования закрывающегося </table>.

Любая таблица состоит из строк и ячеек, которые задаются тегами <tr> и <td> соответственно. При этом тег <td> помещается внутрь <tr> , который, в свою очередь, располагается внутри <table>.

У тега <table> имеется большое количество атрибутов, которые определяют толщину и цвет рамки ячейки, отступы внутри ячейки, высоту таблицы, число колонок и многое другое.

Создание HTML-форм

С помощью тега <form> в HTML-документе создаются формы, которые служат для обмена данными между пользователем и сервисом. Нет никаких ограничений по допустимому количеству форм в одном документе. Но каждая из них должна быть автономна, иметь свой открывающий и закрывающий тег. Формы не могут находиться внутри друг друга.


Встраиваемые элементы HTML

Добавлением и управлением аудиозаписей на веб-странице занимается тег <audio>. Путь к файлу прописывается через тег <source>. Это парный тег, который обязательно должен быть закрыт. И ещё внутри <audio> можно написать текст, который будет выводиться в случае, если видео не может быть открыто в каком-то браузере.

Суть добавления и управления видеозаписями такая же, как и с тегом <audio>. Только осуществляется это через тег <video>.

К аудио и видео в HTML можно добавлять субтитры с помощью тега <track>.

Для отображения изображений формата JPEG, PNG, GIF на веб-странице используется тег <img>.

В первые несколько месяцев работы этой шпаргалки по HTML вам вполне будет достаточно. А со временем вы сами будете дополнять её часто используемыми тегами и большую часть из них волей-неволей запомните наизусть.