Html теги с примерами: Таблица основных тегов html с примерами

Содержание

Таблица основных тегов html с примерами

Несмотря на то, что сейчас можно создавать отличные сайты на конструкторах в визуальном режиме, использование языка HTML остаётся важным навыком разработчика. Даже если вы не пишете шаблон с нуля, может возникнуть необходимость отредактировать его или вставить виджет стороннего сервиса — через HTML-код.

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

 

Базовые теги

<!—…—> — тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.

<!DOCTYPE> — показывает браузеру тип документа, сообщает его версию и язык.

<html></html> — корневой тег, который сообщает браузеру, что это HTML-документ. Все остальные элементы помещаются внутри него.

<head></head>— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, <title> или <style>.

<meta> — тег для оформления метаданных документа, используемых браузером для обработки страницы, а поисковиками — для индексации.

<body></body> — тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите внутри этого контейнера, отобразится на странице. Тег <body> имеет несколько атрибутов, позволяющих управлять цветами.

<body bgcolor=?> — цвет фона документа в формате RGB.

<body text=?> — цвет текста.

<body link=?> — цвет гиперссылок.

<body vlink=?> — цвет гиперссылок, по которым уже переходили.

<body alink=?> — цвет гиперссылок при нажатии.

<title></title>— метатег, который задаёт название страницы, отображаемое на вкладке браузера.

<header></header> — определяет содержимое блока с вводной информацией сайта или группой ссылок.

 

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

<h2></h2>……<h6></h6>. — теги заголовков, от самого большого к самому маленькому.

<b></b> — жирный текст без придания важности выделенному фрагменту.

<strong></strong> — расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.

<i></i> — выделение текста курсивом без придания важности.

<del></del> — зачёркивает текст, помечая его удалённым.

<s></s> — отображает перечёркнутый текст.

<ins></ins> — подчёркивает текст, визуально выделяя внесённые изменения.

<u> — подчёркивание без дополнительного акцентирования внимания.

<em></em> — расставление акцентов путём выделения фрагментов текста курсивом.

<mark></mark> — выделение частей текста жёлтым маркером.

<tt></tt> — имитация текста, набранного на печатной машинке.

<small></small> — отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.

<sub></sub> — подстрочное начертание символов.

<sup></sup> — надстрочное начертание символов.

<cite></cite> — оформление цитат.

<address> — добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.

<pre></pre> — вывод неформатированного текста с сохранением пробелов и особенностей переносов.

<p></p> — контейнер для абзаца.

<br> — переносит текст на другую строку без создания абзаца.

<blockquote> </blockquote> — отступы с обеих сторон для оформления цитаты или врезки.

<q></q> — краткое цитирование.

<dl></dl> — контейнер для размещения термина и его определения.

<dt> — добавление термина.

<dd> — добавление определения понятия

<dfn> — выделение термина курсивом. Последующий текст должен раскрывать понятие.

<abbr> — указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.

<ol></ol> — список с цифрами.

<ul></ul> — список со значками.

<li> — отметка каждого элемента перечня (цифра или значок в зависимости от типа списка).

<a></a> — добавление гиперссылки в текст. Имеет обязательный атрибут href, в котором указывается ссылка или якорь. Внутри контейнера помещается текст, при нажатии на который происходит переход на другую страницу или другое место на этой же странице.

<code></code> — выделение фрагмента кода с помощью шрифта monospace. 

 

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

<img></img> — вставка изображения. Имеет атрибут src, который указывает на адрес нужного файла. Есть и другие атрибуты:

<img src=»name» align=?> — выравнивание к одной из сторон документа. Например, значение right переместит рисунок в правый край, а left — в левый.

<img src=»name» border=?> — позволяет настроить в пикселях толщину рамки вокруг изображения.

<picture></picture> — контейнер для расположения элемента <img> без <source>, который даёт браузеру возможность самостоятельно выбрать подходящую картинку.

<audio></audio>  — вставка звукового контента.

<video></video> — вставка видео (поддерживается Ogg, WebM и MP4).

<source></source> — указывает местоположение файла для <video>, <audio> и <picture>

<track> — формирует субтитры для <video> и <audio>.

<object></object> — контейнер, через который встраиваются мультимедийные файлы. Для передачи параметров применяется тег <param>.

<hr> — размещает на странице горизонтальную линию. Имеет несколько атрибутов.

<hr size=?> — устанавливает высоту линии.

<hr width=?> — устанавливает ширину линии.

<hr noshade> — убирает тень у линии.

<hr color=?> — задаёт цвет линии.

<script></script> — определяет выполнение сценария на стороне посетителя сайта. Может содержать сам скрипт или иметь ссылку на  внешний источник.

<noscript></noscript> — ограничивает фрагмент документа, в котором скрипт не выполняется.

 

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

<table></table> — размещает таблицу. Все остальные теги для форматирования таблиц должны находиться внутри это контейнера.

<thead></thead> — определяет заголовок.

<tbody></tbody> — отмечает тело таблицы.

<td></td> — создаёт одну ячейку.

<th></th> — указывает на заголовок ячейки.

<tr> — создание одной строки.  

<tfoot></tfoot> — показывает нижний колонтитул.

<caption></caption> — вставляет подпись. Указывается после тега <table>.

<col> — позволяет указать ширину и другие параметры одной или нескольких колонок.

 

Создание форм и кнопок

<form></form> — создание форм на странице. С помощью HTML описывается только внешний вид, для выполнения функций требуется запуск соответствующих скриптов на сервере.

 

<button></button> — создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.

<select multiple name=»NAME» size=?></select> — формирует меню с поддержкой скроллинга.

<select name=»NAME»></select> — создаёт ниспадающее меню.

<option></option> — описывает каждый отдельный пункт меню.

<input> — формирует поля для добавления пользовательских данных.

<output> — выводит результаты вычислений, сделанных с помощью скрипта.

<label> — оформляет пометку для поля, созданного тегом <input>.


<textarea></textarea> — создаёт большие поля для ввода текста.

HTML 5 Справочник всех тегов онлайн и примеры

= Новое в HTML5.

