Краткая таблица всех HTML тегов с описанием и фото

Без знаний языка гипертекстовой разметки нельзя создать ни одного веб-сайта или какого-либо другого интернет проекта. Все начинается с HTML, а уже потом все остальное CSS, PHP и другие различные скриптовые языки для формирования всяких красивостей и интересных функций. Не смотря на свою простоту в использовании при создании html страниц, этот язык имеет около 130, а возможно и больше тегов, к которым применяются разные атрибуты для изменения различных свойств.


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

Но практически всегда вы увидите в коде страницы такие теги как тип документа <!DOCTYPE html>, <head>, <body>, титл заголовка страницы<title>, <p> параграфы и вставка изображений <IMG>, а так же многие другие.

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

Все HTML теги в одной таблице
Теги: Описание: Атрибуты: Скриншот:
<!DOCTYPE> Этот параметр предоставляет интернет браузеру общую информацию об HTML документе.  html, public
<!— —> Этот тег дает возможность добавить комментарий в HTML код, который не выводится на интернет странице и не обрабатывается Web-браузером. Нет
<a> Тег <a> предназначен для создания гиперссылок. accesskey, charset, coords, href, hreflang, media, name, rel, rev, shape, tabindex, target, title, type
<abbr> Тег <abbr> нужен для создания аббревиатур. Он подчеркивает сокращение пунктирной линией,а при наведении мышкой можно увидеть расшифровку аббревиатуры. title

<abbr>

abbr

<acronym> Тег <acronym> выделяет текст как акроним, и подчеркивает его пунктирной линией. title

<acronym>

acronym

<address> Тег <address> нужен для указания контактных данных создателя Web-страницы или сайта. Нет

<address>

address

<applet> Тег <applet> нужен для вставки на страницу апплетов(программы, на языке Java). align, alt, archive, code, codebase, height, hspace, vspace, width

<applet>

applet

<area> Тег <area> создает активные области изображения, которые являются ссылками. accesskey, alt, coords, href, hreflang, nohref, shape, tabindex, target, type
<article> Тег <article> задает логический блок, содержание которого может бытьвроде новости, статьи, записи блога, форума и т.п. Нет
<aside> Тег <aside> предназначен для определения блока сбоку от контента для размещения рубрик, ссылок на архив, меток и т.п. Боковая панель. Нет

<aside>

aside

<audio> Тег <audio> предназначен для вставки в Web-страницу аудиоролика. autoplay, controls, loop, preload, src

<audio>

audio

<b> Тег <b> предназначен для выделения текста жирным начертанием. Нет

<b>

b

<base> Этот элемент устанавливается внутри тега <head> и инструктирует браузер относительно полного базового адреса текущего документа. href, target
<basefont> Тег <basefont> нужен для создания свойств шрифта, таких как: размер, цвет и тип шрифта. color, face, size

<basefont>

basefont

<bdi> Тег <bdi> необходим для отделения фрагмента текста, который должен быть отделен от основного описания.Такое оформление нужно для текстов с разными языками. dir
<bdo> Тег <bdo> предназначен для вывода текста справа налево или слева на право. dir

<bdo>

bdo

<bgsound> Тег <bgsound> предназначен для проигрывания музыкального файла, который будет проигрываться в фоновом режимена Web-странице при ее открытии. balance, loop, src, volume
<blockquote> Тег <blockquote> предназначен для добавления цитат. Нет

<blockquote>

blockquote

<big> Тег <big> увеличивает размер выделенного текста относительно обычного. Нет

<big>

big

<body> Тег <body> необходим для хранения содержимого Web-страницы, а именно контента в окне браузера.Контент, который следует выводить в документе, нужно располагать именно внутри тега <body>. alink, background, bgcolor, bgproperties, bottommargin, leftmargin, link, rightmargin, scroll, text, topmargin, vlink
<blink> Заставляет ваш текст мигать. Нет
<br> Тег <br> нужен для перевода строки на новую. clear

<br>

br

<button> Тег <button> нужен для создания кнопки на вашей Web-странице. accesskey, autofocus, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, type, value

<button>

button

<canvas> Тег <canvas> предназначен для создания области, в которую при помощи JavaScript можно нарисовать разные объекты, выводить изображения, трансформировать их и менять свойства. height, width

<canvas>

canvas

