The tt html tag

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

Тег	Описание	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<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>	Выделенный/подсвеченный текст.	6.0	4.0	11.1	5.0	9.0	12.0
<meter>	Предназначен для отображения скалярной величины в заданном диапазоне, или же для графического представления дробного числа. Для использования данного тега должно быть известно максимальное значение.	8.0	6.0	11.0	6.0	Нет	13.0
<pre>	Определяет предварительно отформатированный текст, т.е. текст, который был помещён внутрь тега отобразится со шрифтом фиксированной ширины, и сохранит как пробелы, так и разрывы строк	Да	Да	Да	Да	Да	Да
<progress>	Предоставляет обратную связь, сообщая о состоянии текущего процесса, отображает какая часть задачи выполнена.	8.0	16.0	11.0	6.0	10.0	12.0
<q>	Используется для выделения коротких цитат (строчная цитата).	Да	Да	Да	Да	Да	Да
<rp>	Определяет, что отображать браузеру, который не поддерживает тег <ruby>	5.0	38.0	15.0	5.0	5.5	12.0
<rt>	Помещает полезный текст фуриганы в составе элемента <ruby>	5.0	38.0	15.0	5.0	5.5	12.0
<ruby>	Используются для добавления фуриган (фонетические подсказки в японском языке, их также называют — руби или ёмигана).	5.0	38.0	15.0	5.0	5.5	12.0
<s>	Определяет текст, который больше не является правильным или актуальным.	Да	Да	Да	Да	Да	Да
<samp>	Результат вывода компьютерной программы или скрипта.	Да	Да	Да	Да	Да	Да
<small>	Шрифт, который отображается меньшим размером(мелкий/юридический шрифт).	Да	Да	Да	Да	Да	Да
<strike>	Не поддерживается в HTML5. Отображает перечеркнутый текст. Используйте вместо данного элемента тег <del> или тег <s>	Да	Да	Да	Да	Да	Да
<strong>	Текст, которому придают особое значение (важный текст).	Да	Да	Да	Да	Да	Да
<sub>	Текст с нижним индексом.	Да	Да	Да	Да	Да	Да
<sup>	Текст с верхним индексом.	Да	Да	Да	Да	Да	Да
<time>	Тег временной разметки (семантическая разметка).	6.0	4.0	11.1	5.0	9.0	12.0
<tt>	Не поддерживается в HTML5. Отображает шрифт моноширинным текстом. Используйте CSS вместо данного элемента.	Да	Да	Да	Да	Да	Да
<u>	Содержит в себе текст, который должен стилистически отличаться от обычного текста, например слова с орфографическими ошибками или текст на другом языке.	Да	Да	Да	Да	Да	Да
<var>	Математические/переменные величины.	Да	Да	Да	Да	Да	12.0
<wbr>	Предоставляет возможность указать браузеру, что при необходимости в этом месте можно сделать перенос строки (например, слишком длинное слово или URL).	1.0	3.0	11.7	4.0	Нет	Да

Теги устанавливающие суть содержимого

Теги <h1> — <h6> указывают, что содержимое является заголовком (подзаголовком). <h1> — заголовок наиболее высокого уровня, <h6> — наименьшего. Заголовки определяют структуру текста HTML документа. Браузера обычно выделяют заголовки размером шрифта, в зависимости от уровня заголовка.

Тег <dfn> указывает, что содержимое является термином. Браузеры обычно выводят содержимое тега <dfn> курсивом.

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

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

Тег <cite> указывает, что содержимое является названием материала. Браузеры обычно отображают текст внутри <cite> курсивом.

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

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

Тег <kbd> указывает, что содержимое является клавиатурным вводом. Браузеры обычно отображают текст внутри тега <kbd> моноширинным шрифтом.

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

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

Формы