Тег Описание
<!—…—> Определяет комментарий
<!DOCTYPE>  Определяет тип документа
<a> Определяет гиперссылку
<abbr> Определяет аббревиатуру или акроним
<acronym> Не поддерживается в HTML5. Использовать <abbr> Вместо.
Определяет акроним
<address> Определяет контактные данные автора/владельца документа
<applet> Не поддерживается в HTML5. Использовать <embed> or <object> Вместо.
Определяет встроенный апплет
<area> Определяет область внутри изображения-карты
<article> Определяет статью
<aside> Определяет содержание в стороне от содержимого страницы
<audio> Определяет звуковое содержимое
<b> Определяет полужирный текст
<base> Указывает базовый URL-адрес/цель для всех относительных URL-адресов в документе
<basefont> Не поддерживается в HTML5. Вместо этого используйте CSS.
Задает цвет, размер и шрифт по умолчанию для всего текста в документе
<bdi> Изолирует часть текста, которая может быть отформатирована в другом направлении от другого текста за его пределами
<bdo> Переопределяет текущее направление текста
<big> Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет большой текст
<blockquote> Определяет раздел, который цитируется из другого источника
<body> Определяет тело документа
<br> Определяет один разрыв строки
<button> Определяет нажатую кнопку
<canvas> Используется для рисования графики, на лету, с помощью сценариев (обычно JavaScript)
<caption> Определяет заголовок таблицы
<center> Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет центрированный текст
<cite> Определяет название работы
<code> Определяет часть кода компьютера
<col> Задает свойства столбца для каждого столбца в <colgroup> element 
<colgroup> Задает группу из одного или нескольких столбцов в таблице для форматирования
<data> Связывает данное содержимое с машинно-читаемым переводом
<datalist> Задает список предварительно заданных параметров для элементов управления вводом
<dd> Определяет описание/значение термина в списке описания
<del> Определяет текст, который был удален из документа
<details> Определяет дополнительные сведения, которые пользователь может просматривать или скрывать
<dfn> Представляет определяющий экземпляр термина
<dialog> Определяет диалоговое окно или окно
<dir> Не поддерживается в HTML5. Использовать <ul> Вместо.
Определяет список каталогов
<div> Определяет раздел в документе
<dl> Определяет список описания
<dt> Определяет термин/имя в списке описания
<em> Определяет подчеркнутый текст 
<embed> Определяет контейнер для внешнего (не HTML) приложения
<fieldset> Группирует связанные элементы в форме
<figcaption> Определяет заголовок для <figure> Элемент
<figure> Указывает автономное содержимое
<font> Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет шрифт, цвет и размер текста
<footer> Определяет нижний колонтитул для документа или раздела
<form> Определяет HTML-форму для ввода данных пользователем
<frame> Не поддерживается в HTML5.
Определяет окно (фрейм) в фрейме
<frameset> Не поддерживается в HTML5.
Определяет набор фреймов
<h2> to <h6> Определяет заголовки HTML
<head> Определяет сведения о документе
<header> Определяет заголовок документа или раздела
<hr> Определяет тематическое изменение содержания
<html> Определяет корень HTML-документа
<i> Определяет часть текста в альтернативный голос или настроение
<iframe> Определяет встроенный фрейм
<img> Определяет изображение
<input> Определяет элемент управления вводом
<ins> Определяет текст, вставленный в документ
<kbd> Определяет ввод с клавиатуры
<label> Определяет метку для <input> Элемент
<legend> Определяет заголовок для <fieldset> Элемент
<li> Определяет элемент списка
<link> Определяет связь между документом и внешним ресурсом (наиболее используемым для связывания с таблицами стилей)
<main> Указывает основное содержимое документа
<map> Определяет изображение на стороне клиента-Map
<mark> Определяет выделенный/выделенный текст
<menu> Определяет список/меню команд
<menuitem> Определяет команду/пункт меню, который пользователь может вызвать из всплывающего меню
<meta> Определяет метаданные HTML-документа
<meter> Определяет скалярное измерение в пределах известного диапазона (датчика)
<nav> Определяет навигационные ссылки
<noframes> Не поддерживается в HTML5.
Определяет альтернативное содержимое для пользователей, которые не поддерживают кадры
<noscript> Определяет альтернативное содержимое для пользователей, которые не поддерживают сценарии на стороне клиента
<object> Определяет внедренный объект
<ol> Определяет упорядоченный список
<optgroup> Определяет группу связанных параметров в раскрывающемся списке
<option> Определяет параметр в раскрывающемся списке
<output> Определяет результат вычисления
<p> Определяет абзац
<param> Определяет параметр для объекта
<picture> Определяет контейнер для нескольких ресурсов изображения
<pre> Определяет предварительно отформатированный текст
<progress> Представляет ход выполнения задачи
<q> Определяет краткое предложение
<rp> Определяет, что отображать в обозревателях, не поддерживающих аннотации Ruby
<rt> Определяет объяснение/произношение символов (для восточно-азиатских типографии)
<ruby> Определяет аннотацию Ruby (для восточно-азиатских типографий)
<s> Определяет текст, который больше не является правильным
<samp> Определяет выборку выходных данных из компьютерной программы
<script> Определяет сценарий на стороне клиента
<section> Определяет раздел в документе
<select> Определяет раскрывающийся список
<small> Определяет меньший текст
<source> Определяет несколько мультимедийных ресурсов для элементов мультимедиа (<video> И <audio>)
<span> Определяет раздел в документе
<strike> Не поддерживается в HTML5. Использовать <del> или <s> Вместо.
Определяет текст зачеркивания
<strong> Определяет важный текст
<style> Определяет сведения о стиле для документа
<sub> Определяет текст с подстрочным текстом
<summary> Определяет видимый заголовок для <details> Элемента
<sup> Определяет текст с надписью
<svg> Определяет контейнер для графики SVG
<table> Определяет таблицу
<tbody> Группирует содержимое тела в таблице
<td> Определяет ячейку в таблице
<template> Определяет шаблон
<textarea> Определяет многострочный элемент управления вводом (область текста)
<tfoot> Группирует содержимое нижнего колонтитула в таблице
<th> Определяет ячейку заголовка в таблице
<thead> Группирует содержимое заголовка в таблице
<time> Определяет дату и время
<title> Определяет заголовок документа
<tr> Определяет строку в таблице
<track> Определяет текстовые дорожки для элементов мультимедиа (<video> И <audio>)
<tt> Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет телетайп текст
<u> Определяет текст, который должен быть стилистически отличается от обычного текста
<ul> Определяет неупорядоченный список
<var> Определяет переменную
<video> Определяет видео или фильм
<wbr> Определяет возможный разрыв строки

HTML теги по категориям

= Новое в HTML5.

Тег Описание
<!DOCTYPE>  Определяет тип документа
<html> Определяет HTML-документ
<head> Определяет сведения о документе
<title> Определяет заголовок документа
<body> Определяет тело документа
<h2> to <h6> Определяет заголовки HTML
<p> Определяет абзац
<br> Вставка одного разрыва строки
<hr> Определяет тематическое изменение содержания
<!—…—> Определяет комментарий
Тег Описание
<acronym> Не поддерживается в HTML5. Использовать <abbr> Вместо.
Определяет акроним
<abbr> Определяет аббревиатуру или акроним
<address> Определяет контактные данные автора/владельца документа/статьи
<b> Определяет полужирный текст
<bdi> Изолирует часть текста, которая может быть отформатирована в другом направлении от другого текста за его пределами
<bdo> Переопределяет текущее направление текста
<big> Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет большой текст
<blockquote> Определяет раздел, который цитируется из другого источника
<center> Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет центрированный текст
<cite> Определяет название работы
<code> Определяет часть кода компьютера
<del> Определяет текст, который был удален из документа
<dfn> Представляет определяющий экземпляр термина
<em> Определяет подчеркнутый текст 
<font> Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет шрифт, цвет и размер текста
<i> Определяет часть текста в альтернативный голос или настроение
<ins> Определяет текст, вставленный в документ
<kbd> Определяет ввод с клавиатуры
<mark> Определяет выделенный/выделенный текст
<meter> Определяет скалярное измерение в пределах известного диапазона (датчика)
<pre> Определяет предварительно отформатированный текст
<progress> Представляет ход выполнения задачи
<q> Определяет краткое предложение
<rp> Определяет, что отображать в обозревателях, не поддерживающих аннотации Ruby
<rt> Определяет объяснение/произношение символов (для восточно-азиатских типографии)
<ruby> Определяет аннотацию Ruby (для восточно-азиатских типографий)
<s> Определяет текст, который больше не является правильным
<samp> Определяет выборку выходных данных из компьютерной программы
<small> Определяет меньший текст
<strike> Не поддерживается в HTML5. Использовать <del> or <s> Вместо.
Определяет текст зачеркивания
<strong> Определяет важный текст
<sub> Определяет текст с подстрочным текстом
<sup> Определяет текст с надписью
<template> Определяет шаблон
<time> Определяет дату и время
<tt> Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет телетайп текст
<u> Определяет текст, который должен быть стилистически отличается от обычного текста
<var> Определяет переменную
<wbr> Определяет возможный разрыв строки
Тег Описание
<form> Определяет HTML-форму для ввода данных пользователем
<input> Определяет элемент управления вводом
<textarea> Определяет многострочный элемент управления вводом (область текста)
<button> Определяет нажатую кнопку
<select> Определяет раскрывающийся список
<optgroup> Определяет группу связанных параметров в раскрывающемся списке
<option> Определяет параметр в раскрывающемся списке
<label> Определяет метку для <input> Элемента
<fieldset> группирует связанные элементы в форме
<legend> Определяет заголовок для <fieldset> Элемента
<datalist> Задает список предварительно заданных параметров для элементов управления вводом
<output> Определяет результат вычисления
Тег Описание
<frame> Не поддерживается в HTML5.
Определяет окно (фрейм) в фрейме
<frameset> Не поддерживается в HTML5.
Определяет набор фреймов
<noframes> Не поддерживается в HTML5.
Определяет альтернативное содержимое для пользователей, которые не поддерживают рамки
<iframe> Определяет встроенный фрейм
Тег Описание
<img> Определяет изображение
<map> Определяет изображение на стороне клиента-карты
<area> Определяет область внутри изображения-карты
<canvas> Используется для рисования графики, на лету, с помощью сценариев (обычно JavaScript)
<figcaption> Определяет заголовок для <figure> Элемента
<figure> Указывает автономное содержимое
<picture> Определяет контейнер для нескольких ресурсов изображения
<svg> Определяет контейнер для графики SVG
Тег Описание
<audio> Определяет звуковое содержимое
<source> Определяет несколько мультимедийных ресурсов для элементов мультимедиа (<video>, <audio> И <picture>)
<track> Определяет текстовые дорожки для элементов мультимедиа (<video> И <audio>)
<video> Определяет видео или фильм
Тег Описание
<a> Определяет гиперссылку
<link> Определяет связь между документом и внешним ресурсом (наиболее используемым для связывания с таблицами стилей)
<nav> Определяет навигационные ссылки
Тег Описание
<ul> Определяет неупорядоченный список
<ol> Определяет упорядоченный список
<li> Определяет элемент списка
<dir> Не поддерживается в HTML5. Использовать <ul> Вместо.
Определяет список каталогов
<dl> Определяет список описания
<dt> Определяет термин/имя в списке описания
<dd> Определяет описание термина/имени в списке описания
<menu> Определяет список/меню команд
<menuitem> Определяет команду/пункт меню, который пользователь может вызвать из всплывающего меню
Тег Описание
<table> Определяет таблицу
<caption> Определяет заголовок таблицы
<th> Определяет ячейку заголовка в таблице
<tr> Определяет строку в таблице
<td> Определяет ячейку в таблице
<thead> Группирует содержимое заголовка в таблице
<tbody> Группирует содержимое тела в таблице
<tfoot> Группирует содержимое нижнего колонтитула в таблице
<col> Задает свойства столбца для каждого столбца в <colgroup> Элемента
<colgroup> Задает группу из одного или нескольких столбцов в таблице для форматирования
Тег Описание
<style> Определяет сведения о стиле для документа
<div> Определяет раздел в документе
<span> Определяет раздел в документе
<header> Определяет заголовок документа или раздела
<footer> Определяет нижний колонтитул для документа или раздела
<main> Указывает основное содержимое документа
<section> Определяет раздел в документе
<article> Определяет статью
<aside> Определяет содержание в стороне от содержимого страницы
<details> Определяет дополнительные сведения, которые пользователь может просматривать или скрывать
<dialog> Определяет диалоговое окно или окно
<summary> Определяет видимый заголовок для <details> Элемента
<data> Связывает данное содержимое с машинно-читаемым переводом
Тег Описание
<head> Определяет сведения о документе
<meta> Определяет метаданные HTML-документа
<base> Указывает базовый URL-адрес/цель для всех относительных URL-адресов в документе
<basefont> Не поддерживается в HTML5. Вместо этого используйте CSS.
Задает цвет, размер и шрифт по умолчанию для всего текста в документе
Тег Описание
<script> Определяет сценарий на стороне клиента
<noscript> Определяет альтернативное содержимое для пользователей, которые не поддерживают сценарии на стороне клиента
<applet> Не поддерживается в HTML5. Использовать <embed> или <object> Вместо.
Определяет встроенный апплет
<embed> Определяет контейнер для внешнего (не HTML) приложения
<object> Определяет внедренный объект
<param> Определяет параметр для объекта