<caption> Этот тег необходим для создания заголовка к таблице и может размещаться только внутри тега <table>,сразу после открывающего тега. По умолчанию отображается перед таблицей и описывает ее содержимое. align, valign

<caption>

caption

<center> Тег <center> выравнивает содержимое по центру. Нет

<center>

center

<cite> Тег <cite> делает ваш текст цитатой либо сноской на другой источник. Нет

<cite>

cite

<code> Тег <code> предназначен для опубликования части или полного исходного кода программы. Нет

<code>

code

<col> Тег <col> предназначен для задания ширины и других характеристик одной или нескольких колонок таблицы. align, char, charoff, span, valign, width

<col>

col

<colgroup> Этот тег используется для задания ширины и стиля одной или нескольких колонок таблицы. align, char, charoff, span, valign, width

<colgroup>

colgroup

<command> Тег <command> нужен для отображения команды в виде переключателя, флажка или маркера. Этот тег необходимо размещать внутри <menu>, иначе он не будет отображаться. checked, disabled, icon, label, radiogroup, type
<comment> Тег <comment> нужен для добавления комментариев в HTML код. Его необходимо использовать только внутри тега <body>. Нет
<datalist> Этот тег предназначен для создания списка вариантов, которые можно выбирать в текстовом поле. id

<datalist>

datalist

<dd> Тег <dd> предназначен для создания списка определений. Нет

<dd>

dd

<del> Тег <del> необходим для того чтобы показать что данный текст был удален. Обычно текст выделенный этим тегом отображается как перечеркнутый. cite, datetime

<del>

del

<details> Этот тег предназначен для хранения описания к чему-либо, которое может быть отображено пользователем. open
<dfn> Тег <dfn> предназначен для выделения нового термина, который оформляется курсивом. Нет

<dfn>

dfn

<dir> Тег <dir> предназначен для создания списков, содержащих названия директорий. Нет

<dir>

dir

<div> Тег <div> предназначен для выделения фрагмента документа с целью изменения вида содержимого.Обычно вид блока настраивается с помощью CSS-стилей. align, title

<div>

div

<dl> Тег <dl> предназначен для создания списка определений. Нет

<dl>

dl

<dt> Список начинается с тега <dl>, а внутри обычно содержатся тег <dt> создающий термини тег <dd> задающий определение этого термина. Нет

<dt>

dt

<em> Тег <em> нужен затем чтобы акцентировать внимание на тексте. Обычно отображается в браузере курсивным начертанием. Нет

<em>

em

<embed> Этот элемент используется для загрузки и отображения объектов(аудио, видеофайлов, флэш и т.п.) align, height, hidden, hspace, pluginspage, src, type, vspace, width
<fieldset> Тег <fieldset> необходим для группирования элементов формы. disabled, form, title

<fieldset>

fieldset

<figcaption> Тег <figcaption> предназначен для описания тега <figure>.И должен быть первым или последним элементом в группе. Нет

<figcaption>

figcaption

<figure> Тег <figure> предназначен для группирования разных элементов, например, картинок и подписей к ним. Нет

<figure>

figure

<font> Этот тег служит для придания вашему тексту оригинальных характеристик шрифта, таких как цвет, размер и тип.Этот тег считается устаревшим и рекомендуется им не пользоваться. color, face, size

<font>

font

<form> Тег <form> предназначен для установки формы на Web-страницу.Форма нужна для обмена данными между пользователем и сервером. accept-charset, action, autocomplete, enctype, method, name, novalidate, target

<form>

form

<footer> Тег <footer> нужен для реализации <<подвала>> сайта, это раздел обычно находящийся внизу HTML страницы,где размещается контактная информация, имя создателя сайта, дата и правовая информация. Нет

<footer>

footer

<frame> Тег <frame> предназначен для определения свойства отдельного фрейма, на которые делится окно браузера. bordercolor, frameborder, name, noresize, scrolling, src

<frame>

frame

<frameset> Тег <frameset> определяет структуру фреймов на Web-странице.Фреймы разделяют окно браузера на отдельные окна, расположенные вплотную друг к другу.В каждую из таких окон загружается отдельная Web-страница определяемая с помощью тега <frame>. border, bordercolor, cols, frameborder, framespacing, rows

<frameset>

frameset

<h1> Этот тег необходим для создания заголовка первого уровня. Текст будет отображаться крупным жирным шрифтом.(Самый крупный заголовок) align

