Какие существуют типы тегов html

HTML: виды тегов

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

В веб-разработке HTML применяется для создания разметки документа, которая потом стилизуется для отображения в браузере. Таким образом, если вам нужно сверстать элемент, то сначала для него пишется HTML-код (определяется структура этого элемента), затем с помощью стилей CSS оформляется внешний вид этого элемента и его расположение на странице. После этого с помощью языка JavaScript элементу может быть задана определенная функциональность, он становится интерактивным.

Теги в языке HTML

Основной и единственный структурный элемент языка HTML – это тег. Разберем их основные виды.

Формат тегов HTML:

Такие теги называются парными, так как для них указаны маркеры начала и конца тега.

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

Также существуют одиночные теги, для которых закрывающая часть отдельно не указывается.

Отметим ещё одну особенность HTML – язык HTML является регистронезависимым, имена тегов и атрибутов можно записывать как в нижнем, так и в верхнем регистре.

Виды тегов

Теги языка HTML можно условно разделить на несколько категорий:

1. Теги для форматирования текста и указания ссылок

  • h1, h2, h3, h4, h5, h6 – теги заголовков;
  • b, em – теги для изменения начертания текста;
  • ul, ol – теги для создания списков;
  • a – тег для создания ссылок.

2. Теги структуры документа

  • nav – тег для создания навигации по сайту;
  • aside – создаёт боковую панель на сайте, где размещается неосновной контент;
  • header – тег для создания шапки сайта или раздела;
  • section – тег для создания раздела веб-страницы;
  • div – тег, с помощью которого выделяется отдельный блок, с целью его последующего изменения;
  • span – определяет строчные элементы.

3. Функциональные теги

  • html – включает в себя всё содержимое страницы;
  • body – раздел html-файла, где содержится техническая инфомрация;
  • script – предназначен для создания/подключения скриптов;
  • link – предназначен для подключения внешних файлов (шрифтов или стилей);
  • meta – содержит информацию, предназанченную для поисковых систем и браузеров.

4. Теги встраиваемого контента

  • img – изображение;
  • audio – аудиуоконтент;
  • iframe – отдельная область документа, в которую можно подгружать другие независимые документы.

5. Теги форм (для взаимодействия с пользователем)

6. Теги таблиц

Источник

Типы тегов

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

Условно теги делятся на следующие типы:

  • теги верхнего уровня;
  • теги заголовка документа;
  • блочные элементы;
  • строчные элементы;
  • универсальные элементы;
  • списки;
  • таблицы;
  • фреймы.

    и
    относятся к категории списков, но также являются и блочными элементами.

Далее рассмотрим только те теги, которые потребуются нам в дальнейшей работе.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

  • Как добавить картинку на веб-страницу?
  • Как добавить иконку сайта в адресную строку браузера?
  • Как добавить фоновый рисунок на веб-страницу?
  • Как сделать обтекание картинки текстом?
  • Как растянуть фон на всю ширину окна?
  • Как выровнять фотографию по центру веб-страницы?
  • Как разместить элементы списка горизонтально?
  • Как убрать подчеркивание у ссылок?
  • Как убрать маркеры в маркированном списке?
  • Как изменить расстояние между строками текста?
  • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
  • Как открыть ссылку в новом окне?

Популярные задачи

  • TEX
  • Отступы между блоков
  • Андроид в тени
  • Ссылка как кнопка
  • Вложенные списки
  • Форма регистрации
  • Объединение ячеек таблицы
  • Обязательные поля формы
  • Цвет и фон в таблице
  • Асуанская плотина
  • Батарейка
  • Заголовки

Источник

Читайте также:  Telegram бот php webhook
Оцените статью