Тег	Описание	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<form>	Определяет HTML форму для пользовательского ввода.	Да	Да	Да	Да	Да	Да
<input>	Определяет элементы управления для пользовательского ввода различных данных в составе формы.	Да	Да	Да	Да	Да	Да
<textarea>	Представляет собой поле формы для создания области многострочного ввода (текстовая область).	Да	Да	Да	Да	Да	Да
<button>	Используется для размещения кнопки.	Да	Да	Да	Да	Да	Да
<select>	Позволяет создать раскрывающийся список.	Да	Да	Да	Да	Да	Да
<optgroup>	Используется для группировки связанных данных в раскрывающемся списке.	Да	Да	Да	Да	Да	Да
<option>	Определяет пункты раскрывающегося списка (параметры для выбора).	Да	Да	Да	Да	Да	Да
<label>	Служит текстовой меткой для элемента <input>.	Да	Да	Да	Да	Да	Да
<fieldset>	Служит для визуальной группировки элементов, размещенных внутри формы.	Да	Да	Да	Да	Да	Да
<legend>	Определяет заголовок для элемента <fieldset>.	Да	Да	Да	Да	Да	Да
<datalist>	Определяет список предопределенных вариантов для ввода.	20.0	4.0	9.0	Нет	10.0	12.0
<keygen>	Используется для генерации пары ключей — закрытого и открытого (для форм).	1.0	1.0	3.0	1.2	Нет	Нет
<output>	Определяет область, в которую выводится результат вычислений (обычно рассчитывается с помощью скриптов).	10.0	4.0	11.0	5.1	Нет	Нет

Теги HTML-документа[править]

Как устроен HTML-документправить

HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:

<html> 
     <head> 
          <title> 
               Пример 1 
          </title>
     </head> 
     <body> 
          <H1> 
               Привет! 
          </H1> 
          <P> 
               Это простейший пример HTML-документа. 
          </P> 
          <P> 
               Этот *.html-файл может быть 
			   одновременно открыт и в Notepad, и в браузере. 
			   Сохранив изменения в Notepad, просто нажмите
			    кнопку Reload ('перезагрузить') в браузере,
				 чтобы увидеть эти изменения реализованными 
				 в HTML-документе. 
          </P> 
     </body> 
</html>

Попробуйте написать этот документ в программе Блокнот и просмотреть в браузере.

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

<html> 
<head> 
<title>Пример 1</title> 
</head> 
<body> 
<H1>Привет!</H1> 
<P>Это простейший пример HTML-документа.</P> 
<P>Этот *.html-файл может быть одновременно открыт
 и в Notepad, и в браузере. 
Сохранив изменения в Notepad, просто нажмите кнопку
 Reload ('перезагрузить') в браузере, чтобы увидеть
 эти изменения реализованными в HTML-документе.</P> 
</body> 
</html>

Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «<» и «>». Такой фрагмент (например, <html>) называется тегом (по-английски — tag, читается «тэг»).

Большинство HTML-тегов — парные, то есть на каждый открывающий тег вида <tag> есть закрывающий тег вида </tag> с тем же именем, но с добавлением «/».

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

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

Обязательные тегиправить

<html> ... </html>

Тег <html> должен открывать HTML-документ. Аналогично, тег </html> должен завершать HTML-документ.

<head> ... </head>

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

<meta>

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

<title> ... </title>

Всё, что находится между тегами <title> и </title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

<body> ... </body>

Эта пара тегов указывает на начало и конец тела HTML-документа, которое и определяет содержание документа.

<H1> ... </H1> — <H6> ... </H6>

Теги вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.

<P> ... </P>

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

<P>

и

</P>

воспринимается как один абзац.
Теги

<Hi>

и

<P>

могут содержать дополнительный атрибут ALIGN (читается «элайн», от английского «выравнивать»), например:

<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>

или

<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>

Подытожим всё, что мы знаем, с помощью примера 2:

<html> 
<head> 
<title>Пример 2</title> 
</head> 
<body> 
<H1 ALIGN=CENTER>Привет!</H1> 
<H2>Это чуть более сложный пример
 HTML-документа</H2> 
<P>Теперь мы знаем, что абзац можно выравнивать
 не только влево, </P> 