<h1>

h1

<h2> Этот тег необходим для создания заголовка второго уровня. Текст будет отображаться крупным жирным шрифтом.(Менее крупный заголовок чем заголовок первого уровня) align

<h2>

h2

<h3> Этот тег необходим для создания заголовка третьего уровня. Текст будет отображаться крупным жирным шрифтом.(Менее крупный заголовок чем заголовок второго уровня) align

<h3>

h3

<h4> Этот тег необходим для создания заголовка четвертого уровня. Текст будет отображаться крупным жирным шрифтом.(Менее крупный заголовок чем заголовок третьего уровня) align

<h4>

h4

<h5> Этот тег необходим для создания заголовка пятого уровня. Текст будет отображаться крупным жирным шрифтом.(Менее крупный заголовок чем заголовок четвертого уровня) align

<h5>

h5

<h6> Этот тег необходим для создания заголовка шестого уровня. Текст будет отображаться крупным жирным шрифтом.(Самый маленький заголовок) align

<h6>

h6

<head> Тег <head> нужен для хранения технических элементов, которые помогают Web-браузеру работать с этим документом.Например, хранение мета данных, которые используют поисковые системы. profile
<header> Этот тег предназначен для создания <<шапки>> сайта, которая обычно размещается в верхней части HTML страницы. Нет
<hgroup> Этот тег предназначен для группирования заголовков(h1-h6) Web-страницы. Внутри этого тега располагаются теги от <h1> до <h6>. Нет
<hr> Тег <hr> предназначен для рисования горизонтальной линии. Так же дизайн этой линии можно изменять в зависимости от параметров,например: цвет и толщину. align, color, noshade, size, width

<hr>

hr

<html> <html> это глобальный тег, в который обычно заключено все содержимое Web-страницы.Исключение составляет элемент <!DOCTYPE> — он необходим для определения типа документа. title, manifest, xmlns
<i> Тег <i> предназначен для выделения шрифта курсивом. Нет

<i>

i

<iframe> Тег <iframe> предназначен для создания плавающего фрейма. align, allowtransparency, frameborder, height, hspace, marginheight, marginwidth, name, sandbox, scrolling, seamless, src, srcdoc, vspace, width
<img> align align, alt, border, height, hspace, ismap, longdesc, src, vspace, width, usemap
<input> Тег <input> предназначен для создания различных элементов интерфейса и позволяет обеспечить взаимодействие с пользователем.Такими элементами считаются: текстовые поля, различные кнопки, переключатели и флажки, расположенные на форме. accept, accesskey, align, alt, autocomplete, border, checked, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, list, max, maxlength, min, multiple, name, pattern, placeholder, readonly, required, size, src, step, tabindex, type, value

<input>

input

<ins> Тег <ins> необходим для того чтобы выделить текст, который добавлен в документ как новый.Обычно отображается как подчеркнутый текст. cite, datetime

<ins>

ins

<isindex> Тег <isindex> необходим для реализации поискового индекса в вашем Web-документе. Этот тег устарел. action, prompt

<isindex>

isindex

<kbd> Этот тег применяется для обозначения названия клавиш. Нет

<kbd>

kbd

<keygen> Этот тег предназначен для генерации ключей. autofocus, challenge, disabled, form, keytype, name
<label> Тег <label> предназначен для установки связи между определенной меткой, в качестве которой обычно выступает текст, и элементом формы(<input>, <select>, <textarea>). accesskey, for
<legend> Тег <legend> предназначен для создания заголовка группы элементов формы, которая создается с помощью тега <fieldset>.Текст который располагается внутри тега <legend>, встраивается в рамку. accesskey, align, title

<legend>

legend

<li> Тег определяет отдельный элемент списка. А внешние теги <ul> и <ol> определяют вид списка – маркированный или нумерованный. type, value

<li>

li

<link> Тег <link> предназначен для подключения внешних файлов, например: стилей CSS или шрифтов.Размещается внутри контейнера <head> и не создает ссылку. charset, href, media, rel, sizes, type
<map> Тег <map> служит областью для элементов <area>, которые задают активные области для карт-изображений. name
<marquee> Тег <marquee> предназначен для создания бегущей строки. behavior, bgcolor, direction, height, hspace, loop, scrollamount, scrolldelay, truespeed, vspace, width
<mark> Тег <mark> предназначен для обозначения текста как выделенного. С помощью CSS стилей можно изменить его вид. Нет