теги — полный список, таблица тегов по разделам

HTML-элементы — основа языка HTML. Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя элемента.

В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие элементы исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом.

Для удобства пользования я сгруппировала HTML-элементы по тематическим разделам, добавив значения свойства display. Чтобы перейти к таблице, кликните по рисунку.

Таблица 1. HTML-элементы
элемент Описание
<!--...--> Используется для добавления комментариев.
<!DOCTYPE> Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.
<a> Создаёт гипертекстовые ссылки.
<abbr> Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title.
<address> Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
<area> Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь элемента <map>.
<article> Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
<aside> Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
<audio> Загружает звуковой контент на веб-страницу.
<b> Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
<base> Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
<bdi> Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
<bdo> Отображает текст в направлении, указанном в атрибуте dir, переопределяя текущее направление написания текста.
<blockquote> Выделяет текст как цитату, применяется для описания больших цитат.
<body> Представляет тело документа (содержимое, не относящееся к метаданным документа).
<br> Перенос текста на новую строку.
<button> Создает интерактивную кнопку. Элемент может содержать текст или изображение.
<canvas> Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
<caption> Добавляет подпись к таблице. Вставляется сразу после открывающего тега <table>.
<cite> Используется для указания источника цитирования. Отображается курсивом.
<code> Представляет фрагмент программного кода, отображается шрифтом семейства monospace.
<col> Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
<colgroup> Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
<data> Элемент используется для связывания значения атрибута value, которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым элемента.
<datalist> Элемент-контейнер для выпадающего списка элемента <input>. Варианты значений помещаются в элементы <option>.
<dd> Используется для описания термина из элемента <dt>.
<del> Помечает текст как удаленный, перечёркивая его.
<details> Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в элемент <summary>.
<dfn> Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
<dialog> Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя.
<div> Элемент-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
<dl> Элемент-контейнер, внутри которого находятся термин и его описание.
<dt> Используется для задания термина.
<em> Выделяет важные фрагменты текста, отображая их курсивом.
<embed> Элемент-контейнер для встраивания внешнего интерактивного контента или плагина.
<fieldset> Группирует связанные элементы в форме, рисуя рамку вокруг них.
<figcaption> Заголовок/подпись для элемента <figure>.
<figure> Самодостаточный элемент-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
<footer> Определяет завершающую область (нижний колонтитул) документа или раздела.
<form> Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action.
<h2-h6> Создают заголовки шести уровней для связанных с ними разделов.
<head> Элемент-контейнер для метаданных HTML-документа, таких как <title>, <meta>, <script>, <link>, <style>.
<header> Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
<hr> Горизонтальная линия для тематического разделения параграфов.
<html> Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
<i> Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
<iframe> Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
<img> Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
<input> Создает многофункциональные поля формы, в которые пользователь может вводить данные.
<ins> Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
<kbd> Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
<meta> Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке <head> может быть несколько элементов <meta>, так как в зависимости от используемых атрибутов они несут разную информацию.
<meter> Индикатор измерения в заданном диапазоне.
<nav> Раздел документа, содержащий навигационные ссылки по сайту.
<noscript> Определяет секцию, не поддерживающую сценарий (скрипт).
<object> Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется элемент <param>.
<ol> Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
<optgroup> Контейнер с заголовком для группы элементов <option>.
<option> Определяет вариант/опцию для выбора в раскрывающемся списке <select>, <optgroup> или <datalist>.
<output> Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
<p> Параграфы в тексте.
<param> Определяет параметры для плагинов, встраиваемых с помощью элемента <object>.
<picture> Элемент-контейнер, содержащий один элемент <img> и ноль или несколько элементов <source>. Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
<pre> Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
<progress> Индикатор выполнения задачи любого рода.
<q> Определяет краткую цитату.
<ruby> Контейнер для Восточно-Азиатских символов и их расшифровки.
<rb> Определяет вложенный в него текст как базовый компонент аннотации.
<rt> Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby>, выводится уменьшенным шрифтом.
<rtc> Отмечает вложенный в него текст как дополнительную аннотацию.
<rp> Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
<s> Отображает текст, не являющийся актуальным, перечеркнутым.
<samp> Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
<script> Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src.
<section> Определяет логическую область (раздел) страницы, обычно с заголовком.
<select> Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в <option>.
<small> Отображает текст шрифтом меньшего размера.
<source> Указывает местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio>.
<span> Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
<strong> Расставляет акценты в тексте, выделяя полужирным.
<style> Подключает встраиваемые таблицы стилей.
<sub> Задает подстрочное написание символов, например, индекса элемента в химических формулах.
<summary> Создаёт видимый заголовок для элемента <details>. Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
<sup> Задает надстрочное написание символов.
<table> Элемент для создания таблицы.
<tbody> Определяет тело таблицы.
<td> Создает ячейку таблицы.
<template> Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое элемента не является его дочерним элементом.
<textarea> Создает большие поля для ввода текста.
<tfoot> Определяет нижний колонтитул таблицы.
<th> Создает заголовок ячейки таблицы.
<thead> Определяет заголовок таблицы.
<time> Определяет дату/время.
<title> Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
<tr> Создает строку таблицы.
<track> Добавляет субтитры для элементов <audio> и <video>.
<u> Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
<ul> Создает маркированный список.
<var> Выделяет переменные из программ, отображая их курсивом.
<video> Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
<wbr> Указывает браузеру возможное место разрыва длинной строки.

HTML Основные примеры. Уроки для начинающих. W3Schools на русском


В этой теме: ↓

Не беспокойтесь, если в этих примерах используются теги, которые вы ещё не изучили.

О них вы узнаете в следующих главах.


HTML Документы

Все веб-страницы являются HTML-документами.

Все HTML документы согласно спецификации HTML5 должны начинаться с объявления типа документа: <!DOCTYPE html>.

Сам HTML документ начинается тегом <html> и заканчивается тегом </html>.

Видимая часть HTML документа находится между <body> и </body>.

Body от анг. — тело веб-страницы.


HTML Заголовки

HTML заголовки (от анг. header) определяются с помощью тегов от <h2> до <h6>.

Тегом <h2> определяются наиболее важные заголовки. Тегом <h6> определяются наименее важные заголовки.

Визуально — заголовки h2 являются самыми большими, а заголовки h6 — самыми маленькими.


HTML Параграфы (абзацы)

HTML параграфы определяются с помощью тега <p>:

Примечание. В русском языке слово paragraph обычно переводится как абзац. Но для удобства в среде разработчиков принято использовать слово параграф, чтобы не было путаницы.


HTML Ссылки

HTML ссылки определяются с помощью тега <a> (от анг. anchor — якорь):

Назначение ссылки указывается в атрибуте href (от анг. hyper refferal — гипернаправление).

Атрибуты используются для предоставления дополнительной информации об элементах HTML. Атрибут href для тега <a> является обязательным.

Подробнее об атрибутах вы узнаете в следующем уроке.


HTML Изображения

HTML изображения определяются с помощью тега <img> (от анг. image — изображение).

Исходный файл src, альтернативный текст alt, ширина width и высота height предоставляются в качестве атрибутов:

Атрибуты src (от анг. source — ресурс) и alt (от анг. alternative — альтернативный) являются обязательными для тега <img>. Атрибуты размеров картинки (width и height) являются не обязательными.


HTML Кнопки

HTML кнопки определяются с помощью тега <button> (от анг. button — кнопка):


HTML Списки

HTML списки определяются с помощью тегов <ul> (от анг. unordered list — неупорядоченный/маркированный список) или <ol> (от анг. ordered list — упорядоченный/нумерованный список), с последующими тегами <li> (list items — пункты списка):

Подробнее об этих и других HTML-элементах вы узнаете в следующих главах данного учебника.


HTML Основные примеры. W3Schools на русском. Уроки для начинающих

HTML Основные примеры. Видеоуроки сайта W3Schools на русском!


