логотип Taptop
HTML-теги: язык, который понимают браузеры

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: создать свой сайт сможет даже новичок. Однако открытый код позволяет владельцам веб-ресурсов вносить любые изменения на сайт при помощи тегов. Как мы уже говорили, это основа, с которой должен быть знаком каждый разработчик. Даже если ваш опыт пока заключается в создании единственного лендинга при помощи конструктора. 

Может быть интересно
все статьи
Оставить заявку
Имя
Это поле обязательно для заполнения
Телефон
Это поле обязательно для заполнения
Почта
Это поле обязательно для заполнения
Радио группа
Это поле обязательно для заполнения
Комментарий
Это поле обязательно для заполнения
Галочка
Это поле обязательно для заполнения
Спасибо!
Форма отправлена
Что-то не так. Попробуйте позже