Содержание

Краткая таблица всех 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

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

acronym

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

address

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

applet

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

aside

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

audio

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

b

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

basefont

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

bdo

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

blockquote

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

big

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

br

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

button

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

canvas

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

caption

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

center

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

cite

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

code

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

col

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

colgroup

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

datalist

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

dd

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

del

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

dfn

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

dir

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

div

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

dl

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

dt

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

em

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

fieldset

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

figcaption

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

figure

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

font

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

form

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

footer

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

frame

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

frameset

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

h2

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

h3

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

h4

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

h5

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

h5

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

h6

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

hr

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

i

<iframe>Тег <iframe> предназначен для создания плавающего фрейма.align, allowtransparency, frameborder, height, hspace, marginheight, marginwidth, name, sandbox, scrolling, seamless, src, srcdoc, vspace, width
<img>alignalign, 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

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

ins

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

isindex

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

kbd

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

legend

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

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

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

menu

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

meter

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

nav

<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

<optgroup>Этот тег представляет собой контейнер, внутри которого располагаются теги <option> объединенные в одну группу.disabled, label
<option>Тег <option> указывает отдельные пункты списка, создаваемого с помощью тега <select&

www.white-windows.ru

Правила применения тегов | htmlbook.ru

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

Атрибуты тегов и кавычки

Согласно спецификации HTML все значения атрибутов тегов следует указывать в двойных («пример») или одинарных кавычках (‘пример’). Отсутствие кавычек не приведет к ошибкам, браузеры во многих случаях достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы (пример 3.2).

Пример 3.2. Использование кавычек в атрибутах тегов

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type"  content="text/html; charset=utf-8">
  <title>Кавычки в атрибуте alt</title>
 </head>
 <body>
  <p><img src="images/arena.png" alt="Вид заголовка"></p>
  <p><img src="images/arena.png" alt=Вид заголовка></p>
 </body>
</html>

В данном примере строка 8 написана правильно, со всеми кавычками, а в строке 9 у атрибута alt кавычки отсутствуют. Из-за этого браузер в качестве значения alt возьмет только первое слово («Вид»), а слово «заголовка» будет воспринято как ошибочное значение. Поэтому всегда приучайтесь указывать значения атрибутов тегов в кавычках.

Теги можно писать как прописными, так и строчными символами

Любые теги, а также их атрибуты нечувствительны к регистру, поэтому вы вольны выбирать сами, как писать — <BR>, <Br> или <br>. В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта. Заметим также, что текст, полностью набранный прописными символами, читается хуже, чем текст со строчными символами или смешанный.

Переносы строк

Внутри тега между его атрибутами допустимо ставить перенос строк. В примере 3.3 показана одна и та же строка, но оформленная разными способами.

Пример 3.3. Переносы строк в коде тега

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Кавычки в атрибуте alt</title>
 </head>
 <body>
  <p><img src="images/arena.png" alt="Вид заголовка в IE"></p>
  <p><img src="images/arena.png"
   alt="Вид заголовка в браузере IE"
  
  ></p>
 </body>
</html>

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

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

Неизвестные теги и атрибуты

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

Порядок тегов

Существует определенная иерархия вложенности тегов. Например, тег <title> должен находиться внутри контейнера <head> и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно.

Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять местами теги <title> и <meta>, на конечном результате это никак не скажется.

Закрывайте все теги

Существует три состояния закрывающего тега: обязателен, не требуется или не обязателен. Обязательный закрывающий тег должен присутствовать всегда, иначе это приведет к ошибке при отображении документа. Для некоторых тегов вроде <br> закрывающего тега нет в принципе. Необязательный закрывающий тег говорит о том, что разработчик может его как добавить, так и опустить, к ошибке это не приведет. Однако рекомендуем закрывать все подобные теги, включая необязательные, это дисциплинирует, создает более стройный и строгий код, который легко модифицировать.

htmlbook.ru

Новые теги HTML5 » Энциклопедия HTML5

Какие теги добавили в язык HTML5?

В язык HTML5 добавили множество новых тегов:

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