Вопросы для самоконтроля

  • Что такое HTML-документы?
  • Что такое HTML-элементы?
  • Что такое тип документа?
  • Что такое HTML-заголовки?
  • Что такое HTML-параграфы (абзацы)?
  • Что такое HTML-ссылки?
  • Что такое HTML-изображения?
  • Что такое HTML-кнопки?
  • Что такое HTML-списки?

HTML теги — справочник с примерами и описанием команд

В этом справочнике мы рассмотрим все основные html теги, которые пригодятся при создании сайтов и веб-документов. Вы узнаете, что это такое и для чего нужно. Также на примерах я покажу как это все используется.

Что такое html теги

HTML тег — это специальный код (элемент или команда), который указывает браузеру, как интерпретировать документ для пользователя.

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

Парный html тег с атрибутом

Все теги имеют одинаковый формат. Они начинаются с угловой скобки < и заканчиваются на обратную скобку >.

Между угловыми скобками обязательно должны присутствовать кодовые слова. Но конечно же, здесь нельзя писать все подряд и выдавать это за теги. Есть определенный набор тегов по спецификации html. Например, выделение текста жирным:

<b>Жирный текст</b>

Ниже мы еще к этому вернемся.

Стоит сказать, что теги пишутся маленькими латинскими буквами. Хотя нет ничего страшного если вы их напишите большими. Однако стандарт подразумевает писать их в нижнем регистре.

У тега могут быть атрибуты.

Это дополнительные детали, которые его описывают. Они всегда вставляются в открывающей части. К примеру, в тег <а> (ссылка на документ) указываем путь к странице, к которой нужно перейти после клика. Записывается она в атрибут href.

<a href="https://site.ru">Текст ссылки</a>

Виды хтмл тегов

Все хтмл теги подразделяются на два вида:

  1. Одиночные
  2. Парные

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

К примеру, если вам нужно вставить абзац, то сначала ставим открывающий тег <p>. Это будет начало абзаца. Далее вставляем нужный текст (контент). После этого мы должны сообщить браузеру, где наш абзац заканчивается. Для этого вставляем закрывающий тег </p>.

<p>Пример небольшого текстового абзаца</p>

