Элементы HTML

Эта статья посвящена в основном элементам HTML. Чтобы узнать о формате элементов Википедии, см. Википедия:Как редактировать статью и m:Help:HTML in wikitext/ru

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

Структура HTML-документа

HTML — это теговый язык разметки документов, то есть любой документ на языке HTML представляет собой набор элементов, причем начало и конец каждого элемента обозначается специальными пометками, называемыми тегами. Регистр, в котором набрано имя тега, в HTML значения не имеет. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для тега <font>). Атрибуты указываются в открывающем теге. Вот пример части разметки HTML-документа:

<p>Текст между двумя тегами - открывающим и закрывающим.</p>
 <a href="http://www.example.com">Здесь элемент содержит атрибут href.</a>
А вот пример пустого элемента: <br>

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит примерно так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.

Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги заголовка (<head></head>) и тела (<body></body>) документа.

Варианты DOCTYPE для HTML 4.01

Строгий (Strict): не содержит тегов, помеченных как «устаревшие» или «не одобряемые» (deprecated).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DOCTYPE для HTML 5

В отличие от предыдущих версий тег всего один [1]

<!DOCTYPE html>

Основные элементы

Теги и их параметры нечувствительны к регистру. То есть <A HREF="http://example.com"> и <a href="http://example.com"> означают одно и то же.

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

Гиперссылки

<a href="filename" target="_self">название ссылки</a>

Атрибут href задает значение адреса документа, на который указывает ссылка.
filename — имя файла или адрес Internet, на который необходимо сослаться.
название ссылки — название гипертекстовой ссылки, которое будет отображаться в браузере, то есть показываться тем, кто зашел на страницу.
target — задает значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:
- _top — открытие документа в текущем окне;
- _blank — открытие документа в новом окне;
- _self — открытие документа в текущем фрейме;
- _parent — открытие документа в родительском фрейме.

Значение по умолчанию: _self.

Тот же элемент используется для создания так называемых «якорей» (anchor), которые могут потом использоваться в гиперссылках, направленных на какой-то определённый элемент страницы. Например:

<!DOCTYPE html> 
 <html>
  <head>
    <meta charset="utf-8">
    <title>Якорь внутри документа</title>
  </head>
  <body>
   <p><a name="top"></a></p>
   <p>текст</p>
   <p><a href="#top">Наверх</a></p>
  </body>
</html>

Аналогичным образом якорь можно сделать на закладку, находящуюся на другой веб-странице или на другом сайте: там, куда направлена ссылка, должен стоять <a name="xxx"></a>, а там, откуда идёт ссылка, к значению href добавляется знак решётки и название якоря.

Текстовые блоки

<H1> … </H1>, <H2> … </H2>, … ,<H6> … </H6> — заголовки 1, 2, … 6 уровня. Используются для выделения частей текста (заголовок 1 — самый крупный, 6 — самый мелкий).
<P> — новый абзац. Можно в конце абзаца поставить </P>, но это не обязательно.
<BR> — новая строка. Этот тег не закрывается (то есть не существует тега </BR>)
<HR> — горизонтальная линия
<BLOCKQUOTE> … </BLOCKQUOTE> — цитата. Обычно текст сдвигается вправо.
<PRE> … </PRE> — режим preview (preformatted text). В этом режиме текст заключается в рамку и никак не форматируется (то есть теги, кроме </PRE>, игнорируются, и переводы строки ставятся там, и только там, где они есть в оригинальном документе).
<DIV> … </DIV> — блок (обычно используется для применения стилей CSS)
<SPAN> … </SPAN> — строка (обычно используется для применения стилей CSS)

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

<EM> … </EM> — логическое ударение (обычно отображается курсивным шрифтом)
<STRONG> … </STRONG> — усиленное логическое ударение (обычно отображается жирным шрифтом)
<I> … </I> — выделение текста курсивом
<B> … </B> — выделение текста жирным шрифтом
<U> … </U> — подчёркивание текста
<S> … </S> (или <STRIKE> … </STRIKE> )— ~~зачёркивание~~ текста
<BIG> … </BIG> — увеличение шрифта
<SMALL> … </SMALL> — уменьшение шрифта
<BLINK> … </BLINK> — мигающий текст. Внимание! Этот тег не работает в браузере Internet Explorer версий 5 и ниже без применения JavaScript
<MARQUEE> … </MARQUEE> — сдвигающийся по экрану текст.
<SUB> … </SUB> — подстрочный текст. Например, H<SUB>2</SUB>O создаст текст H₂O.
<SUP> … </SUP> — надстрочный текст. Например, E=mc<SUP>2</SUP> создаст текст E=mc².
<FONT параметры> … </FONT> — задание параметров шрифта. У этого тега есть следующие параметры:
- COLOR=color — задание цвета. Цвет может быть задан в шестнадцатеричной форме как #rrggbb (первые 2 шестнадцатеричные цифры задают красную компоненту, следующие 2 — зелёную, последние 2 — синюю) или названием.
- FACE=шрифт задание гарнитуры шрифта
- SIZE=размер задание размера шрифта. Размер от 1 до 7: стандартный по умолчанию 3. Есть много способов изменить стандартный размер.
- SIZE=+изменение или SIZE=-изменение — изменение размера шрифта от стандартного. Например, +2 означает размер на 2 больше стандартного.

