Шпаргалка верстальщика по тегам HTML / WAYUP

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

Теги в HTML

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

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

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

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

Элементы в HTML

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

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

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

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

<!DOCTYPE> - тег, который определяет тип документа. Он необходим для того, чтобы браузер понимал, как интерпретировать текущую веб-страницу. Этот тег одиночный и указывается он всегда в самом начале HTML-документа.
<html> - является главным тегом всей страницы, потому что включает в себя всё её содержимое. Пишется этот тег, как правило, сразу после <!DOCTYPE>. Тег <html> парный и закрывающий тег </html> ставится в самом конце HTML-документа.
<head> - тег, который служит своего рода хранилищем для других head-элементов и помогает браузеру при работе с данными. Напрямую его содержимое не отображается на веб-странице. Этот тег и его содержимое очень важны для SEO-оптимизации. Внутри этого тега могут содержаться другие теги: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>.
<meta> - это один из тегов, который размещается внутри <head>. Он определяет метатеги, предназначенные для хранения информации для браузера и поисковой системы. Метаданные не отображаются на странице и используются для описания страницы, ключевых слов, автора документа.
<title> - заголовок документа, который отображается не на странице, а во вкладке браузера. Это обязательный элемент HTML-документа, он может встречаться только один раз во всем документе и содержится внутри <head>.
<body> - «Body» с английского означает «тело». И в HTML этот тег используется как раз в этом значении. То есть этот тег определяет всё тело документа, хранит весь его контент и отображает на странице. <body> - парный тег, но использование закрывающего </body> не обязательно, хотя считается хорошим тоном.

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

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

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

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

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

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

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

<p> - текстовый абзац. Блочный парный тег, пишется всегда с новой строки.
<br> - тег, используемый для разрыва строки в том месте, где он стоит.
<wbr> - тег, также отвечающий за разрыв строки, но в том месте, где это может стать необходимо браузеру.
<blockquote> - текст, выделенный этим тегом, представляет собой отдельный выделенный блок с отступами. Как правило, используется для выделения длинных цитат в HTML-документе.
<q> - тег, используемый для выделения кратких цитат в тексте. По умолчанию содержание тега заключается в кавычки.
<b> - задаёт шрифту жирное начертание. Возможно использование вместе с другими тегами, задающими параметры тексту.
<i> - курсивное написание содержащегося внутри текста.
<small> - уменьшает шрифт на 1 единицу. Текст в HTML имеет размер от 1 до 7, по умолчанию шрифту задается размер 3. А с помощью тега <small> текст уменьшится до 2. Допускается неоднократное использование этого тега, но размером меньше 1 текст не может быть.
<u> - тег, который делает шрифт подчеркнутым.
<s> - зачеркнутый шрифт.
<sub> - подстрочное написание шрифта.
<sup> - надстрочное написание шрифта.
<bdo> - задаёт тексту направление написания. Используется в случае, когда текст пишется на иврите и т.д.
<ol> - создание упорядоченного нумерованного списка. Элементы списка должны начинаться с тега <li>. Обязательно использование закрывающего тега.
<ul> - тоже список, только маркированный. Требования к элементам и закрытию тега как и у <ol>.
<a> - этот тег делает из текста гиперссылку. Обязательно использование закрывающего тега.

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

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

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

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

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

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

<input> - тег, с помощью которого создаются элементы формы, предназначенные для ввода текста. Другими словами, для создания многофункциональных полей формы.
<textarea> - это элемент формы, схожий с предыдущим, но в данном случае вводить текст можно в несколько строк. И это деление на строки сохранится при отправке данных формы на сервер.
<label> - устанавливает связь между текстом, названием элемента формы и самим элементом.
<datalist> - с помощью этого тега создается список вариантов при наборе в текстовом поле. Этот список изначально скрыт и открывается только после начала ввода.
<select> - создаёт элемент в виде раскрывающегося списка или списка с возможностью многочисленного выбора. Отдельные пункты списка определяются тегом <option>.
<button> - тег, с помощью которого создаются кнопки формы. На таких кнопках можно разместить любые HTML-объекты, например, изображения.

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

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

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

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

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

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