Элементы HTML
HTML |
---|
|
|
Элемент HTML — основная структурная единица веб-страницы, написанная на языке HTML. Данный элемент вы можете увидеть в исходном коде для всех веб-страниц после задания типа документа на первой строке на странице. DOCTYPE определяет, какую версию (X) HTML эта страница использует. Элементы страницы находятся между открывающим тегом <html> и закрывающим </html>. Элемент <html> называется корневым элементом.[1]
Структура 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>
и </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
В отличие от предыдущих версий тег всего один.[2]
<!DOCTYPE html>
Основные элементы
![](http://upload.wikimedia.org/wikipedia/commons/thumb/1/10/HTML_element_content_categories.svg/220px-HTML_element_content_categories.svg.png)
Теги и их параметры нечувствительны к регистру. То есть <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
добавляется знак решётки и название якоря.
Также якорем в современных браузерах может служить 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> не являются семантическими тегами, то есть не придают смысла содержимому.[3]<b> … </b>
— выделение текста жирным шрифтом<u> … </u>
— подчёркивание текста<s> … </s>
(или<strike> … </strike>
)—зачёркиваниетекста<big> … </big>
— увеличение шрифта. Устарел и не рекомендуется к использованию[4].<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>
— устаревший тег[5], отвечавший за задание параметров шрифта. У этого тега есть следующие параметры: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 по 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
и т.д., т.е. начать список с неположительного значения он может, но перескочить в нумерации на неположительное значение не может.
HTML-разметка | Данный браузер | Chrome, Firefox | Internet Explorer |
---|---|---|---|
<ol start=-2><li><li value=0><li value=2></ol> | -2, 0, 2 | -2, -1, 2 |
В буквенном списке (type=A
или type=a
) неположительные значения одни браузеры, как Chrome, Firefox, отображают цифрами, а Internet Explorer (в режиме Quirks mode, т.е. если на странице не указана версия HTML 4.01 или 5 в тэге !DOCTYPE HTML
) отрицательные значения отображает буквами со знаком “минус”, а ноль — символом @.
HTML-разметка | Данный браузер | Chrome, Firefox | Internet Explorer (Quirks mode) |
---|---|---|---|
<ol type=A start=-1><li><li><li></ol> | -1, 0, A | -A, @, A |
Пустое или нечисловое значение (value=
, value=A
, value=B
) одни браузеры, как Chrome, Firefox, игнорируют, а Internet Explorer воспринимает как value=1
.
HTML-разметка | Данный браузер | Chrome, Firefox | Internet Explorer |
---|---|---|---|
<ol start=-2><li><li value=B><li value=2></ol> | -2, -1, 2 | -2, 1, 2 |
Имеются различия при отображении чисел римскими цифрами (type=I
или type=i
), т.к. Internet Explorer (в режиме Quirks mode, т.е. если на странице не указана версия HTML 4.01 или 5 в тэге !DOCTYPE HTML
) некоторые числа отображает неправильно.
HTML-разметка | Данный браузер | Chrome, Firefox | Internet Explorer (Quirks mode) |
---|---|---|---|
<ol type=I start=3300><li><li><li><li></ol> | MMMCCC MMMCCCI MMMCCCII MMMCCCIII | MMMCCC MMMCCC MMMCCC MMMCCC |
Все числа из интервала с 1 по 1880 Internet Explorer отображает правильно, а из интервала с 1881 по 3999 — не все. Для 603 чисел, 67 групп по 9 чисел (xxx1—xxx9), в запись римскими цифрами не попадает младшая цифра. И это, скорее всего, не для того, чтобы укоротить длинную запись, т.к. 3888 — число с самой длинной (в интервале с 1 по 3999) записью римскими цифрами (MMMDCCCLXXXVIII) — отображается правильно.
В таблице крестиком отмечены группы неправильно отображаемых в Internet Explorer (в режиме Quirks mode) чисел:
01-09 | 11-19 | 21-29 | 31-39 | 41-49 | 51-59 | 61-69 | 71-79 | 81-89 | 91-99 | |
1800 | ✘ | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
2300 | ✘ | ✘ | ✘ | |||||||
2700 | ✘ | ✘ | ✘ | |||||||
2800 | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | |
3100 | ✘ | |||||||||
3200 | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | |||
3300 | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | |
3400 | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | |||
3500 | ✘ | |||||||||
3600 | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | |||
3700 | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | |
3800 | ✘ | ✘ | ✘ | |||||||
3900 | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ | ✘ |
Объекты
EMBED
— вставка различных объектов: не-HTML документов и media-файловAPPLET
— вставка Java-апплетовSCRIPT
— вставка скриптов.
Изображения
IMG
— вставка изображения. Этот тег не закрывается.SRC
— имя или URLALT
— альтернативное имя (отобразится, если в браузере запретить отображать картинки)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 приводят к некорректному отображению, особенно при работе со вложенными таблицами.[источник не указан 1760 дней]
Формы
Создание форм в 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). Дата обращения: 23 апреля 2013. Архивировано 9 декабря 2007 года.
Символы <, > и & нельзя отобразить в HTML обычным образом, потому что они имеют специальный смысл. Для их отображения всегда используются <, > и & соответственно.
Большинство спецсимволов см. [webdesign.about.com/library/bl_htmlcodes.htm на сайте about.com].
Примечания
- ↑ Корневой элемент HTML-документа Архивная копия от 20 декабря 2019 на Wayback Machine Описание
- ↑ HTML Standard (неопр.). html.spec.whatwg.org. Дата обращения: 26 сентября 2021. Архивировано 26 сентября 2021 года.
- ↑ Что такое семантическая вёрстка и зачем она нужна — журнал «Доктайп» (рус.). HTML Academy. Дата обращения: 30 августа 2023. Архивировано 30 августа 2023 года.
- ↑ — журнал «Доктайп» (рус.). HTML Academy. Дата обращения: 30 августа 2023. Архивировано 30 августа 2023 года.
- ↑ — журнал «Доктайп» (рус.). HTML Academy. Дата обращения: 30 августа 2023. Архивировано 30 августа 2023 года.
Ссылки
- Элементы и Атрибуты для HTML4.01