<P ALIGN=CENTER>но и по центру</P> 
<P ALIGN=RIGHT>или по правому краю.</P> 
</body> 
</html>

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

15.2 Fonts

The following HTML elements specify font information. Although they are
not all , their use is
discouraged in favor of style sheets.

15.2.1 Font style elements:
the TT, I, B,
BIG,
SMALL,
STRIKE, S, and U elements

<!ENTITY % fontstyle
 " |  |  |  | ">
<!ELEMENT (|) - - ()*>
<!ATTLIST (|)
                                -- , ,  --
  >

Start tag: required, End tag:
required

Attributes defined elsewhere

• , ()
• (), ()
• ()
• ()
• , , , , , , , , ()

Rendering of font style elements depends on the user agent. The following is
an informative description only.

TT: Renders as teletype or monospaced text.

I: Renders as italic text style.

B: Renders as bold text style.

BIG: Renders text in a «large» font.

SMALL: Renders text in a «small» font.

STRIKE and S: Render strike-through style text.

U: Renders underlined text.

The following sentence shows several types of text:

<P><b>bold</b>,
<i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and
<big>big</big> and <small>small</small> text.

These words might be rendered as follows:

It is possible to achieve a much richer variety of font effects using style
sheets. To specify blue, italic text in a paragraph with CSS:

<HEAD>
<STYLE type="text/css">
P#mypar {font-style: italic; color: blue}
</STYLE>
</HEAD>
<P id="mypar">...Lots of blue italic text...

Font style elements must be properly nested. Rendering of nested font style
elements depends on the user agent.

15.2.2 Font modifier
elements: FONT and BASEFONT

and are .

See the for
the formal definition.

Attribute definitions

size  =

This
attribute sets the size of the font. Possible values:

• An integer between 1 and 7. This sets the font to some fixed size, whose
  rendering depends on the user agent. Not all user agents may render all seven
  sizes.
• A relative increase in font size. The value «+1» means one size larger. The
  value «-3» means three sizes smaller. All sizes belong to the scale of 1 to
  7.

color =

This
attribute sets the text color.

face =

This
attribute defines a comma-separated list of font names the user agent should
search for in order of preference.

Attributes defined elsewhere

• , ()
• (), ()
• ()
• ()

The element changes the font size and color for text in its
contents.

The element sets the base font size (using the size attribute). Font size changes achieved with
are relative to the base font size set by . If is not used, the default base font size is 3.

DEPRECATED EXAMPLE:

The following example will show the difference between the seven font sizes
available with :

<P><font size=1>size=1</font>
<font size=2>size=2</font>
<font size=3>size=3</font>
<font size=4>size=4</font>
<font size=5>size=5</font>
<font size=6>size=6</font>
<font size=7>size=7</font>

This might be rendered as:

The following shows an example of the effect of relative font sizes using a
base font size of 3:

The base font size does not apply to headings, except where these are
modified using the element with a relative font size change.

Встроенное содержимое

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

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

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

Основные парные теги html

• <html> —сообщает  браузеру о том, что перед ним находится HTML документ.
• <head> — содержит описание интернет-страницы и является некой емкостью для всех заголовочных элементов html-документа, цель которых — помогать браузерам и поисковым системам в работе с данными.
• <body> — определяет видимую часть документа.
• <title> — отвечает за отображение и название документа.
• <table>, <tbody>, <thead>, <td>, <th> и <tr> — теги, относящиеся к созданию таблиц.
• <p> — закрытие данного тега сообщает браузерам о том, что текст отображается с новой строки, то есть с нового абзаца.
• <h> — задает заголовок (h1…h6).
• <br> — тег устанавливающий перевод строки в том месте, где он находится.
• <b>, <u>, <i> — каждый из тегов по отдельности выделяющий текст жирным, подчеркнутым или  курсивом.
• <ol>, <ul>, <dl> — теги отвечающее за создание нумерованного или маркированного списка, а также списка определений.
• <tt>, <kbd> — эффект для текста имитирующий стиль печатной машинки.
• <strong> — еще один HTML-тег выделяющий текст жирным. В отличии от тега <b> воспринимается поисковыми механизмами как особо выделенный.
• <marquee> — тег, используемый для создания бегущей строки.
• <font> — тег, который используется для форматирования текста, но работающий исключительно при использовании специальных атрибутов.
• <a> — весьма распространенный тег, отвечающий за создание гиперссылки.
• <cite> — цитирование.
• <code> — выводит в HTML документе примеры кода.
• <q> — отвечает за отображение текста заключенного в скобки.
• <blockqote> — создает отступы с обеих сторон текста.