Так, например,

Сигналом к началу атаки являются
<U>три</U> <FONT SIZE="+2">больших</FONT> <FONT COLOR="green">зелёных</FONT> свистка.

создаст текст

Сигналом к началу атаки являются три больших зелёных свистка.

Списки

 <UL>
   <LI> первый элемент </LI>
   <LI> второй элемент </LI>
   <LI> третий элемент </LI>
 </UL>

создаёт список

первый элемент
второй элемент
третий элемент

Если вместо <UL> (Unordered List — ненумерованный список) поставить <OL> (Ordered List — нумерованный список), список получится нумерованным:

первый элемент
второй элемент
третий элемент

У этих тегов есть параметры:

type = "тип"

где тип — форма: в <UL> — символов

square — квадрат
circle — окружность
disk — круг: по умолчанию

а в <OL> — цифр или букв

A или а (латинскими буквами) — буквенный список: соответственно заглавными или строчными буквами
I или i — римские цифры: соответственно заглавными или строчными буквами
1 — арабские цифры: по умолчанию

пишется так:

<ol type="i">

<li> Первое </li>
 
<li> Второе </li>

<li> И т.д. </li>

</ol>

и создаст следующее:

Первое

Второе

И т. д.

Параметр start="начало" (только для <OL> ), определяющий начало нового отсчёта: например, если нужно не 1, 2, 3, а 24, 25, 26

Пишется так:

<ol start="24">

<li> Двадцать четыре </li>

<li> Двадцать пять </li>

<li> И т.д. </li>

и создаст следующее:

Двадцать четыре

Двадцать пять

И т. д.

и, наконец для тега <LI> параметр value="следующий" — если необходимо перескочить с одной цифры на другую: например, не 1, 2, 3, 4, а 1, 2, 22, 23

<ol>

<li> Один </li>

<li> Два </li>

<li value="22"> Двадцать два </li>

<li> Двадцать три </li>

создаст следующее:

Один

Два

Двадцать два

Двадцать три

Наконец, третьим, и последним, списком является список определений:

 
 <DL>
  <DT> Кошка </DT> <DD> мяукающее домашнее животное </DD>
  <DT> Кот </DT> <DD> муж кошки </DD>
  <DT> Крокодил </DT> <DD> большой африканский зверь с острыми зубами </DD>
 </DL>

создаст следующее:

Кошка

мяукающее домашнее животное

Кот

муж кошки

Крокодил

большой африканский зверь с острыми зубами

Между прочим, теги <LI>, <DT>, <DD> можно и не закрывать.

Объекты

EMBED — вставка различных объектов: не-HTML документов и media-файлов
APPLET — вставка Java-апплетов
SCRIPT — вставка скриптов.

Изображения

IMG — вставка изображения. Этот тег не закрывается.
- SRC — имя или URL
- ALT — альтернативное имя (отобразится, если в браузере запретить отображать картинки)
- TITLE — краткое описание изображения (отобразится при наведении курсора на картинку)
- WIDTH, HEIGHT — размеры (если не совпадают с истинными размерами картинки, то изображение «растянется» или «сожмется»)
- ALIGN — задает параметры обтекания текстом (top, middle, bottom, left, right)
- VSPACE, HSPACE — задают размеры вертикального и горизонтального пространства вокруг изображения

Пример:

<IMG SRC=url ALT="текст" TITLE="текст" WIDTH="размер (пикс, %)" HEIGHT="размер (пикс, %)">

Изображение можно сделать ссылкой:

<A HREF=url ><IMG SRC=url></A>

Карта изображений

<MAP>…</MAP> — создание карты изображений позволяющей хранить в одном изображении несколько ссылок.

Пример:

<IMG width="500" height="200" usemap="#somemap" src="url">
<MAP name="somemap">
    <AREA shape="rect" coords="6, 7, 140, 196" href="url1">
    <AREA shape="circle" coords="239, 98, 92" href="url2">
    <AREA shape="polygon" coords="386,16, 344,56, 350,189, 385,132, 489,190, 496,74" href="url3">
</MAP>

Таблицы

TABLE — создание таблицы. Параметры тега:
- BORDER — толщина разделительных линий в таблице
- CELLSPACING — расстояние между клетками
- CELLPADDING — отступ от рамки до содержимого ячейки.
CAPTION — заголовок таблицы (этот тег необязателен)
TR — строка таблицы
TH — заголовок столбца таблицы (этот тег необязателен)
TD — ячейка таблицы
height — высота таблицы
width — ширина таблицы

Так, например,