<mark>

mark

<menu> Этот тег нужен для отображения списка пунктов меню. Список формируется с помощью тегов <li>. label, type

<menu>

menu

<meta> Тег <meta> предназначен для описания метатегов, которые нужны для браузеров и поисковых систем. charset, content, http-equiv, name
<meter> Тег <meter> предназначен для вывода значения в известном диапазоне. value, min, max, low, high, optimum

<meter>

meter

<nav> Тег <nav> предназначен для описания навигации по сайту, обычно в блок этого тега помещают приоритетные ссылки.Наподобие главного меню или меню навигации. Нет

<nav>

nav

<nobr> Этот тег предназначен для отображения текста в браузере без переносов. Нет

<nobr>

nobr

<noembed> Этот тег нужен для того чтобы отображать информацию в виде текстового сообщения, если ваш Web-браузер не поддерживает работу с плагинами. Нет
<noframes> Тег <noframes> предназначен для отображения информирующего текста, если браузер не поддерживает фреймы и не отображает их. Нет
<noscript> Тег <noscript> предназначен для вывода информационного текстового сообщения, если Web-браузер не поддерживает работу со скриптами или они отключены. Нет
<object> Тег <object> предназначен для сообщения Web-браузеру, как загружать и отображать объекты,которые исходно браузер не понимает. align, archive, classid, code, codebase, codetype, data, height, hspace, tabindex, type, vspace, width
<ol> Тег <ol> предназначен для создания нумерованного списка. Каждая часть списка начинается с тега <li>. type, reversed, start

<ol>

ol

<optgroup> Этот тег представляет собой контейнер, внутри которого располагаются теги <option> объединенные в одну группу. disabled, label
<option> Тег <option> указывает отдельные пункты списка, создаваемого с помощью тега <select>. disabled, label, selected, value
<output> Тег <output> нужен для обозначения области, в которую выводится информация, обычно при помощи скриптов. for, form, name

<output>

output

<p> Тег <p> предназначен для создания абзаца. align
<param> Этот тег предназначен для передачи значений параметров Java-аплетам или объектам Web-страницы, созданным с помощью тегов <aplet> или <object>. name, type, value, valuetype
<plaintext> Тег <plaintext> предназначен для отображения содержимого — как есть.Поэтому можно писать внутри этого тега любой текст, включая HTML теги, другой код и т.п. Нет

<plaintext>

plaintext

<pre> Тег <pre> предназначен для отображения текста моноширинным шрифтом со всеми пробелами между словами. Нет

<pre>

pre

<progress> Этот тег необходим для создания прогресса завершенности задачи. value, max

<progress>

progress

<q> Тег <q> предназначен для выделения в тексте цитат. Web-браузер автоматически отображает содержимое в кавычках. Нет

<q>

q

<rp> Используется для вывода текста в браузерах, которые не поддерживают тег <ruby>.В остальных браузерах текст, заключенный в контейнер <rp>, не отображается. Тег <rp> должен идти до или после тега <rt>. Нет
<rt> Этот тег предназначен для добавления аннотации сверху или снизу от текста, расположенном между тегам <ruby>. Нет

<rt>

rt

<ruby> Тег <ruby> нужен для добавления аннотации сверху или снизу от заданного текста. Нет

<ruby>

ruby

<s> Тег <s> предназначен для отображения текста как перечеркнутого. Нет

<s>

s

<samp> Тег <samp> предназначен для отображения текста, который является результатом выполнения компьютерной программы или скрипта. Нет

<samp>

samp

<script> Этот тег необходим для добавления скриптов в HTML-документ. Скрипты могут располагаться во внешнем файле. defer, language, src, type

<script>

script

<section> Тег <section> предназначен для разделения материала по теме. Нет
<select> Тег <select> предназначен для создания раскрывающегося списка или простого выборочного списка. accesskey, autofocus, disabled, form, multiple, name, required, size, tabindex

<select>

select

<small> Тег <small> предназначен для уменьшения размера шрифта. Нет

<small>

small

<span> Этот тег нужен для определения строчных элементов на Web-странице.С помощью этого тега можно выделить часть информации внутри других тегов с установкой своего стиля. Нет

<span>

span

<source> Тег <source> предназначен для добавления звуковых или видео данных для тегов <audio> и <video>. media, src, type

<source>

source

<strike> Тег <strike> предназначен для отображения текста как перечеркнутого. Нет

<strike>

strike

<strong> Этот тег нужен для отображения текста жирным начертанием. Нет

<strong>

strong

<style> Тег <style> предназначен для определения стилей элементов Web-страницы. media, type

<style>

style

<sub> Тег <sub> предназначен для отображения текста в виде нижнего индекса.Текст выглядит уменьшенного размера и располагается чуть ниже основного. Нет

<sub>

sub

<summary> Тег <summary> предназначен для информационного текста — который разворачивается и сворачивается. Нет

<summary>

summary

<sup> Тег <sup> предназначен для отображения текста в виде верхнего индекса.Текст выглядит уменьшенного размера и располагается чуть выше основного. Нет

<sup>

sup

<table> Тег <table> предназначен для создания и определения таблицы.Таблица обычно состоит из строк и ячеек, <tr> и <td>. align, background, bgcolor, border, bordercolor, cellpadding, cellspacing, cols, frame, height, rules, summary, width

<table>

table

<tbody> Тег <tbody> необходим для хранения одной или нескольких строк таблицы. align, char, charoff, bgcolor, valign
<td> Этот тег предназначен для создания одной ячейки таблицы.Он должен размещаться внутри тега <tr>. abbr, align, axis, background, bgcolor, bordercolor, char, charoff, colspan, headers, height, nowrap, rowspan, scope, valign, width
<textarea> Тег <textarea> предназначен для создания области, в которую можно вводить несколько строк текста. accesskey, autofocus, cols, disabled, form, maxlength, name, placeholder, readonly, required, rows, tabindex, wrap
<tfoot> Тег <tfoot> нужен для хранения одной или нескольких строк, которые расположены внизу таблицы. align, bgcolor, char, charoff, valign
<th> Тег <th> нужен для создания ячейки таблицы, которая будет являться заголовочной.Текст в ней отформатирован и отображается жирным шрифтом и выравнивается по центру. abbr, align, axis, background, bgcolor, bordercolor, char, charoff, colspan, headers, height, nowrap, rowspan, scope, valign, width

<th>

th

<thead> Этот элемент предназначен для хранения одной или нескольких строк, которые находятся вверху таблицы.Допускается использовать не более одного элемента <thead> в пределах одной таблицы,и он должен находится в исходном коде сразу после тега <table>. align, char, charoff, bgcolor, valign
<time> Тег <time> помечает текст внутри тега как дату или время. datetime, pubdate
<title> Тег <title> предназначен для создания заголовка Web-документа.Обычно заголовок отображается в левом верхнем углу окна интернет обозревателя. Нет

<title>

title

<tr> Тег <tr> предназначен для создания строки таблицы.Ячейки в строке могут задаваться с помощью тега <th> или <td>. align, bgcolor, bordercolor, char, charoff, valign
<tt> Тег <tt> предназначен для отображения текста моноширинным шрифтом. Нет

<tt>

tt

<u> Тег <u> предназначен для того чтобы оформить текст как подчеркнутый. Нет

<u>

u

<ul> Тег <ul> предназначен для создания маркированного списка. type

<ul>

ul

<var> Тег <var> предназначен для выделения переменных компьютерных программ.Web-браузеры помечают текст курсивным начертанием. Нет

<var>

var

<video> Тег <video> предназначен для добавления, воспроизведения и управления настройками видеороликов на вашей Web-странице. autoplay, controls, height, loop, poster, preload, src, width
<wbr> Тег <wbr> предназначен для указания Web-браузеру места, где допускается делать перенос строки, если этого требует ширина родительского элемента. Нет

<wbr>

wbr

<xmp> Этот тег предназначен для отображения содержимого <<как есть>> и оформляется фиксированной шириной. Нет

<xmp>

xmp

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

Скачать программу PFW

Теги: , ,

Предыдущая/следующая

Вам может быть интересно:

Поделиться в соц сетях:

Twitter Facebook Vk Googlepluse Linkedin

Подпишитесь на обновления этого блога по RSSRSS, RSSMAILEmail или TwitterTwitter!

Случайная подборка из рубрики:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Обсуждаемые темы:

Авторизация
*
*
Регистрация
*
*
*
Генерация пароля