Основные одиночные теги

• <meta> — тег содержащий метаинформацию, предназначенную для поисковых механизмов. Внутри него при помощи соответственных атрибутов можно прописать ключевые слова, управление процессом индексации, имя автора, кодировку документа и т. п.
• <img> — тег, отвечающий за отображение графических элементов (картинки). Используется вместе с обязательным атрибутом <img src=»/URL»>.
• <style> — указывает на таблицу стилей CSS. Данный тег задается в теге <head>. HTML документ может состоять из энного количества тегов <style>, задающих странице стилистику в независимости от расположения ее содержимого.
• <hr> — добавляет горизонтальную линию.

Нажав сочетание клавиш Ctrl+U можно заметить, что весь HTML-документ построен на использовании HTML тегов и атрибутов. Совсем не обязательно запоминать все существующие HTML теги. Для внесения корректировок на сайт достаточно запомнить те, что приведены выше.

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

Виды тегов html

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

Одиночные теги (метки) как можно догадаться состоят из одного html элемента — открывающегося тега (например <img>).

В независимости от вида каждый тег состоит из следующих элементов:

• открывающаяся угловая скобка (<);
• имя тега (p, body, br);
• закрывающаяся угловая скобка (>).

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

Заголовок поменьше с тегом

Очень маленький заголовок с тегом <H5>

Самый маленький заголовок с тегом <H6 align=center>

Тег <HR>. Закрывающий тег не требуется

Тег <HR> добавляет в HTML документ горизонтальную линию. Перед и после линии помещается пустая строка

Атрибуты

size

Устанавливает высоту(толщину) линии

width

Устанавливает ширину линии в пикселах или процентах

noshade

Создает линию без тени

color

Задает линии определенный цвет

Пример

Это обычная линия <hr>

Тег <i> и обязательный парный ему </i>

Тег <i> создает наклонный текст

Пример

Это обычный текстА это уже наклонный текст с использованием тега <i>

Тег <MARQUEE> и обязательный закрывающий </MARQUEE>

Этот элемент является ответом Microsoft на BLINK. MARQUEE заставляет текст не мигать, а прокручиваться, либо перемещаться из стороны в сторону

Атрибуты

BEHAVIOR=ALTERNATE | SCROLL | SLIDE

Определяет вид скроллинга

ALTERNATE	Колебательные движения налево и направо
SCROLL	Перемещение текста в направлении, указанном в DIRECTION. Достигнув края экрана, надпись появляется снова с противоположной стороны
SLIDE	Схоже с SCROLL, но текст перемещается только один раз и останавливается

DIRECTION=DOWN | LEFT | RIGHT | UP

Определяет направление скроллинга

DOWN	Движение вниз
LEFT	Движение справа налево. По умолчанию
RIGHT	Движение слева направо
UP	Движение вверх

ПримерALTERNATESCROLLSLIDE

Тег <NOBR> и обязательный парный закрывающий тег </NOBR>

Тег <NOBR> запрещает перевод строки. Бывают случаи, когда возникает надобность в операции противоположного назначения – запретить перевод строки. Текст, заключенный между тэгами и , будет гарантированно располагаться в одной строке без переноса на другую. Длинная строка не уместится на экране, и для ее просмотра придется использовать горизонтальную полосу прокрутки

Пример