Семантическое описание структуры страницы в HTML5

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

Семантика HTML5 на уровне структуры страницы

Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение структуры страницы:

<header> </header> — теги обрамляющие элементы дизайна верхней части сайта, так называемая «шапка страницы». Также теги header можно использовать как верхнюю часть тега section.

<nav> </nav> — теги обрамляющие основное меню на сайте.

<article> </article> — теги обрамляющие основной контент страницы: статью, запись в блоге, новость, первую запись форума и т.п.

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

<footer> </footer> — теги обрамляющие нижнюю часть сайта, так называемый «подвал страницы», который может содержать имя автора (компании), контакты (адреса, телефоны), правовую информацию (копирайты) и т.п. Также теги footer можно использовать как нижнюю часть тега section, т.е. сами теги footer будут находиться между тегами section

<section> </section> — теги обрамляющие повторяющиеся части страницы или основного контента, например если на странице находятся несколько глав рассказа, то каждую главу можно поместить между этими тегами. Или если вы нажмете на ссылку в сайдбаре (например по ссылке какой-нибудь рубрики), то появится страница на которой будут ссылки с описаниями, ведущие на статьи принадлежащие к данной рубрике, так вот ссылки с описаниями можно обрамлять тегами section, а также товары с описаниями в интернет магазине, комментарии к записям, комментарии к теме на форумах и т.д.

Естественно, всё это пока находится лишь на уровне рекомендаций, и вы можете вставлять данные теги куда угодно, используя их вместо тегов <div>, практическая же польза от них может появиться лишь тогда, когда поисковые системы (Яндекс, Гугл) начнут рекомендовать, где и когда использовать эти теги, для более высокого ранжирования сайтов.

Семантика HTML5 на уровне текста

Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение текста страницы:

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

<time> </time> — теги предназначены для создания дат и/или времени в формате
ISO вида: YYYY-MM-DDThh:mm:ss, такой формат понятен компьютерным программам. Теги time могут обрамлять дату или текст, если тег обрамляет текст, то в него добавляют атрибут datetime, значением которого выступает дата и/или время в формате ISO.

<details> </details> — теги предназначены для хранения информации, которая либо скрыта, либо отображена (работает наподобие спойлера).

<summary> </summary> — теги обрамляют заголовок, если по нему щелкнуть то появится текст (можно использовать в качестве спойлера), находятся между тегами details.

Дополнительные теги языка HTML5

Список новых тегов HTML5, обогощающих язык:

<meter> </meter> — теги предназначены для вывода статического индикатора шкалы, при котором результат измерения не меняется. Для работы нужно минимальное и максимальное значения.

<progress> </progress> — теги предназначены для вывода динамического индикатора шкалы (например шкалы загрузки файла), при котором результат измерения меняется в реальном времени.

<command /> — тег должен находиться между тегами menu, используется при создании сценариев на JavaScript.

<menu> </menu> — между этими тегами помещают тег command.

<output> </output> — теги предназначены для вывода работы скрипта.

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

<figcaption> </figcaption> — теги обрамляют описание какого-либо объекта (например изображения), находятся между тегами figure..

<figure> </figure> — теги группируют различные объекты страницы имеющие свои описания, например изображения с описанием, товары с описанием и т.д.

<hgroup> </hgroup> — теги предназначены для группировки заголовков h*

<keygen /> — тег используется для генерации открытых/закрытых пар ключей, шифрования/расшифровки данных, создания/проверки цифровой подписи.

<ruby> </ruby> — теги обрамляют текст и аннотацию к нему.

<rt> </rt> — теги находятся между тегами ruby, предназначены для обрамления аннотации.

<rp> </rp> — теги предназначены для браузеров которые не поддерживают теги ruby.

<wbr /> — тег указывает браузеру в каком месте переносить слово, если это слово не вмещается в окно браузера.

Теги HTML5 описывающие новые технологии

В HTML5 появилась возможность использования множества технологий и API, которые являются частью языка HTML5, а не сторонними плагинами, вот некоторые из них:

<audio> </audio> — теги предназначены для воспроизведения аудиофайлов, без использования сторонних программ (плагинов, расширений).

<video> </video> — теги предназначены для воспроизведения видеофайлов, без использования сторонних программ (плагинов, расширений).

<source /> — тег предназначен для указания пути к аудио/видео файлам, находится внутри тегов audio и video.

<canvas> </canvas> — теги предназначены для создания специальной области на сайте, в которой можно создавать векторные фигуры и с помощью языка программирования JavaScript, манипулировать ими. Canvas в будущем, должен заменить Flash-технологию (угу в теории…).

Читать далее: Устаревшие теги HTML5

html-5.ru

Учебник HTML — Теги HTML

 

HTML-документ (страничка) — документ, написанный на языке HTML. Заключается между тегами <HTML> и </HTML>.

Значения тегов разметки документа

Теги разметки — специальные команды для расположения на экране текста, графики, видео и аудио фрагментов, а также команды, служащие для связи с другими HTML-документами и ресурсами Интернет.

Основные теги разметки

<HEAD> и </HEAD>. Между этими тегами располагается информация о документе.

<TITLE> и </TITLE>. В этих тегах заключается название странички, которое будет выведено в рамке окна программы просмотра.

<BODY> и </BODY>. «Тело» документа (текст, графика и т.д.) располагается между этими двумя тегами.

Параметры тега <BODY>:

BGCOLOR — цвет фона (<BODY BGCOLOR=»#000000″>)

BACKGROUND — бэкграунд

TEXT — цвет текста

LINK — цвет ссылки

VLINK — цвет ссылки, уже посещенной в прошлом

ALINK — цвет активной ссылки

<P> и </P> — теги, служащие для выделения абзацев. Новый абзац всегда отделяется от предыдущего пустой строкой.

<BR> — тег, служащий для переноса текста на другую строку. Может также служить для отделения графики от текста на интервал.

<HR> —  тег, служащий для логического разделения текста горизонтальной линией.

<PRE> и </PRE> —  Между этими тегами располагается предварительно отформатированный текст. На экран он выводится шрифтом типа «курьер».

Параметры выравнивания

Используются в <P> и <H>

ALIGN=LEFT — выравнивание по левому полю

ALIGN=RIGHT — выравнивание по правому полю

ALIGN=CENTER — выравнивание по центру

Теги выравнивания

<LEFT> и </LEFT> — выравнивание по левому полю

<RIGHT> и </RIGHT> — выравнивание по правому полю

<CENTER> и </CENTER> — выравнивание по центру

Заголовки, служащие для выделения логических частей текста

<h2> и </h2> — Заголовок первого уровня.

<h3> и </h3> — Заголовок второго уровня.

<h4> и </h4> — Заголовок третьего уровня.

<h5> и </h5> — Заголовок четвертого уровня.

<H5> и </H5> — Заголовок пятого уровня.

<H6> и </H6> — Заголовок шестого уровня.

Теги для выделения текста и шрифта

<B> и </B> — теги для выделения текста (слов, букв) жирным шрифтом.

<I> и </I> — теги для выделения текста (слов, букв) курсивным шрифтом, типа Italic.

<U> и </U> — текст, расположенный между двумя этими тегами, будет подчеркнут.

<BLINK> и </BLINK> — текст, расположенный между двумя этими тегами, будет мигать.

<FONT SIZE=n>и</FONT> — теги для изменения размера шрифта (где n — размер шрифта в пикселях px).

<FONT COLOR=»#FFFFFF»> и </FONT> — теги для изменения цвета шрифта.

Теги для формирования списков

<OL> и </OL> — теги, показывающие начало и конец нумерованного списка

<UL> и </UL> — теги, показывающие начало и конец маркированного списка.

<LI> — Элемент списка

 

<DL> и </DL> — теги, показывающие начало и конец глоссария.

<DT> — Термин глоссария, располагается без отступа от левого поля страницы.

<DD> — Описание термина, располагается с отступом от левого поля страницы.

Теги-команды для вставки в текст объектов не текстовой информации

<IMG SRC=»file.gif»> или <IMG SRC=»file.jpg»> — команда для вставки графического изображения

<IMG SRC=»file.wav»> — команда для вставки звукового фрагмента

<IMG SRC=»file.avi»> — команда для вставки видео фрагмента

Параметры графического изображения

WIDHT — ширина картинки в пикселях

HEIGHT- высота картинки в пикселях

ALIGN — выравнивание (ALIGN=LEFT — выравнивание по левому полю, ALIGN=RIGHT — по правому полю, ALIGN=TOP — по верхней границе, ALIGN=BOTTOM — по нижней границе, ALIGN=MIDDLE или CENTER — по центру)

HSPACE — горизонтальный отступ от графического изображения

VSPACE — вертикальный отступ

ALT — альтернативный текст, служит для обозначения изображения

Команды, служащие для гиперсвязи с другими HTML-документами и ресурсами Интернет

<A HREF=»fail.htm»>и</A>или<A HREF=»http://www.ru»>и</A> — гиперсвязи

<ADDRESS><A HREF=»mailto:[email protected]»>[email protected]</ADDRESS> — гиперсвязь с адресом электронной почты

Таблицы

Таблица — сетка для показа данных в строках и столбцах, а также средство для форматирования текста

<TABLE> и </TABLE> — теги для вставки таблицы в HTML документ

Параметры тега <TABLE>

BGCOLOR — цвет фона

BORDER — ширина бордюра

WIDHT — ширина таблицы

Теги разметки таблицы

<CAPTION> и </CAPTION> — название таблицы, имеет параметр ALIGN=TOP — выравнивание над таблицей и ALIGN=BOTTOM — под  таблицей.

<TR> и </TR> — Строчка таблицы. Может иметь параметры BGCOLOR — цвет фона внутри строки;

ALIGN=LEFT, RIGHT, CENTER — выравнивание внутри строки;

VALIGN=TOP, BOTTOM, MIDDLE — вертикальное выравнивание внутри строки таблицы.

<TD> и </TD>—  Столбец таблицы. Может иметь параметры BGCOLOR — цвет фона под столбцом;

ALIGN=LEFT, RIGHT, CENTER — выравнивание внутри столбца;

VALIGN=TOP, BOTTOM, MIDDLE — вертикальное выравнивание;

COLSPAN растягивание клетки на несколько столбцов, ROWSPAN — растягивание клетки на несколько строк.

<TH> и </TH> — Заголовок столбца. Может иметь параметры BGCOLOR — цвет фона под названием;

ALIGN=LEFT, RIGHT, CENTER — выравнивание;

VALIGN=TOP, BOTTOM, MIDDLE — вертикальное выравнивание;

COLSPAN, ROWSPAN — растягивание клетки на несколько столбцов или строк; WIDHT — ширина названия.

Рамки-фреймы

Рамки-фреймы — средство для разделения экрана на несколько областей, в каждой из которых отображается содержимое отдельной Web-страницы или Web-сайта.

<FRAMESET> и </FRAMESET> теги для создания рамки

Параметры тега <FRAMESET>

COLS — подразделяют экран на определенное количество колонок (вертикальных)

ROWS — подразделяют экран на определенное количество колонок (горизонтальных)

BORDCOLOR — цвет рамки

BORDER — ширина бордюра

FRAMEBORDER — граница рамки (FRAMEBORDER=YES — есть граница, FRAMEBORDER=NO — нет границы, FRAMESPACING=n — ширина границы)

<FRAME> Тег для описания рамки (<FRAME SRC=»file.htm»>).

Параметры тега <FRAME>

SCROLING — параметр для регулировки полосы прокрутки:

SCROLING=YES — полоса прокрутки будет всегда

SCROLING=NO — полосы прокрутки не будет

SCROLING=AUTO — полоса прокрутки появляется только в случае необходимости

MARGINWIDHT и MARGINHEIGHT — параметры, которые управляют отступом внутри рамок, служат для выравнивания графического изображения внутри рамки

NORESIZE — параметр, указывающий на то, что размер рамки-фрейма никогда не будет меняться.

A link to <A HREF=»file.htm» TARGET=»frame2″> file.htm</A> — Связь между фреймами

TARGET — атрибут связи между фреймами. Имеет несколько значений:

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

_SELF содержимое страницы, заданной ссылкой, в окно, которое содержит ссылку.

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

_TOP содержимое страницы, заданной ссылкой, в окно, игнорируя используемые фреймы.

Обработка браузеров, не поддерживающих фреймы:

<FRAMESET>

…Здесь располагаются фреймы

</FRAMESET>

<NOFRAMES>

<BODY>

…Здесь располагается текст без фреймов

<BODY>

</NOFRAMES>

Бегущая строка

<MARQUEE>ТЕКСТ</MARQUEE> — тег, создающий бегущую строку

<MARQUEE DIRECTION=»left»>TEKCT</MARQUEE> — Если бегущую строку нужно направить справа налево

<MARQUEE DIRECTION=»right»>TEKCT</MARQUEE> — движение слева направо.

scroll — стандартное движение от правого края к левому

slide — надпись один раз пробегает от правого края к левому, где и остается.

alternate — движение от правого края страницы к левому и обратно. Бесконечный цикл.

<MARQUEE LOOP=n BEHAVIOR=scroll>TEKCT</MARQUEE> — Ограничение числа циклов. Значение n оператора LOOP указывает число повторений цикла.

<MARQUEE WIDHT=n>TEKCT</MARQUEE> — указать ширину участка, занимаемого бегущей строкой, где n — ширина той части страницы, на которой расположена бегущая строка. Значение n указывается как в пикселях, так и в процентах от общей ширины видимой части страницы.

<MARQUEE scrollamount=n>TEKCT</MARQUEE> — Регулировка движения надписи по экрану. Здесь n — число пикселей.

<MARQUEE scrolldelay=t>TEKCT</MARQUEE> — В данном случае переменная величина — время t — измеряется в миллисекундах. Метод задания скорости состоит в указании времени, спустя которое текст будет перерисован на экране заново.

<FONT SIZE=n><MARQUEE> ТЕКСТ</MARQUEE></FONT> — возможность указывать величину шрифта текста в строке.

<MARQUEE BGCOLOR=n> ТЕКСТ </MARQUEE> — окрасить поверхность бегущей строки в какой-либо цвет, где n можно указать в виде шестнадцатеричного числа либо написав его название

<MARQUEE HEIGHT=n>ТЕКСТ</MARQUEE> — указывает высоту бегущей строки

htmlbook.name

HTML-текст

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

Теги для форматирования текста несут смысловую нагрузку и обычно задают для текста, заключенного внутрь, стилевое оформление, например, выделяют текст жирным начертанием или отображают его шрифтом другого семейства (свойство font-family).

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

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

  • Содержание:
  • 1. Теги заголовков: <h2...h6>
  • 2. Теги для форматирования текста: <b>, <em>, <i>, <small>, <strong>, <sub>, <sup>, <ins>, <del>
  • 3. Теги для ввода «компьютерного» текста: <code>, <kbd>, <samp>, <var>, <pre>
  • 4. Теги для оформления цитат и определений: <abbr>, <bdo>, <blockquote>, <q>, <cite>, <dfn>
  • 5. Абзацы, средства переноса текста: <p>, <br>, <hr>

1. Теги заголовков

Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Теги <h2>...<h6> должны использоваться только для выделения заголовков нового раздела или подраздела. При использовании заголовков необходимо учитывать их иерархию, т.е. за <h2> должен следовать <h3> и т.д. Также не допускается вложение других тегов в теги <h2>...<h6>.

1.1. Тег <h2>

Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Тег <h2> должен быть уникальным для каждой страницы сайта. Рекомендуется прописывать тег в начале статьи, используя ключевое слово в тексте заголовка. Размер шрифта в браузере равен 2em, верхний и нижний отступ по умолчанию 0.67em.

1.2. Тег <h3>

Им обозначаются подзаголовки тега <h2>. Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.

1.3. Тег <h4>

Показывает подзаголовки тега <h3>. Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.

1.4. Теги <h5>, <h5>, <h6>

Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em / 2.33em соответственно.
Для всех тегов доступны ‎глобальные атрибуты.

2. Теги для форматирования текста

2.1. Тег <b>

Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность.
Для тега доступны ‎глобальные атрибуты.

2.2. Тег <em>

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

2.3. Тег <i>

Отображает шрифт курсивом.
Для тега доступны ‎глобальные атрибуты.

2.4. Тег <small>

Уменьшает размер шрифта на единицу по отношению к обычному тексту.
Для тега доступны ‎глобальные атрибуты.

2.5. Тег <strong>

Задаёт полужирное начертание шрифта, относится к тегам логической разметки, указывая браузеру на важность текста.
Для тега доступны ‎глобальные атрибуты.

2.6. Тег <sub>

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

2.7. Тег <sup>

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

2.8. Тег <ins>

Выделяет текст в новой версии документа, подчёркивая его.
Для тега доступны следующие атрибуты: cite, datetime.

2.9. Тег <del>

Перечёркивает текст. Используется для выделения текста, удаленного из документа.
Для тега доступны следующие атрибуты: cite, datetime.

3. Теги для ввода «компьютерного» текста

3.1. Тег <code>

Служит для выделения фрагментов программного кода. Отображается моноширинным шрифтом.
Для тега доступны ‎глобальные атрибуты.

3.2. Тег <kbd>

Отмечает фрагмент как вводимый пользователем с клавиатуры. Отображается моноширинным шрифтом.
Для тега доступны ‎глобальные атрибуты.

3.3. Тег <samp>

Применяется для выделения результата, полученного в ходе выполнения программы. Отображается моноширинным шрифтом.
Для тега доступны ‎глобальные атрибуты.

3.4. Тег <var>

Выделяет имена переменных, отображая курсивом.
Для тега доступны ‎глобальные атрибуты.

3.5. Тег <pre>

Позволяет вывести текст на экран, сохранив изначальное форматирование. Пробелы и переносы строк при этом не удаляются.
Для тега доступны ‎глобальные атрибуты.

4. Теги для оформления цитат и определений

4.1. Тег <abbr>

Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title, она появляется при наведении курсора мыши на текст.
Для тега доступны ‎глобальные атрибуты.

4.2. Тег <bdo>

Используется для замещения текущего направления текста, т.е. текст в теге отображается зеркально.
Для тега доступен атрибут dir.

4.3. Тег <blockquote>

Выделяет цитаты внутри документа, выделяя его отступами и переносами строк.
Для тега доступен атрибут cite.

4.4. Тег <q>

Используется для выделения коротких цитат. Браузерами заключается в кавычки.
Для тега доступен атрибут cite.

4.5. Тег <cite>

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

4.6. Тег <dfn>

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

5. Абзацы, средства переноса текста

5.1. Тег <p>

Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхний и нижний отступ, равный 1em, при этом отступы соседних абзацев «схлопываются».
Для тега доступны ‎глобальные атрибуты.

5.2. Тег <br>

Переносит текст на следующую строку, создавая разрыв строки.
Для тега доступны ‎глобальные атрибуты.

5.3. Тег <hr>

Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии.
Для тега доступны ‎глобальные атрибуты.

html5book.ru

Теги HTML по алфавиту | bookhtml.ru

 

 

 

!

 

Тег <!— —> — текстовые комментарии в HTML- коде страницы (пользователю не видны).

Тег <!DOCTYPE> — версия языка HTML и разновидность данной версии.

 

A

 

Тег <a> — создание ссылок.

Тег <abbr> — символы, набранные в тексте, являются аббревиатурой.

Тег <acronym> — сокращение, применяемое как самостоятельное слово.

Тег <address> — данные создателей web-страницы.

Тег <applet> — помещение в web-страницу апплетов — программ, написанных на языке Java.

Тег <area> — активные области изображения, являющиеся ссылками.

Тег <article> — статья или новость с чужого источника.

Тег <aside> — дополнительная информация, всплывающая в отдельном блоке.

Тег <audio> — вставка аудиоролика в web-страницу.

 

B

 


Тег <b> — написание текста жирным шрифтом.

Тег <base> — задание базового адреса (URL) для ссылок.

Тег <basefont> — базовый (основной для всей страницы) размер шрифта.

Тег <bdo> — направление текста (справа налево или слева направо).

Тег <bgsound> — создание звуковых эффектов.

Тег <blockquote> — вставка в текст цытаты.

Тег <big> — увеличение размер шрифта текста.

Тег <body> — заключает в себе гипертекст, который определяет собственно Web-страницу.

Тег <blink> — задает мигание текста.

Тег <br> — принудительный переход на новую строку (перевод строки).

Тег <button> — создаёт кнопки так же, как и элемент INPUT.

 

C

 


Тег <canvas> — создание bitmap изображения при помощи JavaScript.

Тег <caption> — заголовок для таблицы.

Тег <center> — центрирование текста на странице.

Тег <cite> — форматирование цитат и ссылок.

Тег <code> — вывод фрагментов программ и форматирования текста программы.

Тег <col> — задаются свойства одной или нескольким колонкам таблицы.

Тег <colgroup> — создает группы колонок с одинаковыми свойствами.

Тег <command> — отображает команду в виде флажка, переключателя или обычной кнопки.

Тег <comment> — контейнер для комментариев.

 

 

D

 


Тег <datalist> — перечень вариантов, предложенных для выбора при наборе в текстовом поле.

Тег <dd> — списки с определениями.

Тег <del> — выделение текста, который был удалён.

Тег <details> — размещение на странице информации, которую можно показать или скрыть.

Тег <dfn> — выделение одинаковых по назначению (или смыслу) фрагментов текста.

Тег <dir> — определение списка каталогов.

Тег <div> — формирует блочный контейнер.

Тег <dl> — контейнер, в котором располагаем список определений.

Тег <dt> — термин в списке определений.

 

E

 

Тег <em> — выделение текста.

Тег <embed> — контейнер для некоторых объектов (звуковых файлов, видеофайлов и т.д.).

 

F

 

Тег <fieldset> — создание группы, объединяющей несколько элементов управления.

Тег <figcaption> — заголовок для элемента <figure>.

Тег <figure> — собственное содержимое ( фотографии, иллюстрации, диаграммы и др.).

Тег <font> — тип, размер и цвет шрифта текста.

Тег <form> — построение форм заполняемых непосредственно пользователем.

Тег <footer> — нижний колонтитул для web-страницы.

Тег <frame> — свойства отдельного фрейма.

Тег <frameset> — структура фреймов на web-странице.

 

H

 

Теги <h2> — <h6> — заголовок в материале web-страницы.

Тег <head> — формирование общей структуры документа.

Тег <header> — «шапка» сайта.

Тег <hgroup> — группирование заголовков веб-страницы или раздела.

Тег <hr> — горизонтальная линия.

Тег <html> — документ, написанный на языке html.

 

I

 


Тег <i> — текст курсивным начертанием.

Тег <iframe> — создание фрейма.

Тег <img> — ссылка на графический файл.

Тег <input> — различные части формы, такие как флажки, переключатели, поля ввода.

Тег <ins> — выделение текста, который был добавлен в новый документ.

Тег <isindex> — конструкции для ведения диалога с пользователем.

 

K

 


Тег <kbd> — выделение текста, который пользователь должен ввести с клавиатуры.

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

 

L

 

Тег <label> — контейнер для других элементов формы.

Тег <legend> — заголовок группы элементов формы, образованной тегом<fieldset>.

Тег <li> — отдельный пункт списка.

Тег <link> — связь между web-страницей и внешним документом.

Тег <listing> — вывод листинга программ или кода.

 

M

 

Тег <map> — создание изображения-карты.

Тег <marquee> — бегущая строка.

Тег <mark> — помечает текст в документе как выделенный.

Тег <menu> — создание логически связанных списков.

Тег <meta> — дополнительная информация о веб-странице.

Тег <meter> — вывод на экран данных в ранжированной области.

Тег <multicol> — размещение информации на странице в несколько колонок (столбцов).

 

N

 


Тег <nav> — навигационная панель.

Тег <nobr> — текст в одной строке (без разрыва).

Тег <noembed> — отображение на web-странице информации.

Тег <noframes> — браузер не поддерживает фреймы.

Тег <noindex> — закрытие от индексации фрагмента текста

Тег <noscript> — браузер не поддерживает сценариев.

 

O

 


Тег <object> — размещение в HTML-документе встроенного объекта.

Тег <ol> — нумерованный список.

Тег <optgroup> — объединяет пункты списка в группы.

Тег <option> — создание элемента списка.

Тег <output> — область в которую выводится информация результата расчета.

 

P

 

Тег <p> — разделение текста на абзацы.

Тег <param> — передача параметров объекту.

Тег <plaintext> — создание текста с конструкциями HTML.

Тег <pre> — текст, заранее отформатированный.

Тег <progress> — вывод на экран оценки выполнения работы.

 

Q

 

Тег <q> — выделение цитаты внутри абзаца или строки.

 

R

 

 

Тег <rp> — вывод текста в браузерах, которые не поддерживают тег <ruby>.

Тег <rt> — аннотация сверху или снизу от текста, заключенного в контейнер <ruby>.

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

 

S

 


Тег <s> — вывод текста зачеркнутым.

Тег <samp> — выделение диалога пользователя с компьютером.

Тег <script> — размещение в документе сценария.

Тег <section> — выводит на экран данные, формируя их в разделы.

Тег <select> — создание списков в форме.

Тег <small> — уменьшение размера шрифта на единицу.

Тег <source> — источник медиа-данных.

Тег <spacer> — выделить (зарезервировать) на странице пустое пространство заданного размера.

Тег <span> — выделение фрагмента текста для его последующего форматирования.

Тег <strike> — зачеркнутое начертание текста.

Тег <strong> — выделение текста жирным начертанием.

Тег <style> — определение стилей элементов веб-страницы.

Тег <sub> — создание эффекта нижнего индекса.

Тег <summary> — видимый заголовок для элемента <details>.

Тег <sup> — эффект верхнего индекса.

 

T

 


Тег <table> — создание таблиц.

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

Тег <td> — создание обычной ячейки таблицы.

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

Тег <tfoot> — логическое группирование строк в нижней части таблицы.

Тег <th> — создание заголовка таблицы.

Тег <thead> — логическое группирование строк в верхней части таблицы.

Тег <time> — дата и время.

Тег <title> — заголовок Web-страницы.

Тег <tr> — строка таблицы.

Тег <track> — текстовая дорожка для медийных элементов <audio> и <video>.

Тег <tt> — текст телетайпа.

 

U

 


Тег <u> — подчеркивание текста.

Тег <ul> — создание маркированного (ненумерованного) списка.

 

V

 

Тег <var> — выделение переменной или параметра программы.

Тег <video> — вставка на Web-страницу видеоролика.

 

W

 

Тег <wbr> — разбиение строки на две.

 

X

 

Тег <xmp> — вывод текста на страницу «как есть».

 

 

Изучайте язык HTML вместе с bookhtml.ru

 

 

 

 

 

bookhtml.ru

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
1.0+1.0+1.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.

Синтаксис

<i>Текст</i>

Закрывающий тег

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Аналог CSS

font-style

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег I</title>
 </head>
 <body>

  <p><b><i>Lorem ipsum dolor sit amet</i></b></p>
  <p><i>Lorem</i> ipsum dolor sit amet, consectetuer adipiscing elit, 
  sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat 
  volutpat. <i>Ut</i> wisis enim ad minim veniam, quis nostrud exerci 
  tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

 </body>
</html>

Результат данного примера продемонстрирован на рис. 1.

Рис. 1. Вид курсивного текста

Примечание

Хотя использование тега <i> не осуждается в HTML, применение стилей предоставляет больше возможностей по управлению начертанием текста.

htmlbook.ru

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

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