[ads_custom_box title=»Обратите внимание!» color_border=»#e87e04″]К закрывающему элементу всегда добавляется слеш. Благодаря ему браузер понимает, где заканчивается команда. В данном примере конец абзаца.[/ads_custom_box]

Если же нам нужно выделить определенный участок текста жирным, то здесь тоже делаем по аналогии.

Сначала из справочника (будет ниже) подбираем нужный тег, который выделяет текст жирным. Далее вставляем открывающий тег в том месте, где начнется выделение. А закрывающий там, где оно заканчивается.

<p><b>Пример</b> небольшого текстового абзаца</p>
Наглядный пример выделения

Есть определенные правила вложенности тегов. Более подробно на эту тему вы найдете в статье про структуру html документа.

Одиночные состоят из одного тега. Например, <hr> или <!Doctype html>. Представляют собой самостоятельные сущности, которым не нужен внутренний контент.

<br> <!-- перенос строки -->
<hr> <!-- разделитель -->
<input type="text"> <!-- поле ввода -->
<img src="logo.png"> <!-- вывод изображения -->

Основные html теги

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

Вот они:

Doctype предназначен для определения типа документа. То есть по нему браузер понимает, что это html-документ, а не что-либо еще.

Тег HTML — это контейнер, который имеет основное содержимое страницы. Контейнером называется потому что у него есть парный тег (открывающий и закрывающий). Абсолютно все элементы (кроме doctype) должны быть вложены в этот контейнер.

Head содержит в себе служебные теги. Они предназначены для работы поисковых систем и браузеров. Обычно эта информация не видна пользователю.

Body — это основное тело страницы. Она содержит рабочие элементы, которые видны пользователям. Как правило, это информационный контент.

Вот так выглядит скелет любой html-страницы:

<!doctype html>
<html>
    <head>
        
    </head>

    <body>
        
    </body>
</html>

Справочник HTML

Здесь расположен справочник html тегов. Словарь содержит все основные команды, которые можно использовать для создания сайта и веб-документов.

Все теги имеют описание. А при переходе по ссылке, можно более подробно узнать о данном элементе. Там вы увидите подробные определения и примеры использования.

Тег html

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

ИмяОписаниеЗначение свойства display
<html></html>корневой элемент html-документаblock

Служебные

Служебные теги предназначены для поисковых систем и браузеров. Браузеры по ним определяют тип документа и его интерпретацию. А поисковым системам важно для четкого сканирования документа и его ранжирования в выдаче.

ИмяОписаниеЗначение свойства display
<!—…—>комментарийnone
<!DOCTYPE>объявление типа документаnone
<head></head>контейнер для метаданных html-документаnone
<title></title>заголовок / имя html-документаnone
<meta>мета-данные веб-страницыnone
<link>подключает внешние таблицы стилейnone
<script></script>подключает сценарии к страницеnone
<style></style>подключает встраиваемые таблицы стилейnone
<base>базовый url-адрес, относительно которого вычисляются относительные адресаnone
<noscript></noscript>секция, не поддерживающая скриптblock

HTML теги для текста

Здесь расположены основные html теги для работы с текстом на странице. Как правило, это различные выделения, подчеркивания, вставка заголовков и так далее.

Такие элементы делают текст наиболее приятным для восприятия. Обязательно используйте такие команды для форматирования текста.

ИмяОписаниеЗначение свойства display
<h2></h2> — <h6></h6>заголовки шести уровнейblock
<p></p>параграфы в текстеblock
<br>перенос текста на новую строкуnone
<hr>горизонтальная линияblock
<wbr>возможное место разрыва длинной строкиnone
<blockquote></blockquote>большая цитатаblock
<cite></cite>источник цитированияinline
<q></q>краткая цитатаinline
<code></code>фрагмент программного кодаinline
<kbd></kbd>текст, вводимый пользователем с клавиатурыinline
<pre></pre>выводит текст с пробелами и переносамиblock
<samp></samp>результат выполнения сценарияinline
<var></var>выделяет переменные из программinline
<del></del>перечёркивает текст, помечая как удаленныйinline
<s></s>перечёркивает неактуальный текстinline
<dfn></dfn>выделяет термин курсивомinline
<em></em>выделяет важные фрагменты текста курсивомinline
<i></i>выделяет текст курсивом без акцентаinline
<strong></strong>выделяет полужирным важный текстinline
<b></b>задает полужирное начертание отрывка текста, без дополнительного акцентаinline
<ins></ins>подчёркивает изменения в текстеinline
<u></u>выделяет отрывок текста подчёркиванием, без дополнительного акцентаinline
<mark></mark>выделяет фрагменты текста желтым фономinline
<small></small>отображает текст шрифтом меньшего размераinline
<sub></sub>подстрочное написание символовinline
<sup></sup>надстрочное написание символовinline
<time></time>дата / время документа или статьиinline
<abbr></abbr>аббревиатура или акронимnone
<address></address>контактные данные автора документа или статьиblock
<bdi></bdi>изолирует текст, читаемый справа налевоinline
<bdo></bdo>задаёт направление написания текстаinline
<ruby></ruby>контейнер для Восточно-Азиатских символов и их расшифровкиinline
<rp></rp>тег для скобок вокруг символовnone
<rt></rt>расшифровка символовblock

Теги таблицы html

Здесь расположены html теги для создания таблиц. Такие элементы тоже рекомендую использовать на странице. Особенно в аналитических каких-то материалах. Так пользователи могут быстро сориентироваться в ваших данных.

ИмяОписаниеЗначение свойства display
<table></table>html-таблицаtable
<tr></tr>строка таблицыtable-row
<th></th>заголовок столбца таблицыtable-cell
<td></td>ячейка таблицыtable-cell
<thead></thead>блок заголовков таблицыtable-header-group
<tbody></tbody>тело таблицыtable-row-group
<tfoot></tfoot>нижний колонтитул таблицыtable-footer-group
<caption></caption>подпись к таблицеtable-caption
<col>выбирает для форматирования столбцыtable-column
<colgroup></colgroup>контейнер для одного или нескольких <col>table-column-group

Картинки

Обязательно используйте тег картинки в html-документе. Тоже полезно при восприятии и усвоения информации. Еще полезно и в SEO. Можно получать трафик с поиска по картинкам. И стоит отметить, что материал без изображений очень плохо ранжируется в поиске.

ИмяОписаниеЗначение свойства display
<img>html-изображенияinline
<map></map>активные области на карте-изображенииinline
<area>гиперссылка с текстом или активная область внутри карты-изображенияinline
<canvas></canvas>холст-контейнер для динамического отображения изображенийinline-block

Списки

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

НазваниеОписаниеЗначение свойства display
<ol></ol>упорядоченный нумерованный списокblock
<ul></ul>маркированный списокblock
<li></li>элемент спискаlist-item
<dl></dl>контейнер для термина и его описанияblock
<dt></dt>задаёт терминblock
<dd></dd>расшифровывает терминblock

Ссылки

Тег ссылки в html всегда один. Будьте осторожны при его использовании. Всегда проверяйте, куда вы ссылаетесь. То есть, что это за сайт и релевантен ли он данной теме. Также в атрибуте данного тега внимательно прописывайте адрес перехода.

Если что-то сделаете не так, то вас перебросит на страницу с 404 ошибкой. Это плохо для юзабилити и продвижения сайта в целом. Также обращайте на количество линков. Ссылайтесь только тогда, когда это необходимо!

НазваниеОписаниеЗначение свойства display
<a></a>гиперссылкаinline

Встраиваемый контент

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

ИмяОписаниеЗначение свойства display
<audio></audio>добавляет аудио-файлыinline-block
<video></video>добавляет видео-файлыinline-block
<source>указывает местоположение и тип альтернативных файлов для <audio> и <video>none
<track>субтитры для элементов <audio> и <video>none
<embed>встраивает внешний интерактивный контент или плагинinline-block
<object></object>контейнер для встраивания мультимедиаinline-block
<param>задаёт параметры для плагинов, встраиваемых с помощью элемента <object>none
<iframe></iframe>создаёт встроенный фреймblock

Группировка контента

Дополнительная группировка контента по различным секциям страницы. Своего рода семантическая структура страницы. Очень полезно для юзабилити сайта.

Структура страницы

К примеру, постраничная навигация позволяет разбивать длинные страницы архивов на несколько подстраниц. Это улучшает как удобство пользования, так и скорость загрузки страницы.

ИмяОписаниеЗначение свойства display
<body></body>тело html-документаblock
<div></div>контейнер для разделов html-документа, группирует блочные элементыblock
<span></span>контейнер для строчных элементовinline
<header></header>секция для вводной информации сайта или группы навигационных ссылокblock
<footer></footer>секция для нижнего колонтитула документа или разделаblock
<section></section>логическая область (раздел) страницы, обычно с заголовкомblock
<article></article>раздел контента, образующий независимую часть документа или сайтаblock
<aside></aside>контент страницы, имеющий косвенное отношение к основному контентуblock
<nav></nav>раздел документа, содержащий навигационные ссылки по сайтуblock
<figure></figure>независимый контейнер для такого контента как изображения, диаграммы и т.п.block
<figcaption></figcaption>заголовок для элемента <figure>block
<details></details>контейнер с дополнительными сведениями, который можно открыть или закрытьblock
<summary></summary>видимый заголовок для элемента <details>block
<main></main>контейнер для уникального основного содержимого в пределах одной страницы сайтаblock

Формы

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

НазваниеОписаниеЗначение свойства display
<form></form>html-формаblock
<input>многофункциональные поля формыinline-block
<textarea>многострочное поле формыinline-block
<label></label>текстовая метка для элемента <input>inline
<datalist></datalist>контейнер для выпадающего списка элемента <input> с <option>-значениямиnone
<select></select>элемент управления с выбором значений из предложенных вариантов <option>inline-block
<optgroup></optgroup>контейнер с заголовком для группы элементов <option>block
<option></option>вариант (опция) в раскрывающемся спискеblock
<fieldset></fieldset>группирует связанные элементы в формеblock
<legend></legend>заголовок элементов формы, сгруппированных с помощью <fieldset>block
<button></button>интерактивная кнопкаinline-block
<keygen>генерирует закрытый и открытый ключиinline-block
<progress></progress>индикатор выполнения задачиinline-block
<meter></meter>индикатор измерения в заданном диапазонеinline-block
<output></output>поле для вывода результата вычисленияinline

На этом все!

Мы рассмотрели html теги и их значение. Используйте данную справку, как шпаргалку при создании сайтов. Однако желательно, чтобы вы наизусть знали хотя бы основные команды. Если с кодом будете часто работать, то с этим проблем не будет. Запомнить можно быстро.

Список HTML тегов на одной странице. Справочник по тегам HTML5

Тег Краткое описание
<!—…—> Комментарий. Подробнее
<!DOCTYPE> Определяет тип документа. Подробнее
<a> Ссылка, гиперссылка, якорь. Подробнее
<abbr> Определяет текст как аббревиатуру. Подробнее
<address> Контактная информация автора или владельца документа. Подробнее
<area> Определяет область на карте-изображении
<article> Статья
<aside> Контент в стороне (содержимое не является основным на странице по смыслу)
<audio> Позволяет вставить воспроизводимый аудио файл. Подробнее
<b> Полужирный текст. Подробнее
<base> Задает базовый URL или атрибут target для относительных ссылок в документе. Подробнее
<bdi> Область, где написание текста может имееть другое направления. Подробнее
<bdo> Устанавливает направление написания текста. В отличии от <bdi> направление указывается физическое направление Подробнее
<blockquote> Цитата. Подробнее
<body> Указывает область body документа. Подробнее
<br> Перенос строки. Подробнее
<button> Кликабельная кнопка. Подробнее
<canvas> Используется для рисовании графики с помощью скриптов
<caption> Подпись таблицы. Подробнее
<cite> Сноска на название материала. Подробнее
<code> Используется для вставки компьютерного кода в текстовом виде. Подробнее
<col> Задает характеристики колонок в таблице. Подробнее
<colgroup> Определяет группу из одной или более колонок таблицы для форматирования. Подробнее
<datalist> Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле. Подробнее
<dd> Определяет описание термина из тега <dt> в списке терминов <dl>. Подробнее
<del> Текст, который удален в новой версии документа. Подробнее
<details> Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть. Подробнее
<dfn> Указывает, что содержимое является термином. Подробнее
<dialog> Определяет диалоговое окно или интерактивный элемент
<div> Блочный элемент — один из основных элементов верстки. Подробнее
<dl> Определяет список определений. Подробнее
<dt> Название термина в списке определений <dl>. Подробнее
<em> выделенный по смыслу текст (обычно, текст выделенный курсивом). Подробнее
<embed> Контейнер для внешнего приложения
<fieldset> Группа связанных элементов в форме. Подробнее
<figcaption> Заголовок для <figure> элемента
<figure> Определяет автономную группу из нескольких элементов (например картинка с подписью)
<footer> Нижний колонтитул
<form> Определяет форму пользовательского ввода. Подробнее
<h2> — <h6> Заголовки HTML разного уровня: <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Подробнее
<head> Указывает область head документа. Подробнее
<header> Блок заголовка
<hr> Горизонтальная линия — тематический разделитель. Подробнее
<html> Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. Подробнее
<i> Выделяет текст курсивом. Подробнее
<iframe> Определяет встроенный фрейм
<img> Изображение, картинка. Подробнее
<input> Поле для ввода, элемент формы. Подробнее
<ins> Текст, который был добавлен в новой версии документа. Подробнее
<kbd> Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. Подробнее
<label> Метка для поля ввода. Обычно содержит подпись поля. Подробнее
<legend> Заголовок элементов <fieldset>. Подробнее
<li> Элемент списка. Подробнее
<link> Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS). Подробнее
<main> Основной контент
<map> Контейнер для <area>. Определяет пользовательскую карту на изображении
<mark> Выделенный текст (обычно с помощью подсветки фона). Подробнее
<menu> Контейнер для списка пунктов меню
<menuitem> Определяет элементы, которые пользователь может вызвать из контекстного меню
<meta> Используется для определения мета-данных документа. Подробнее
<meter> Измеритель значений в заданном диапазоне
<nav> Контейнер для навигационных элементов
<noscript> Альтернативный контент для пользователей, отключивших скрипты
<object> Определяет встроенный объект
<ol> Определяет нумерованный список. Подробнее
<optgroup> Определяет группу связанных вариантов в выпадающем списке. Дает название группы. Подробнее
<option> Параметр (вариант выбора) в выпадающем списке. Подробнее
<output> Результат вычислений. Подробнее
<p> Абзац. Подробнее
<param> Задает параметры для встроенных объектов
<picture> Контейнер для нескольких изображений
<pre> Предварительно отформатированный текст. Подробнее
<progress> Индикатор выполнения (прогресса)
<q> Цитата в тексте. Подробнее
<rp> Альтернативный текст, если браузер не поддерживает тег <ruby>. Подробнее
<rt> Аннотация к содержимому тега <ruby>. Подробнее
<ruby> Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). Подробнее
<s> Перечеркнутый текст. Подробнее
<samp> Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). Подробнее
<script> Определяет скрипт или подключение скрипта из внешнего ресурса. Подробнее
<section> Раздел
<select> Определяет выпадающий список или список с множественным выбором. Подробнее
<small> Текст шрифтом меньшего размера. Подробнее
<source> Определяет ресурс для тегов <video>, <audio> и <picture>. Подробнее
<span> Строчный элемент. Подробнее
<strong> Текст, выделенный по значению. Обычно отображается полужирным. Подробнее
<style> Определяет контейнер для определения CSS стилей документа. Подробнее
<sub> Отображает текст в виде нижнего индекса. Подробнее
<summary> Заголовок внутри тега <details>. Подробнее
<sup> Отображает текст в виде верхнего индекса. Подробнее
<table> Определяет таблицу. Подробнее
<tbody> Определяет область контента в таблице. Подробнее
<td> Ячейка в таблице <table>. Подробнее
<textarea> Многострочное поле для ввода. Подробнее
<tfoot> Определяет группу строк в нижней части таблицы <table> — нижний колонтитул. Подробнее
<th> Ячейка — заголовок в таблице <table>. Подробнее
<thead> Определяет группу строк в верхней части таблицы <table> — верхний колонтитул. Подробнее
<time> Дата и/или время. Подробнее
<title> Заголовок HTML документа. Подробнее
<tr> Определяет строку в таблице. Подробнее
<track> Определяет текстовую дорожку для тегов <video> и <audio> Подробнее
<ul> Определяет маркированный список. Подробнее
<var> Используется для обозначения содержимого тега как переменной. Подробнее
<video> Позволяет вставить воспроизводимое видео. Подробнее
<wbr> Место, где допускается перенос строки. Подробнее