Это обычный и очень длинный текст, который весьма неудобно читать, если он написан в одну строчкуКод для примера
<nobr>Это обычный и очень длинный текст, который весьма неудобно читать, если он написан в одну строчку</nobr>

Тег <P> и необязательный парный ему </P>

Тег <P> создает новый параграф. Два или более тега <P>, идущих подряд, заменяются одним

Параметры

align

Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center

left	выравнивание по левому краю. По умолчанию
right	выравнивание по правому краю
center	выравнивание по центру
justify	выравнивание по ширине

title

Всплывающая подсказка

Пример

Выравниваем параграф по правому краю с помощью соответствующего атрибута <p align=»right»>

Тег <PRE> и обязательный парный ему </PRE>

Тег <PRE> обрамляет предварительно отформатированный текст. Преформатированный текст отображается моношириным шрифтом. Получается как бы текстовая вставка в html

Пример

Буря мглою небо кроет,
 ... То завоет как дитя

Тег <s> и обязательный парный ему </s>

Тег <s> указывает, что текст должен быть зачеркнут

Пример

Это обычный текстА это уже текст с использованием тега <s>

Тег <SMALL> и обязательный парный ему </SMALL>

Тег <SMALL> выводит более мелкий текст

Атрибуты

title

Показывает текст в виде всплывающей подсказки

Пример

Это обычный текстА это уже более мелкий текст с использованием тега <SMALL>

Тег _{и обязательный парный ему}

Тег <sub> приспускает текст

Пример

Текст с использованием тега <sub> Формула воды — H₂O

Тег ^{и обязательный парный ему}

Тег <sup> приподнимает текст

Пример

Текст с использованием тега <sup>
42 = 16

Тег <tt> и обязательный парный ему </tt>

Тег <tt> создает текст, имитирующий стиль печатной машинки

Пример

Это обычный текстА это уже текст с использованием тега <tt>,имитирующий стиль печатной машинки

Тег <u> и обязательный парный ему </u>

Тег <u> указывает, что текст должен быть подчеркнут

Пример

Это обычный текстА это уже текст с использованием тега <u>

При копировании материалов,
ссылка на источник обязательна.

Формы

Тег	Описание
	Создает интерактивную кнопку.
	Представляет набор предварительно определенных параметров для элемента.
	Определяет диалоговое окно или подокно.
	Задает набор связанных полей формы.
	Определяет HTML-форму для ввода пользователем.
	Определяет элемент управления вводом.
	Представляет элемент управления для создания пары открытого и закрытого ключей.
	Определяет метку для элемента управления.
	Определяет заголовок для элемента.
	Представляет скалярное измерение в известном диапазоне.
	Определяет группу связанных параметров в списке выбора.
	Определяет параметр в списке выбора.
	Определяет список выбора в форме.
	Определяет элемент управления вводом многострочного текста (текстовая область).

Пример использования

Предположим (для примера), что совещание было назначено на 10:00 31 декабря 2016 года, но обстоятельства поменялись и совещание было решено перенести на 11:00 того же числа.

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

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

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибутов cite и datetime HTML тега <del></title>
</head>
<body>
<p>Совещание состоится 31 декабря 2016 года в <del cite = "prikaz.html" datetime = "2016-12-30T12:00:00+03:00">10:00</del> 11:00.</p>
</body>
</html>

Пример использования атрибутов cite и datetime HTML тега <del> (причина и время удаления текста)

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

Предположим (для примера), что вышла новая версия программного продукта (десятая версия сменяется одиннадцатой) о чем свидетельствует
информация опубликованная на определённом известном ресурсе. Ваша задача отобразить это на своем сайте.
Для этого мы воспользуемся тегом <del>, благодаря которому мы перечеркнем информацию о предыдущей версии программного продукта (десятая),
а тегом <ins> мы вставим информацию о новой версии(одиннадцатой).
Кроме того, атрибутом datetime укажем дату и время, когда текст был вставлен, а атрибутом cite укажем почему текст был вставлен (ссылка на информацию о выходе новой версии).

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

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибутов cite и datetime HTML тега <ins></title>
</head>
<body>
<p>Текущая версия программного продукта <del>десятая</del> <ins cite = "http://somesite.com/info.html" datetime = "2016-05-30T10:00:00+03:00">одиннадцатая</ins>.</p>
</body>
</html>