<TABLE BORDER="1" CELLSPACING="0">
  <CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION>
  <TH> Год </TH> 
  <TH> Улов </TH>
  <TR>
    <TD> 1997 </TD> 
    <TD> 214 </TD>
  </TR>
  <TR>
    <TD> 1998 </TD> 
    <TD> 216 </TD>
  </TR>
  <TR>
    <TD> 1999 </TD> 
    <TD> 207 </TD>
  </TR>
</TABLE>

Создаст таблицу:

Улов крокодилов в Мумбе-Юмбе
Год Улов
1997 214

1998 216

1999 207

У тега TABLE есть ещё параметр CELLPADDING. Он определяет расстояние в пикселях между рамкой ячейки и её содержимым. Например, если заменить первую строку таблицы на

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5">

таблица получится такой:

Улов крокодилов в Мумбе-Юмбе
Год Улов
1997 214

1998 216

1999 207

Другой параметр тегов TABLE, TR, TH, TD — ALIGN. Он определяет выравнивание. Возможные значения — center (по центру), left (по левому краю), right (по правому краю).

Параметр ALIGN в TD или TH определяет выравнивание для содержимого внутри данной ячейки, в TR — для содержимого всех ячеек строки, TABLE — для самой таблицы на страничке. Для каждой ячейки берётся выравнивание из TD или TH, если оно не задано — из TR, если и оно не задано — по центру для TH или по левому краю для TD.

Например, если заменить первые строки таблицы на

<TABLE BORDER="1" CELLSPACING="0" ALIGN="center">
<CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION>
<TH> Год </TH>
<TH> Улов </TH>
<TR>
<TD> 1997 </TD> <TD ALIGN="CENTER"> 214 </TD>

таблица получится такой:

Улов крокодилов в Мумбе-Юмбе
Год Улов
1997 214

1998 216

1999 207

Незакрытые теги TD, TR и TH приводят к некорректному отображению, особенно при работе со вложенными таблицами.

Формы

Создание форм в HTML является довольно сложным делом. Здесь приводятся только названия основных тегов.

FORM — создание формы
INPUT — элемент ввода (может иметь разные функции — от ввода текста до отправки формы)
TEXTAREA — текстовая область (многострочное поле для ввода текста)
SELECT — список (обычно в виде выпадающего меню)
OPTION — пункт списка

Символы

Чтобы создать символ, необязательно искать его на клавиатуре. Можно просто набрать тег (например, чтобы получить ¢, надо набрать следующее: ¢). Пробел —   , ударение — ́ и т. д.

Названия цветов

В HTML определены следующие цвета.

Название	Шестнадцатиричный цвет
black	#000000
silver	#c0c0c0
maroon	#800000
red	#ff0000
navy	#000080
blue	#0000ff
purple	#800080
fuchsia	#ff00ff
green	#008000
lime	#00ff00
olive	#808000
yellow	#ffff00
teal	#008080
aqua	#00ffff
gray	#808080
white	#ffffff

Основные символы

Код	Символ	Смысл
<	<	меньше
>	>	больше
&	&	амперсанд
		неразрывный пробел (на этом пробеле не переводится строка)
§	§	параграф
№	№	номер
©	©	копирайт (copyright)
®	®	зарегистрированный товарный знак (registered trademark)
	™	товарный знак (trademark)
°	°	градусы
«	«	открывающая кавычка в русском языке
»	»	закрывающая кавычка в русском языке
…	…	многоточие
—	—	тире
	•	жирная точка
±	±	плюс-минус
−	−	минус

Клавиатурные символы ' и " в русском языке кавычками не являются. Также неправильно на сайтах заменять №, ©, ®, ™, °C на N, (c), (R), TM, C.

Дефис, тире и минус — три разных знака.

Клавиатурный символ - называется дефис и используется внутри слов.
Минус шире дефиса. Он используется для записи отрицательных чисел и операции вычитания.
Тире ещё шире, чем минус. Оно используется между словами и отбивается пробелами. Для обозначения числовых интервалов тоже используется тире, но пробелами не отбивается.

Более подробно: Артемий Лебедев. Тире, минус и дефис, или Черты русской типографики (неопр.). Ководство (15 января 2003). Архивировано 24 августа 2011 года.

В электронной переписке, чатах и форумах все эти упрощения допустимы: можно заменять тире и минусы дефисами, знак номера на N, кавычки теми, что есть на клавиатуре и т. д.

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

Большинство спецсимволов см. на сайте about.com.

Ссылки

Элементы и Атрибуты для HTML4.01

Элементы HTML

Содержание

Структура HTML-документа

Варианты DOCTYPE для HTML 4.01

DOCTYPE для HTML 5

Основные элементы

Гиперссылки

Текстовые блоки

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

Списки

Объекты

Изображения

Карта изображений

Таблицы

Формы

Символы

Названия цветов

Основные символы

Ссылки

Навигация

Элементы HTML

Структура HTML-документа

Варианты DOCTYPE для HTML 4.01

DOCTYPE для HTML 5

Основные элементы

Гиперссылки

Текстовые блоки

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

Списки

Объекты

Изображения

Карта изображений

Таблицы

Формы

Символы

Названия цветов

Основные символы

Ссылки

Навигация

Поиск