Элементы HTML

Элемент HTML — это основная структурная единица веб-страницы, написанная на языке HTML. Данный элемент вы можете увидеть в исходном коде для всех веб-страниц после задания типа документа на первой строке на странице. DOCTYPE определяет, какую версию (X) HTML эта страница использует. Элементы страницы находятся между открывающим тегом  и закрывающим . Элемент  называется корневым элементом. 

 Структура HTML-документа 
HTML — это теговый язык разметки документов, то есть любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками, называемыми тегами. Регистр, в котором набрано имя тега, в HTML значения не имеет. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для тега <font>). Атрибуты указываются в открывающем теге. Вот пример части разметки HTML-документа:
<p>Текст между двумя тегами - открывающим и закрывающим.</p>
 <a href="http://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> и <code></code> соответственно.
Внутри этих тегов должны находиться теги заголовка () и тела () документа.

Варианты 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 
В отличие от предыдущих версий тег всего один. 

<!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>

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

Также якорем в современных браузерах может служить id любого элемента.

Текстовые блоки 
 <h1> … </h1>, <h2> … </h2>, … ,<h6> … </h6> — заголовки 1, 2, … 6 уровня. Используются для выделения частей текста (заголовок 1 — самый крупный, 6 — самый мелкий).
 <p> — новый абзац. Можно в конце абзаца поставить </P>, но это не обязательно.
 <br> — новая строка. Этот тег не закрывается (то есть не существует тега </BR>)
 <hr> — горизонтальная линия
 <blockquote> … </blockquote>  — цитата. Обычно текст сдвигается вправо.
 <pre> … </pre>  — режим preview (preformatted text). Пробельные символы остаются там, где они есть в оригинальном документе (в других тегах игнорируются). Внутри могут обрабатываться внутристроковые теги кроме img, object, big, small, sup и sub.
 <div> … </div>  — блок (обычно используется для применения стилей CSS)
 <span> … </span>  — строка (обычно используется для применения стилей CSS)

Форматирование текста 
 <em> … </em>  — логическое ударение (обычно отображается курсивным шрифтом)
 <strong> … </strong>  — усиленное логическое ударение (обычно отображается жирным шрифтом)
 <i> … </i>  — выделение текста курсивом. Важно, что <i> и <b> не являются семантическими тегами, то есть не придают смысла содержимому.
 <b> … </b>  — выделение текста жирным шрифтом
 <u> … </u>  — подчёркивание текста
 
 … 
  (или <strike> … </strike> )— зачёркивание текста
<big> … </big>  — увеличение шрифта. Устарел и не рекомендуется к использованию.
 <small> … </small>  — уменьшение шрифта
 <blink> … </blink>  — мигающий текст. Внимание! Этот тег не работает в браузере Internet Explorer версий 5 и ниже без применения JavaScript
 <marquee> … </marquee>  — сдвигающийся по экрану текст.
 <sub> … </sub>  — подстрочный текст. Например, H<SUB>2</SUB>O  создаст текст H2O.
 <sup> … </sup>  — надстрочный текст. Например, E=mc<SUP>2</SUP>  создаст текст E=mc2.
 <font параметры> … </font>  — устаревший тег, отвечавший за задание параметров шрифта. У этого тега есть следующие параметры:
 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> ( — ненумерованный список) поставить <ol> ( — нумерованный список), список получится нумерованным:
 первый элемент
 второй элемент
 третий элемент

У этих тегов есть параметры:
 type = "тип" 
где тип — форма:

в  <UL>  — символов

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

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

 A или а (латинскими буквами) — буквенный список: соответственно заглавными или строчными буквами
 I или i — римские цифры: соответственно заглавными или строчными буквами (римскими цифрами отображаются числа с 1 по 3999, остальные — арабскими)
 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> можно и не закрывать.

Различия в отображении нумерованных списков 
При неположительных значениях в нумерации браузеры ведут себя по-разному. Например, Internet Explorer игнорирует value=0, value=-1 и т.д., другие же браузеры, как Chrome, Firefox, отображают заданное значение. При этом Internet Explorer не игнорирует start=0, start=-1 и т.д., т.е. начать список с неположительного значения он может, но перескочить в нумерации на неположительное значение не может.
{|rules=all frame=void
!HTML-разметка||Данный браузер||Chrome, Firefox||Internet Explorer
|-
|<ol start=-2><li><li value=0><li value=2></ol>||<ol start=-2>   ||-2, 0, 2||-2, -1, 2
|}
В буквенном списке (type=A или type=a) неположительные значения одни браузеры, как Chrome, Firefox, отображают цифрами, а Internet Explorer (в режиме Quirks mode, т.е. если на странице не указана версия HTML 4.01 или 5 в тэге !DOCTYPE HTML) отрицательные значения отображает буквами со знаком “минус”, а ноль — символом @.
{|rules=all frame=void
!HTML-разметка||Данный браузер||Chrome, Firefox||Internet Explorer (Quirks mode)
|-
|<ol type=A start=-1><li><li><li></ol>||<ol type=A start=-1>   ||-1, 0, A||-A, @, A
|}
Пустое или нечисловое значение (value=, value=A, value=B) одни браузеры, как Chrome, Firefox, игнорируют, а Internet Explorer воспринимает как value=1.
{|rules=all frame=void
!HTML-разметка||Данный браузер||Chrome, Firefox||Internet Explorer
|-
|<ol start=-2><li><li value=B><li value=2></ol>||<ol start=-2>   ||-2, -1, 2||-2, 1, 2
|}
Имеются различия при отображении чисел римскими цифрами (type=I или type=i), т.к. Internet Explorer (в режиме Quirks mode, т.е. если на странице не указана версия HTML 4.01 или 5 в тэге !DOCTYPE HTML) некоторые числа отображает неправильно.
{|rules=all frame=void
!HTML-разметка||Данный браузер||Chrome, Firefox||Internet Explorer (Quirks mode)
|-
|<ol type=I start=3300><li><li><li><li></ol>
|<ol type=I start=3300 style=margin-left:6em>    
|MMMCCCMMMCCCIMMMCCCIIMMMCCCIII
|MMMCCCMMMCCCMMMCCCMMMCCC
|}
Все числа из интервала с 1 по 1880 Internet Explorer отображает правильно, а из интервала с 1881 по 3999 — не все. Для 603 чисел, 67 групп по 9 чисел (xxx1—xxx9), в запись римскими цифрами не попадает младшая цифра. И это, скорее всего, не для того, чтобы укоротить длинную запись, т.к. 3888 — число с самой длинной (в интервале с 1 по 3999) записью римскими цифрами (MMMDCCCLXXXVIII) — отображается правильно.

В таблице крестиком отмечены группы неправильно отображаемых в Internet Explorer (в режиме Quirks mode) чисел:

Объекты 
 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>…<code></MAP></code> — создание карты изображений позволяющей хранить в одном изображении несколько ссылок.
Пример:
<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

Формы 

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

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

Символы 
Чтобы создать символ, необязательно искать его на клавиатуре: можно просто набрать тег; например, чтобы получить ¢, надо набрать &cent;, неразрывный пробел — &nbsp;, ударение — &#x301; и т. д.

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

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

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

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

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

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

Большинство спецсимволов см. [webdesign.about.com/library/bl_htmlcodes.htm на сайте about.com].

Примечания

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

HTML