Справочник по элементам HTML — по категориям

Тег Описание
  Определяет тип документа
Определяет документ HTML
<голова> Содержит метаданные/информацию для документа
<название> Определяет заголовок документа
<тело> Определяет тело документа
От

до

Определяет заголовки HTML

Определяет параграф

Вставляет одиночный разрыв строки
<час> Определяет тематическое изменение содержимого
Определяет комментарий
Тег Описание
<акроним> Не поддерживается в HTML5. Вместо этого используйте .
Определяет аббревиатуру
<сокращение> Определяет аббревиатуру или акроним
<адрес> Определяет контактную информацию автора/владельца документа/статьи
Определяет полужирный текст
Изолирует часть текста, которая может быть отформатирована в другом направлении из другого текста вне его
Переопределяет текущее направление текста
<большой> Не поддерживается в HTML5.Вместо этого используйте CSS.
Определяет большой текст
<цитата> Определяет раздел, цитируемый из другого источника
<центр> Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет центрированный текст
<цитировать> Определяет название произведения
<код> Определяет часть компьютерного кода
<удалить> Определяет текст, который был удален из документа
Указывает термин, который будет определен в содержимом
Определяет выделенный текст
<шрифт> Не поддерживается в HTML5.Вместо этого используйте CSS.
Определяет шрифт, цвет и размер текста
<я> Определяет часть текста в альтернативном голосе или настроении
Определяет текст, который был вставлен в документ
Определяет ввод с клавиатуры
<знак> Определяет отмеченный/выделенный текст
<метр> Определяет скалярное измерение в пределах известного диапазона (манометр)
<пред> Определяет предварительно отформатированный текст
<прогресс> Представляет ход выполнения задачи
Определяет короткую цитату
<рп> Определяет, что показывать в браузерах, не поддерживающих рубиновые аннотации
Определяет расшифровку/произношение символов (для восточноазиатских типография)
<рубин> Определяет рубиновую аннотацию (для восточноазиатской типографики)
<с> Определяет текст, который больше не является правильным
<образец> Определяет образец вывода из компьютерной программы
<маленький> Определяет меньший текст
<забастовка> Не поддерживается в HTML5.Вместо этого используйте или .
Определяет зачеркнутый текст
<сильный> Определяет важный текст
Определяет подстрочный текст
Определяет текст с надстрочным индексом
<шаблон> Определяет контейнер для содержимого, которое должно быть скрыто при загрузке страницы
<время> Определяет конкретное время (или дату/время)
<тт> Не поддерживается в HTML5.Вместо этого используйте CSS.
Определяет текст телетайпа
<и> Определяет текст, который не артикулирован и имеет стиль, отличный от обычного. текст
<вар> Определяет переменную
Определяет возможный разрыв строки
Тег Описание
<форма> Определяет форму HTML для пользовательского ввода
<ввод> Определяет элемент управления вводом
<текстовое поле> Определяет элемент управления многострочным вводом (текстовая область)
<кнопка> Определяет нажимаемую кнопку
<выбрать> Определяет раскрывающийся список
<группа опций> Определяет группу связанных параметров в раскрывающемся списке
<опция> Определяет параметр в раскрывающемся списке
<метка> Определяет метку для элемента
<набор полей> Группирует связанные элементы в форме
<легенда> Определяет заголовок для элемента
<список данных> Указывает список предопределенных параметров для элементов управления вводом
<выход> Определяет результат вычисления
Тег Описание
Определяет изображение
<карта> Определяет карту изображения на стороне клиента
<область> Определяет область внутри карты изображения
<холст> Используется для рисования графики на лету с помощью сценариев (обычно JavaScript)
Определяет заголовок для элемента
<рисунок> Указывает автономный контент
<картинка> Определяет контейнер для нескольких ресурсов изображений
Определяет контейнер для графики SVG
Тег Описание
<ул> Определяет ненумерованный список
<ол> Определяет упорядоченный список
  • Определяет элемент списка
    <каталог> Не поддерживается в HTML5.Вместо этого используйте
      .
      Определяет список каталогов
    <дл> Определяет список описаний
    <дт> Определяет термин/имя в списке описаний
    <дд> Определяет описание термина/имени в списке описаний
    Тег Описание
    <таблица> Определяет таблицу
    <заголовок> Определяет заголовок таблицы
    <й> Определяет ячейку заголовка в таблице
    Определяет строку в таблице
    <тд> Определяет ячейку в таблице
    <заголовок> Группирует содержимое заголовка в таблице
    Группирует содержимое тела в таблице
    <фут> Группирует содержимое нижнего колонтитула в таблице
    <столбец> Указывает свойства столбца для каждого столбца в элементе
    Указывает группу из одного или нескольких столбцов в таблице для форматирования
    Тег Описание
    <стиль> Определяет информацию о стиле для документа
    <дел> Определяет раздел в документе
    <диапазон> Определяет раздел в документе
    <заголовок> Определяет заголовок для документа или раздела
    <нижний колонтитул> Определяет нижний колонтитул для документа или раздела
    <основной> Указывает основное содержание документа
    <раздел> Определяет раздел в документе
    <артикул> Определяет артикул
    <в сторону> Определяет содержимое помимо содержимого страницы
    <детали> Определяет дополнительные сведения, которые пользователь может просматривать или скрывать.
    <диалог> Определяет диалоговое окно или окно
    <сводка> Определяет видимый заголовок для элемента
    <данные> Добавляет машиночитаемый перевод данного контента
    Тег Описание
    <голова> Определяет информацию о документе
    <мета> Определяет метаданные о документе HTML
    <база> Указывает базовый/целевой URL-адрес для всех относительных URL-адресов в документе
    <базовый шрифт> Не поддерживается в HTML5.Вместо этого используйте CSS.
    Указывает цвет, размер и шрифт по умолчанию для всего текста в документе
    Тег Описание
    <скрипт> Определяет скрипт на стороне клиента
    Определяет альтернативный контент для пользователей, которые не поддерживают клиентские скрипты
    <апплет> Не поддерживается в HTML5. Вместо этого используйте или .
    Определяет встроенный апплет
    <вставить> Определяет контейнер для внешнего (не HTML) приложения
    <объект> Определяет встроенный объект
    <параметр> Определяет параметр для объекта

    Ваши первые 10 тегов HTML

    Только начинаете работать с HTML? Вот 10 основных тегов HTML, которые вам нужно знать при создании веб-страниц.Если вы узнаете, как работают эти 10 тегов, у вас будет достаточно знаний, чтобы собрать базовую страницу.

    В конце руководства вы найдете код примера веб-страницы, который включает все 10 тегов, чтобы вы могли увидеть, как их использовать.

    Теги и элементы

    Тег HTML — это специальное слово или буква, заключенная в угловые скобки < и >. Вы используете теги для создания элементов HTML , таких как абзацы или ссылки.

    Многие элементы имеют открывающий тег и закрывающий тег — например, элемент p (абзац) имеет тег

    , за которым следует текст абзаца, за которым следует закрывающий тег

    .

    Некоторые элементы не имеют закрывающего тега. Они называются пустыми элементами . Например, элемент br для вставки разрывов строк записывается просто
    .

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

    Теперь давайте посмотрим на эти 10 тегов!

    1.

    — Корневой элемент

    Все веб-страницы начинаются с элемента html .Его также называют корневым элементом , потому что он находится в корне дерева элементов, составляющих веб-страницу.

    Элемент html находится в корне дерева элементов веб-страницы.

    Чтобы создать элемент html , вы пишете открывающий тег , за которым следует закрывающий тег . Все остальное на вашей веб-странице помещается между этими двумя тегами:

    .
     
    
        (все остальные элементы страницы идут сюда) 
    
      

    2.

    — Заголовок документа

    Элемент head содержит информацию о веб-странице, в отличие от самого содержимого веб-страницы. Есть много элементов, которые вы можете поместить внутрь элемента головки , например:

    • наименование (описано ниже)
    • ссылка , которую вы можете использовать для добавления таблиц стилей и фавиконов на свою страницу
    • meta для указания таких вещей, как наборы символов, описания страниц и ключевые слова для поисковых систем
    • скрипт , для добавления кода JavaScript на страницу

    Вот типичная головка элемент:

     
    <голова>
      Приключения моего кота Лаки
      
      
      
      
      
    
      

    3.

    </code> … <code> — Заголовок страницы

    Элемент title содержит заголовок страницы. Заголовок отображается в строке заголовка браузера (полоса в верхней части окна браузера), а также в закладках, результатах поисковой системы и многих других местах.

    Заголовок должен кратко и точно описывать содержание страницы. Попробуйте дать каждой странице вашего сайта свой уникальный заголовок.

    Вот пример:

     
    Приключения моего кота Лаки
      

    4.

    — Контент страницы

    Элемент body появляется на странице после элемента head . Он должен содержать все содержимое вашей веб-страницы: текст, изображения и так далее.Все веб-страницы имеют один единственный элемент body , за исключением страниц набора фреймов, которые вместо этого содержат элементов frame .

    Вот общий формат элемента body :

     
    <тело>
        (все содержимое страницы здесь) 
    
      

    5.

    — Заголовок раздела

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

    HTML фактически поддерживает 6 элементов заголовков: h2 , h3 , h4 , h5 , h5 и h6 . h2 — для самых важных заголовков, h3 — для менее важных подзаголовков и так далее. Обычно вам не нужно использовать более h2 , h3 и h4 , если только ваша страница не очень длинная и сложная.

    Вот пример элемента заголовка h2 :

     
     

    Приключения моего кота Лаки

    6.

    — Параграф

    Элемент p позволяет создавать абзацы текста. Большинство браузеров отображают абзацы с вертикальным промежутком между каждым абзацем, красиво разбивая текст.

    Хотя вы можете создавать «абзацы» текста, просто используя теги
    для вставки пустых строк между фрагментами текста, вместо этого лучше использовать элементы p . Это не только аккуратнее, но и дает браузерам, поисковым системам и другим не-людям лучшее представление о том, как структурирована ваша страница.

    Вот пример абзаца:

     
    

    У моего кота Лаки много приключений. Вчера она поймала мышь, а сегодня утром поймала двух!

    Хорошее эмпирическое правило при написании текста для Интернета — убедиться, что каждый абзац содержит один пункт, тему или мысль. Если вы хотите рассказать о двух разных вещах, используйте два абзаца.

    7.

    — Ссылка

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

    Чтобы создать ссылку, вы оборачиваете теги и вокруг содержимого, которое хотите использовать для ссылки, и указываете URL-адрес для ссылки в теге href . атрибут.

    Вот как создать текст со ссылкой на www.example.com :

     
    Посетите этот замечательный веб-сайт!
      

    8.

    — Изображение

    Элемент img позволяет вставлять изображения на веб-страницы. Чтобы вставить изображение, вы сначала загружаете изображение на свой веб-сервер, а затем используете тег для ссылки на имя файла загруженного изображения. Вот пример:

     
    Мое фото
      

    Атрибут alt требуется для всех тегов img . Он используется браузерами, которые не отображают изображения, чтобы предоставить посетителю альтернативный текст.

    Узнайте больше об использовании изображений на веб-страницах.

    9.

    — Блочный контейнер для контента

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

    • Верхние и нижние колонтитулы
    • Колонки контента и боковые панели
    • Выделенные блоки в текстовом потоке
    • Области страницы с определенной целью, например рекламные места
    • Галереи изображений

    Добавив атрибуты class и/или id к элементам div , вы сможете использовать CSS для стилизации и позиционирования div s.Это основа для создания макетов страниц на основе CSS.

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

     
    <дел>
       

    Заголовок боковой панели

    Текст боковой панели

    Больше текста на боковой панели

    10.

    — Встроенный контейнер для содержимого

    Элемент span похож на div в том смысле, что он используется для добавления структуры к вашему контенту.Разница в том, что div — это блочный элемент, а span — встроенный элемент:

    • Блочные элементы , такие как div , h2 и p , — это элементы, предназначенные для хранения относительно больших или автономных блоков содержимого, например абзацев текста. Элемент блочного уровня всегда начинается с новой строки.
    • Встроенные элементы , такие как span , a и img , предназначены для хранения небольших фрагментов содержимого, например нескольких слов или предложений, в более крупном блоке содержимого.Добавление встроенного элемента не приводит к созданию новой строки. Элементы уровня блока могут содержать встроенные элементы, но встроенные элементы не могут содержать элементы уровня блока.

    Как и в случае с div , вы часто добавляете атрибут class и/или id к span , чтобы можно было стилизовать его с помощью CSS.

    В следующем примере используется элементов span для обозначения названий продуктов в абзаце. Затем эти названия продуктов могут быть выделены с помощью CSS.Система пользовательского поиска также потенциально может использовать информацию, предоставленную элементами span , для идентификации продуктов на странице.

     
    

    Некоторые из наших продуктов включают SuperWidgets, MegaWidgets и WonderWidgets.

    Все вместе

    Теперь, когда вы изучили эти 10 основных тегов HTML, давайте объединим их все на одной веб-странице:

     
    
      <голова>
        Приключения моего кота Лаки
        
        
        
        
        
      
      <тело>
         

    Приключения моего кота Лаки

    <дел>

    У моего кота Лаки много приключений. Вчера она поймала мышь, а сегодня утром поймала двух!

    Вот фото Лаки:

    Счастливчик
    <дел>

    Покупайте наши товары!

    Некоторые из наших продуктов включают SuperWidgets, MegaWidgets и WonderWidgets.

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

    HTML-теги — Список всех HTML-тегов с примерами TutorialBrain

    Главная » HTML » Теги HTML

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

    Тег Описание
    Описывает документ HTML.
    <голова> Представляет заголовок HTML-документа.
    <название> Описывает заголовок HTML-документа.
    <тело> Описывает содержимое документа.
    Этот тег используется для вставки комментария в код документа.
    Тег Описание

    Заголовок второго уровня 2

    Заголовок третьего уровня 3

    Заголовок четвертого уровня 4
    Заголовок пятого уровня 5
    Это наименьший заголовок 6
    Тег Описание

    Пункт

    Подробнее о

    см. здесь.

    Тег Описание
    <база> Описывает базовый URL-адрес для всех других относительных URL-адресов.
    <а> Задает гиперссылку.
    Тег Описание
    <скрипт> Описывает сценарий на стороне клиента, который представляет собой JavaScript.
    Когда скрипты отключены, тег
    Тег Описание
    <таблица> Чтобы определить таблицу в HTML.
    <заголовок> Чтобы определить заголовок таблицы в HTML. Это как имя таблицы
    -й похож на «Заголовок таблицы», чтобы указать ячейку заголовка в таблице. Он используется для предоставления имени столбца таблицы.
    tr похоже на «Table Row», чтобы указать строку в таблице.Он используется для каждой строки таблицы.
    <тд> td похож на «Данные таблицы», чтобы указать ячейку в таблице.
    <заголовок> thead похож на «Заголовок таблицы», используемый для изменения свойств, таких как цвет содержимого заголовка в таблице HTML. Мы можем изменить свойства заголовка.
    tbody похож на «Тело таблицы», используемое для изменения свойств, таких как цвет содержимого в теле в таблице HTML.Мы можем изменить свойства тела.
    <фут> tfoot похож на «нижний колонтитул таблицы», используемый для изменения свойств, таких как цвет содержимого нижнего колонтитула в таблице HTML. Мы можем изменить свойства нижнего колонтитула.
    <столбец> Определяет свойства каждого столбца в colgroup.
    Используется для указания группы из одного или нескольких столбцов в таблице для форматирования.
    Форма
    Тег Описание
    <форма> используется на всех веб-сайтах для сбора информации о пользователях, посещающих ваш веб-сайт.
    <ввод> Это поле ввода, где пользователь может ввести данные в заданной форме.
    <текстовое поле> Представляет многострочный элемент управления для редактирования обычного текста.
    <кнопка> Создает различные интерактивные кнопки, такие как «Отправить», «Сбросить», «Отменить», «ОК» и многие другие.
    <выбрать> Описывает раскрывающийся список.
    <группа опций> Отображать группу связанных списков опций в виде выпадающего списка.
    <опция> Отображает параметр в раскрывающемся списке.
    <метка> Описывает текстовую метку с полем ввода формы.
    <набор полей> Для формирования связанных данных в группе используется элемент
    .
    <легенда> Представляет заголовок элемента
    .
    <список данных> Предопределенный параметр указан в раскрывающемся списке.
    <выход> Объявляет результаты расчета.
    Тег Описание
    <сокращение> Определяет сокращения.
    <адрес> Мы можем предоставить контактную информацию автора страницы, используя элемент адреса.
    Используется для выделения жирным шрифтом.
    BDI означает двунаправленную изоляцию.Он форматирует текст в другом направлении.
    Описывает двунаправленное переопределение текста.
    <цитата> Элемент HTML blockquote используется для форматирования блока текста в виде длинной цитаты с большим отступом, чем окружающий текст.
    <цитировать> Указывает название работы.
    <код> Задает текст в компьютерном коде.
    <удалить> Определяет удаленный текст в документе HTML.
    Этот тег используется для термина определения в HTML.
    Форматирует текст документа в выделенный текст.
    <я> Форматирует текст в документе курсивом.
    ins описывает вставленный текст в HTML-документ.
    Обозначает вводимый пользователем текст с клавиатуры.
    <знак> отмечает текст.
    <метр> В предопределенном диапазоне тег указывает скалярное измерение, известное как манометр.
    <пред> Описывает предварительно отформатированный текст на HTML-странице. Он используется для сохранения существующих пробелов или разрывов строк.
    <прогресс> Ход выполнения любой задачи определяется индикатором выполнения.
    Объявляет короткие котировки.
    <рп> Этот тег используется для помощи браузерам, которые не поддерживаются аннотацией ruby.
    Задает произношение символов в аннотациях ruby.
    <рубин> Указывает рубиновую аннотацию, которая используется для отображения многих языков Восточной Азии.
    <с> Указывает, что данный текст неверен и перечеркнут текст.
    <образец> Описывает образец вывода компьютерной программы.
    <маленький> Опишите мелкий текст.
    <сильный> Используется для описания важного текста.
    Мы можем дать индекс к тексту.
    используется для добавления надстрочного индекса к тексту.
    <шаблон> Для шаблона.
    <время> Указывает дату и время в документе HTML.
    <тт> Опишите текст телетайпа.
    <вар> Указывает имя переменной в математическом выражении или контексте программирования.
    Определяет положение в тексте, где браузер может при необходимости разорвать строку.
    Тег Описание
    Представляет изображение.
    <карта> Представляет карту в теге . И карта изображения содержит интерактивные области.
    <область> Используется для определения области внутри карты-изображения, где он содержит интерактивную область на карте-изображении.
    <холст> Этот тег в HTML5 используется для рисования графики на веб-странице с помощью JavaScript.
    Этот тег дает подпись к элементу рисунка.Его можно поместить в качестве первого или последнего дочернего элемента элемента
    .
    <рисунок> Определяет медиа-контент с титрами. Содержимое элемента
    принадлежит основному потоку.
    Это язык, используемый для описания 2D-графики и графических приложений в формате XML.
    Тег Описание
    <голова> Представляет головной раздел HTML-документа, который содержит метаинформацию о HTML-странице
    <мета> Описывает метаданные HTML-страницы, где они содержат описание страницы, автора страницы, ключевые слова.
    <база> Описывает базовый URL-адрес для всех других относительных URL-адресов.
    <базовый шрифт> Этот тег используется для указания размера шрифта, цвета и семейства шрифтов для документа. (устарело)

    вы можете щелкнуть здесь для получения дополнительных сведений о метатегах

    Тег Описание
    <объект> Он используется для встраивания мультимедиа в документы HTML, такие как видео, аудио, апплеты Java, ActiveX, PDF и Flash.

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

    Тег .
    Тег Описание
    <ул> используется для ненумерованного списка. В списке будут элементы, отмеченные маркированными элементами
    <ол> Представляет упорядоченный список в числовом или алфавитном порядке
  • Представляет элемент или элементы в списке.Мы можем перечислить термин и описание термина ниже этого
    <дл> Используется для списка описаний.
    <дт> Для Term в списке описания.
    <дд> Этот тег представляет описание термина в списке описаний.
    <меню> Представляет список команд, которые используются для построения меню.
    <пункт меню> Представляет команду, которую пользователь может вызвать из всплывающего меню.
    Тег Описание
    <час> Представляет тематический разрыв между элементами уровня абзаца в документе HTML. Если мы воспользуемся этим, он вставит горизонтальную линию.

    Используется для разрыва строки (разрыв строки).

    Интервью Вопросы и ответы

    Тег

    — это HTML-код, определяющий каждую структуру на HTML-странице.Теги начинаются с «<>» и заканчиваются на «». Большая часть тега содержит открывающий и закрывающий теги.
    Например,

    <> — открывающий тег.
    — Закрывающий тег.

    Большинство тегов HTML также имеют закрывающий тег, но есть несколько тегов/элементов HTML, которые не требуют закрывающих тегов, а именно: -


    - разрыв строки


    - горизонтальная строка

    В HTML есть 6 заголовков: -

    ……


     

    ……


     

    ……


     
    ……

     
    ……

     
    ……

    Есть три тега, которые можно использовать для разделения части текста.


    – Для разрыва строки.


    - Выделить Абзац.
    - Для больших кавычек.

    Теги HTML - javatpoint

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

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

    Файл HTML должен иметь некоторые важные теги, чтобы веб-браузер мог различать простой текст и текст HTML. Вы можете использовать столько тегов, сколько хотите, в соответствии с требованиями вашего кода.

    Некоторые теги HTML не закрыты, например br и hr.


    Тег: br означает разрыв строки, он разрывает строку кода.


    Тег: hr означает горизонтальное правило. Этот тег используется для размещения линии на веб-странице.

    ,

    ,

    ,

    ,

    ,
    ,
    ,
    , , , ,
    , ,
    , , , , , , , ,
    , ,  и 

    form, input, textarea, select, option, optgroup, button, label, fieldset и legend

    Ниже приведен полный список тегов HTML с описанием, которые расположены в алфавитном порядке.

    .
    Имя тега Описание
    Этот тег используется для добавления комментариев в HTML-документ.
    Этот тег используется для указания версии HTML
    А
    <а> Он называется тегом привязки и создает гиперссылку или ссылку.
    <сокращение> Определяет аббревиатуру фразы или более длинного слова.
    <акроним> Определяет аббревиатуру слова. (не поддерживается в HTML5)
    <адрес> Определяет контактную информацию автора статьи HTML
    <апплет> Определяет встроенный апплет Java. (не поддерживается в HTML5)
    <область> Определяет область карты изображения.
    <артикул> Определяет автономное содержимое.
    <в сторону> Определяет контент помимо основного контента. В основном представлен в виде боковой панели.
    <аудио> Используется для встраивания звукового содержимого в документ HTML.
    Б
    Используется для выделения текста жирным шрифтом.
    <база> Этот тег определяет базовый URL-адрес для всех относительных URL-адресов в документе.
    <базовый шрифт> Этот тег используется для установки шрифта, размера и цвета по умолчанию для всех элементов документа. (не поддерживается в HTML5)
    Этот тег используется для обеспечения изоляции той части текста, которая может быть отформатирована в разных направлениях от окружающего текста.
    Используется для переопределения текущего направления текста.
    <большой> Этот тег используется для увеличения размера шрифта на один уровень по сравнению с окружающим содержимым. (не поддерживается в HTML5)
    <цитата> Используется для определения содержимого, взятого из другого источника.
    <тело> Используется для определения основного раздела HTML-документа.

    Используется для переноса одиночной строки.
    <кнопка> Используется для представления нажимаемой кнопки
    С
    <холст> Используется для предоставления графического пространства в веб-документе.
    <заголовок> Используется для определения заголовка таблицы.
    <центр> Используется для выравнивания содержимого по центру. (не поддерживается в HTML5)
    <цитировать> Используется для определения названия произведения, книги, веб-сайта и т. д.
    <код> Используется для отображения части программного кода в документе HTML.
    <столбец> Он определяет столбец в таблице, который представляет общие свойства столбцов и используется с элементом
    Используется для определения группы столбцов в таблице.
    Д
    <данные> Используется для привязки контента к машиночитаемому переводу.
    <список данных> Используется для предоставления предопределенного списка параметров ввода.
    <дд> Используется для предоставления определения/описания термина в списке описаний.
    <удалить> Определяет текст, который был удален из документа.
    <детали> Определяет дополнительные детали, которые пользователь может либо просмотреть, либо скрыть.
    Используется для обозначения термина, который определяется в предложении/фразе.
    <диалог> Определяет диалоговое окно или другие интерактивные компоненты.
    <каталог> Используется как контейнер для списка каталогов файлов. (не поддерживается в HTML5)
    <дел> Определяет раздел или раздел в HTML-документе.
    <дл> Требуется определить список описаний.
    <дт> Используется для определения термина в списке описаний.
    Е
    Используется для выделения содержимого, применяемого в этом элементе.
    <вставить> Используется как встроенный контейнер для внешних файлов/приложений/носителей и т. д.
    Ф
    <набор полей> Используется для группировки связанных элементов/меток в веб-форме.
    Используется для добавления подписи или пояснения к элементу
    .
    <рисунок> Он используется для определения автономного содержимого и в основном относится к одному блоку.
    <шрифт> Определяет шрифт, размер, цвет и начертание содержимого. (не поддерживается в HTML5)
    <нижний колонтитул> Определяет нижний колонтитул веб-страницы.
    <форма> Используется для определения формы HTML.
    <кадр> Он определяет определенную область веб-страницы, которая может содержать другой файл HTML. (не поддерживается в HTML5)
    <набор кадров> Определяет группу фреймов. (не поддерживается в HTML5)
    Н
    От

    до

    Он определяет заголовки для документа HTML от уровня 1 до уровня 6.
    <голова> Определяет заголовок HTML-документа.
    <заголовок> Определяет заголовок раздела или веб-страницы.
    <час> Используется для применения тематического разрыва между элементами уровня абзаца.
    Представляет корень документа HTML.
    я
    <я> Используется для представления текста другим голосом.