Полный разбор HTML-тегов: как правильно оформлять тексты

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

Язык разметки гипертекста: экскурс в историю

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

Широкой распространенности SGML не получил, однако на его основе в 1991 году Тим Бернерс–Ли разработал HTML — технологию передачи гипертекста в Интернете. Построенный на основе принципов SGML, первоначально HTML включал в себя около 40 тегов. Некоторые из них указывали на физические свойства веб-страницы. Позже, в 1995 году, разработкой языка занялся концерн W3C, который выпустил версию HTML 2.0, а позже и 3.0. Именно она легла в основу современного Hyper Text Markup Language и широко применяется до сих пор.

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

Из чего состоят теги?

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

Есть и одиночные теги: они не работают с содержимым, заключенным в скобках, а сами по себе указывают на выполнение определенной команды. Например, <br> браузер интерпретирует как перенос текста на следующую строку, где br — отдельный элемент HTML, который и распознает программа.

Элементы тегов могут наделяться разными свойствами — атрибутами. Они прописываются после элемента, но перед закрывающей тег скобкой. Так, если <h1>текст</h1> указывает на заголовок первого уровня, то тег <h1 align="center">текст</h1> поместит его по центру, а команда <h1 align="center" style="color:black">текст</h1> еще и выделит его черным цветом.

Виды и типы тегов

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

Верхний уровень

Они разделяют заголовок и тело документа, а также формируют структуру страницы.

<html>. Использование открывающего и закрывающего тега <html> не обязательно, но большинство применяет их вверху и внизу. По сути, это контейнер, внутри которого заключены абсолютно все остальные теги.
<head>. Цель этого тега — упрощение работы краулеров поисковых систем. Посетители страницы не видят его содержимого. Внутри него скрываются метатеги Title, Description и другие, обозначающиеся <meta>. Метатеги включают в себя несколько атрибутов, которые помогают роботам получить информацию о странице и правильно ее ранжировать.
<body>. Внутри данного тега — всё содержимое или тело страницы — текст, изображения и другой контент, который видят пользователи.

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

Используются для разделения контента на отдельные смысловые блоки.

<h1>,...,<h6>. Данная группа определяет положение заголовка на странице. H1 обозначается тот, который является основным, а далее, по возрастанию цифры — идут менее важные блоки. Так, подзаголовок «Блочные элементы» в этой статье выделен тегом H3.
<blockquote>. Позволяет выделять отдельные части документа, например, важные цитаты. Так, заключенный в данном теге текст будет отображаться с отступами с двух сторон и разрывами сверху и снизу, а отдельные строки будут выровнены.
<p>. Служит для разделения абзацев текста и автоматически добавляет пустой отступ перед новой строчкой.

Строчные элементы

Служат для работы внутри одной строки, например, форматирования текста.

<a>. Позволяет создавать в тексте ссылки и служит своеобразным якорем для браузера.
<b>. Выделяет текст жирным шрифтом.
<big>. В HTML размер шрифта устанавливается в условных единицах от 1 до 7. По умолчанию используется 3, а данный тег увеличивает шрифт на 1 шаг.
<img>. Служит для вставки на страницу изображений. Для этого подходят картинки в формате png, jpeg, gif.

Строчные элементы не могут содержать блочные, а в блочные, наоборот, вкладывать строчные можно.

Списки

Текст, который начинается с маркеров или цифр и содержит взаимосвязанный набор отдельных фраз, называется списком. Чтобы выделить его отдельные элементы, используются следующие теги:

<ol>. Устанавливает нумерованный список, в котором каждый последующий элемент будет иметь большее значение.
<ul>. Используется для создания маркированного списка.

Таблицы

Отдельные столбцы и рисунки таблицы могут содержать как текстовый контент, так и изображения.

<table>. Используется для создания тела таблицы.
<tr>. Создает строку в таблице.
<td>. Заключается внутри контейнера tr и позволяет создать ячейку внутри строки.
<th>. Служит для создания ячейки заголовка. Текст в ней выделяется жирным шрифтом.

Фреймы

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

<frame>. Служит для определения свойств отдельного фрейма, включая его содержимое и размеры. Является контейнером.
<frameset>. Позволяет сформировать внутреннюю структуру каждого фрейма.

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

Теги языка HTML — это основа страницы. Как не допустить ошибок при создании кода?

Ошибки, допущенные при написании кода HTML, ухудшают внешний вид и функциональность вашего веб-ресурса. Их допускают не только новички, но и профессиональные разработчики. Чтобы уменьшить их количество, стоит разобрать самые частые.

Не закрыт элемент. Открытый тег требует обязательного закрытия. Если его нет, то могут возникнуть ошибки при отображении страницы и проверке кода.
Отсутствует символ / в самозакрывающихся элементах. Такие элементы, как input, img и meta, требуют использования слеша перед закрывающей скобкой.
Ошибка при конвертации символов. Копирование отдельных символов (например, двойных кавычек) чревато ошибками конвертации: браузер просто их не распознает. Всегда проверяйте код на их наличие, а если они найдены — преобразуйте такие символы в HTML.
Блочные элементы внутри строчных. Блочные элементы нельзя использовать внутри строчных. Это одно из основных правил кодировки в HTML.
Отсутствие элемента alt при вставке изображений. К каждой картинке необходимо добавлять описание. Если она применяется в дизайнерских целях и не несет смысловой нагрузки, элемент alt используется, но остается пустым.

Работа в Taptop не требует знаний HTML: создать свой сайт сможет даже новичок. Однако открытый код позволяет владельцам веб-ресурсов вносить любые изменения на сайт при помощи тегов. Как мы уже говорили, это основа, с которой должен быть знаком каждый разработчик. Даже если ваш опыт пока заключается в создании единственного лендинга при помощи конструктора.