Пример использования тега <del> совместно с <ins> (удаление и вставка текста в документ).

Теги форматирования текста

<h1>-<h6> – это заголовки.

Чем меньше цифра, тем больше будет текст в заголовке, можно настроить размер каждого вида заголовка. Считается что теги <h1>, <h2> самые «любимые» теги поисковиками, через эти теги поисковики определяют «про что страница». Теги <h1>-<h6> обязательно должны закрываться.

Примеры:

Еще для форматирования текста часто служат теги – <b>, <strong>, <em>, <i>, <u>.

<b>Текст выделится жирным</b><strong>Текст выделится жирным (логическое выделение)<strong> – тег аналог <b><em>Наклонный текст</em> – аналог<i></i><u>Подчеркнутый текст</u><strike>Перечеркнутый текст</strike><big>Увеличенный</big> и <small>уменьшенный</small> текст по сравнению с текущим.^{Верхний индекс} – X2_{Нижний индекс} – X₂<tt>Моноширинный текст</tt> – как печатная машинка

Все эти теги двусторонние, то есть должны закрываться. Теги могут использоваться в сочетании. Например:

<b><i><u>Жирный, наклонный и подчеркнутый текст</u></i></b>

Запомните правило: «Теги закрываются в таком порядке, в каком открывались, выше вы видите – biu – uib. Если поменять порядок возможно ничего не измениться, но при сложном форматировании текста у вас будут проблемы.

Перевод строки и текстовые блоки

Теги заголовков (<h1>-</h6>) переводят после себя строку («жмут enter»), если иное не прописано в таблицах стилей. Когда вы пишите текст в «голом html» ваши переводы строки учитываться не будут, текст будет идти подряд до заголовков либо специальных тегов.

<br> – переводит строку. Закрывающий тег не нужен. Если вам нужен большой разрыв между строками можете использовать несколько таких тегов, например, <br><br><br><br><br> – пять переводов строки.

<hr> – горизонтальная линия:
Во многих тегах могут использоваться специальные атрибуты, например, в теге <hr> можно указать ее толщину:

<hr size=»1″>:
Для форматирования текста также используются двусторонние теги <p>, <div>, <pre>.

<p>Текст</p> – Параграф<div></div> – По умолчанию также параграф, но создан для сложного форматирования места нахождения контента на странице, используется для верстки через таблицы стилей.

<pre></pre> – отформатированный шрифт. Между этими тегами текст выведится так как напечатам (с пробелами, переводами строки).

Вставка объектов.

Чтобы вставить картинку нужно создать код:

<img src=»http://site.ru/image.png«>

Где адрес картинки.

Чтобы вставить ссылку:

<a href=»http://site.ru/«>Перейти на Site.ru</a>

Где — сайт, на который ведет ссылка, Перейти на Site.ru – название ссылки.

У ссылки есть несколько атрибутов, например target=»_blank» – заставит ссылку открыться в новом окне.

Вместо текста ссылки можно вставить картинку, тогда код такой:

<a href=»http://site.ru/» target=»_blank»><img src=»http://site.ru/image.png» border=»0″></a>

В коде ссылки я вставил атрибут target=»_blank» — ссылка откроется в новом окне, а в коде картинки border=»0″ — у картинки не будет обрамления.

Списки

Списки создаются следующими html- кодами:

<ul>
<li>Первый пункт списка</li>
<li>Второй пункт списка</li>
<li>Третий пункт списка</li>
</ul>

Таблицы

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

Кстати, перевод строки после каждого тега вебмастеры ставят только для удобства редактирования html-кода, этот же код таблицы можно вставить так: