Без знаний языка гипертекстовой разметки нельзя создать ни одного веб-сайта или какого-либо другого интернет проекта. Все начинается с HTML, а уже потом все остальное CSS, PHP и другие различные скриптовые языки для формирования всяких красивостей и интересных функций. Не смотря на свою простоту в использовании при создании html страниц, этот язык имеет около 130, а возможно и больше тегов, к которым применяются разные атрибуты для изменения различных свойств.
В принципе если открыть любой html документ или интернет страницу вы всегда в ней увидите большое количество тегов из языка гипертекстовой разметки, хоть они и часто повторяются, так как описывают одни и те же элементы конструкции html страницы, такие как форматирование параграфов текста или вставки картинки в статью.
Но практически всегда вы увидите в коде страницы такие теги как тип документа <!DOCTYPE html>, <head>, <body>, титл заголовка страницы<title>, <p> параграфы и вставка изображений <IMG>, а так же многие другие.
Для того чтобы не забыть уже известные вам теги и почерпнуть что то новое, публикую здесь краткую, но информативную таблицу с основными 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 |
|
| <acronym> | Тег <acronym> выделяет текст как акроним, и подчеркивает его пунктирной линией. | title |
|
| <address> | Тег <address> нужен для указания контактных данных создателя Web-страницы или сайта. | Нет |
|
| <applet> | Тег <applet> нужен для вставки на страницу апплетов(программы, на языке Java). | align, alt, archive, code, codebase, height, hspace, vspace, width |
|
| <area> | Тег <area> создает активные области изображения, которые являются ссылками. | accesskey, alt, coords, href, hreflang, nohref, shape, tabindex, target, type | |
| <article> | Тег <article> задает логический блок, содержание которого может бытьвроде новости, статьи, записи блога, форума и т.п. | Нет | |
| <aside> | Тег <aside> предназначен для определения блока сбоку от контента для размещения рубрик, ссылок на архив, меток и т.п. Боковая панель. | Нет |
|
| <audio> | Тег <audio> предназначен для вставки в Web-страницу аудиоролика. | autoplay, controls, loop, preload, src |
|
| <b> | Тег <b> предназначен для выделения текста жирным начертанием. | Нет |
|
| <base> | Этот элемент устанавливается внутри тега <head> и инструктирует браузер относительно полного базового адреса текущего документа. | href, target | |
| <basefont> | Тег <basefont> нужен для создания свойств шрифта, таких как: размер, цвет и тип шрифта. | color, face, size |
|
| <bdi> | Тег <bdi> необходим для отделения фрагмента текста, который должен быть отделен от основного описания.Такое оформление нужно для текстов с разными языками. | dir | |
| <bdo> | Тег <bdo> предназначен для вывода текста справа налево или слева на право. | dir |
|
| <bgsound> | Тег <bgsound> предназначен для проигрывания музыкального файла, который будет проигрываться в фоновом режимена Web-странице при ее открытии. | balance, loop, src, volume | |
| <blockquote> | Тег <blockquote> предназначен для добавления цитат. | Нет |
|
| <big> | Тег <big> увеличивает размер выделенного текста относительно обычного. | Нет |
|
| <body> | Тег <body> необходим для хранения содержимого Web-страницы, а именно контента в окне браузера.Контент, который следует выводить в документе, нужно располагать именно внутри тега <body>. | alink, background, bgcolor, bgproperties, bottommargin, leftmargin, link, rightmargin, scroll, text, topmargin, vlink | |
| <blink> | Заставляет ваш текст мигать. | Нет | |
| <br> | Тег <br> нужен для перевода строки на новую. | clear |
|
| <button> | Тег <button> нужен для создания кнопки на вашей Web-странице. | accesskey, autofocus, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, type, value |
|
| <canvas> | Тег <canvas> предназначен для создания области, в которую при помощи JavaScript можно нарисовать разные объекты, выводить изображения, трансформировать их и менять свойства. | height, width |
|
| <caption> | Этот тег необходим для создания заголовка к таблице и может размещаться только внутри тега <table>,сразу после открывающего тега. По умолчанию отображается перед таблицей и описывает ее содержимое. | align, valign |
|
| <center> | Тег <center> выравнивает содержимое по центру. | Нет |
|
| <cite> | Тег <cite> делает ваш текст цитатой либо сноской на другой источник. | Нет |
|
| <code> | Тег <code> предназначен для опубликования части или полного исходного кода программы. | Нет |
|
| <col> | Тег <col> предназначен для задания ширины и других характеристик одной или нескольких колонок таблицы. | align, char, charoff, span, valign, width |
|
| <colgroup> | Этот тег используется для задания ширины и стиля одной или нескольких колонок таблицы. | align, char, charoff, span, valign, width |
|
| <command> | Тег <command> нужен для отображения команды в виде переключателя, флажка или маркера. Этот тег необходимо размещать внутри <menu>, иначе он не будет отображаться. | checked, disabled, icon, label, radiogroup, type | |
| <comment> | Тег <comment> нужен для добавления комментариев в HTML код. Его необходимо использовать только внутри тега <body>. | Нет | |
| <datalist> | Этот тег предназначен для создания списка вариантов, которые можно выбирать в текстовом поле. | id |
|
| <dd> | Тег <dd> предназначен для создания списка определений. | Нет |
|
| <del> | Тег <del> необходим для того чтобы показать что данный текст был удален. Обычно текст выделенный этим тегом отображается как перечеркнутый. | cite, datetime |
|
| <details> | Этот тег предназначен для хранения описания к чему-либо, которое может быть отображено пользователем. | open | |
| <dfn> | Тег <dfn> предназначен для выделения нового термина, который оформляется курсивом. | Нет |
|
| <dir> | Тег <dir> предназначен для создания списков, содержащих названия директорий. | Нет |
|
| <div> | Тег <div> предназначен для выделения фрагмента документа с целью изменения вида содержимого.Обычно вид блока настраивается с помощью CSS-стилей. | align, title |
|
| <dl> | Тег <dl> предназначен для создания списка определений. | Нет |
|
| <dt> | Список начинается с тега <dl>, а внутри обычно содержатся тег <dt> создающий термини тег <dd> задающий определение этого термина. | Нет |
|
| <em> | Тег <em> нужен затем чтобы акцентировать внимание на тексте. Обычно отображается в браузере курсивным начертанием. | Нет |
|
| <embed> | Этот элемент используется для загрузки и отображения объектов(аудио, видеофайлов, флэш и т.п.) | align, height, hidden, hspace, pluginspage, src, type, vspace, width | |
| <fieldset> | Тег <fieldset> необходим для группирования элементов формы. | disabled, form, title |
|
| <figcaption> | Тег <figcaption> предназначен для описания тега <figure>.И должен быть первым или последним элементом в группе. | Нет |
|
| <figure> | Тег <figure> предназначен для группирования разных элементов, например, картинок и подписей к ним. | Нет |
|
| <font> | Этот тег служит для придания вашему тексту оригинальных характеристик шрифта, таких как цвет, размер и тип.Этот тег считается устаревшим и рекомендуется им не пользоваться. | color, face, size |
|
| <form> | Тег <form> предназначен для установки формы на Web-страницу.Форма нужна для обмена данными между пользователем и сервером. | accept-charset, action, autocomplete, enctype, method, name, novalidate, target |
|
| <footer> | Тег <footer> нужен для реализации <<подвала>> сайта, это раздел обычно находящийся внизу HTML страницы,где размещается контактная информация, имя создателя сайта, дата и правовая информация. | Нет |
|
| <frame> | Тег <frame> предназначен для определения свойства отдельного фрейма, на которые делится окно браузера. | bordercolor, frameborder, name, noresize, scrolling, src |
|
| <frameset> | Тег <frameset> определяет структуру фреймов на Web-странице.Фреймы разделяют окно браузера на отдельные окна, расположенные вплотную друг к другу.В каждую из таких окон загружается отдельная Web-страница определяемая с помощью тега <frame>. | border, bordercolor, cols, frameborder, framespacing, rows |
|
| <h1> | Этот тег необходим для создания заголовка первого уровня. Текст будет отображаться крупным жирным шрифтом.(Самый крупный заголовок) | align |
|
| <h2> | Этот тег необходим для создания заголовка второго уровня. Текст будет отображаться крупным жирным шрифтом.(Менее крупный заголовок чем заголовок первого уровня) | align |
|
| <h3> | Этот тег необходим для создания заголовка третьего уровня. Текст будет отображаться крупным жирным шрифтом.(Менее крупный заголовок чем заголовок второго уровня) | align |
|
| <h4> | Этот тег необходим для создания заголовка четвертого уровня. Текст будет отображаться крупным жирным шрифтом.(Менее крупный заголовок чем заголовок третьего уровня) | align |
|
| <h5> | Этот тег необходим для создания заголовка пятого уровня. Текст будет отображаться крупным жирным шрифтом.(Менее крупный заголовок чем заголовок четвертого уровня) | align |
|
| <h6> | Этот тег необходим для создания заголовка шестого уровня. Текст будет отображаться крупным жирным шрифтом.(Самый маленький заголовок) | align |
|
| <head> | Тег <head> нужен для хранения технических элементов, которые помогают Web-браузеру работать с этим документом.Например, хранение мета данных, которые используют поисковые системы. | profile | |
| <header> | Этот тег предназначен для создания <<шапки>> сайта, которая обычно размещается в верхней части HTML страницы. | Нет | |
| <hgroup> | Этот тег предназначен для группирования заголовков(h1-h6) Web-страницы. Внутри этого тега располагаются теги от <h1> до <h6>. | Нет | |
| <hr> | Тег <hr> предназначен для рисования горизонтальной линии. Так же дизайн этой линии можно изменять в зависимости от параметров,например: цвет и толщину. | align, color, noshade, size, width |
|
| <html> | <html> это глобальный тег, в который обычно заключено все содержимое Web-страницы.Исключение составляет элемент <!DOCTYPE> - он необходим для определения типа документа. | title, manifest, xmlns | |
| <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 |
|
| <ins> | Тег <ins> необходим для того чтобы выделить текст, который добавлен в документ как новый.Обычно отображается как подчеркнутый текст. | cite, datetime |
|
| <isindex> | Тег <isindex> необходим для реализации поискового индекса в вашем Web-документе. Этот тег устарел. | action, prompt |
|
| <kbd> | Этот тег применяется для обозначения названия клавиш. | Нет |
|
| <keygen> | Этот тег предназначен для генерации ключей. | autofocus, challenge, disabled, form, keytype, name | |
| <label> | Тег <label> предназначен для установки связи между определенной меткой, в качестве которой обычно выступает текст, и элементом формы(<input>, <select>, <textarea>). | accesskey, for | |
| <legend> | Тег <legend> предназначен для создания заголовка группы элементов формы, которая создается с помощью тега <fieldset>.Текст который располагается внутри тега <legend>, встраивается в рамку. | accesskey, align, title |
|
| <li> | Тег определяет отдельный элемент списка. А внешние теги <ul> и <ol> определяют вид списка – маркированный или нумерованный. | type, value |
|
| <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 стилей можно изменить его вид. | Нет |
|
| <menu> | Этот тег нужен для отображения списка пунктов меню. Список формируется с помощью тегов <li>. | label, type |
|
| <meta> | Тег <meta> предназначен для описания метатегов, которые нужны для браузеров и поисковых систем. | charset, content, http-equiv, name | |
| <meter> | Тег <meter> предназначен для вывода значения в известном диапазоне. | value, min, max, low, high, optimum |
|
| <nav> | Тег <nav> предназначен для описания навигации по сайту, обычно в блок этого тега помещают приоритетные ссылки.Наподобие главного меню или меню навигации. | Нет |
|
| <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 |
|
| <optgroup> | Этот тег представляет собой контейнер, внутри которого располагаются теги <option> объединенные в одну группу. | disabled, label | |
| <option> | Тег <option> указывает отдельные пункты списка, создаваемого с помощью тега <select>. | disabled, label, selected, value | |
| <output> | Тег <output> нужен для обозначения области, в которую выводится информация, обычно при помощи скриптов. | for, form, name |
|
| <p> | Тег <p> предназначен для создания абзаца. | align | |
| <param> | Этот тег предназначен для передачи значений параметров Java-аплетам или объектам Web-страницы, созданным с помощью тегов <aplet> или <object>. | name, type, value, valuetype | |
| <plaintext> | Тег <plaintext> предназначен для отображения содержимого - как есть.Поэтому можно писать внутри этого тега любой текст, включая HTML теги, другой код и т.п. | Нет |
|
| <pre> | Тег <pre> предназначен для отображения текста моноширинным шрифтом со всеми пробелами между словами. | Нет |
|
| <progress> | Этот тег необходим для создания прогресса завершенности задачи. | value, max |
|
| <q> | Тег <q> предназначен для выделения в тексте цитат. Web-браузер автоматически отображает содержимое в кавычках. | Нет |
|
| <rp> | Используется для вывода текста в браузерах, которые не поддерживают тег <ruby>.В остальных браузерах текст, заключенный в контейнер <rp>, не отображается. Тег <rp> должен идти до или после тега <rt>. | Нет | |
| <rt> | Этот тег предназначен для добавления аннотации сверху или снизу от текста, расположенном между тегам <ruby>. | Нет |
|
| <ruby> | Тег <ruby> нужен для добавления аннотации сверху или снизу от заданного текста. | Нет |
|
| <s> | Тег <s> предназначен для отображения текста как перечеркнутого. | Нет |
|
| <samp> | Тег <samp> предназначен для отображения текста, который является результатом выполнения компьютерной программы или скрипта. | Нет |
|
| <script> | Этот тег необходим для добавления скриптов в HTML-документ. Скрипты могут располагаться во внешнем файле. | defer, language, src, type |
|
| <section> | Тег <section> предназначен для разделения материала по теме. | Нет | |
| <select> | Тег <select> предназначен для создания раскрывающегося списка или простого выборочного списка. | accesskey, autofocus, disabled, form, multiple, name, required, size, tabindex |
|
| <small> | Тег <small> предназначен для уменьшения размера шрифта. | Нет |
|
| <span> | Этот тег нужен для определения строчных элементов на Web-странице.С помощью этого тега можно выделить часть информации внутри других тегов с установкой своего стиля. | Нет |
|
| <source> | Тег <source> предназначен для добавления звуковых или видео данных для тегов <audio> и <video>. | media, src, type |
|
| <strike> | Тег <strike> предназначен для отображения текста как перечеркнутого. | Нет |
|
| <strong> | Этот тег нужен для отображения текста жирным начертанием. | Нет |
|
| <style> | Тег <style> предназначен для определения стилей элементов Web-страницы. | media, type |
|
| <sub> | Тег <sub> предназначен для отображения текста в виде нижнего индекса.Текст выглядит уменьшенного размера и располагается чуть ниже основного. | Нет |
|
| <summary> | Тег <summary> предназначен для информационного текста - который разворачивается и сворачивается. | Нет |
|
| <sup> | Тег <sup> предназначен для отображения текста в виде верхнего индекса.Текст выглядит уменьшенного размера и располагается чуть выше основного. | Нет |
|
| <table> | Тег <table> предназначен для создания и определения таблицы.Таблица обычно состоит из строк и ячеек, <tr> и <td>. | align, background, bgcolor, border, bordercolor, cellpadding, cellspacing, cols, frame, height, rules, summary, width |
|
| <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 |
|
| <thead> | Этот элемент предназначен для хранения одной или нескольких строк, которые находятся вверху таблицы.Допускается использовать не более одного элемента <thead> в пределах одной таблицы,и он должен находится в исходном коде сразу после тега <table>. | align, char, charoff, bgcolor, valign | |
| <time> | Тег <time> помечает текст внутри тега как дату или время. | datetime, pubdate | |
| <title> | Тег <title> предназначен для создания заголовка Web-документа.Обычно заголовок отображается в левом верхнем углу окна интернет обозревателя. | Нет |
|
| <tr> | Тег <tr> предназначен для создания строки таблицы.Ячейки в строке могут задаваться с помощью тега <th> или <td>. | align, bgcolor, bordercolor, char, charoff, valign | |
| <tt> | Тег <tt> предназначен для отображения текста моноширинным шрифтом. | Нет |
|
| <u> | Тег <u> предназначен для того чтобы оформить текст как подчеркнутый. | Нет |
|
| <ul> | Тег <ul> предназначен для создания маркированного списка. | type |
|
| <var> | Тег <var> предназначен для выделения переменных компьютерных программ.Web-браузеры помечают текст курсивным начертанием. | Нет |
|
| <video> | Тег <video> предназначен для добавления, воспроизведения и управления настройками видеороликов на вашей Web-странице. | autoplay, controls, height, loop, poster, preload, src, width | |
| <wbr> | Тег <wbr> предназначен для указания Web-браузеру места, где допускается делать перенос строки, если этого требует ширина родительского элемента. | Нет |
|
| <xmp> | Этот тег предназначен для отображения содержимого <<как есть>> и оформляется фиксированной шириной. | Нет |
|
Так же могу порекомендовать скачать небольшой справочник по всем HTML тегам с более подробным описанием. Эта небольшая программа-справочник, работающая в офлайн режиме, на случай отсутствия интернета.
Загрузка...
Добавить комментарий