Тэги HTML
HTML-тэги (от англ. tag — метка) — элементы разметки веб-страницы на языке гипертекстовой разметки HTML.
С помощью тегов HTML создаётся структура веб-страницы, определяется её внешний вид при просмотре браузерами, осуществляется форматирование содержимого, вставка гиперссылок, изображений, таблиц и других элементов, а также добавляется дополнительная информация для индексирования поисковыми системами.
Содержание |
[править] Синтаксис
HTML-теги представляют собой специальные метки, заключённые в символы «<» и «>». Внутри них следует имя тега, определяющее его тип. Теги бывают парные и одиночные. Парные состоят из открывающего и закрывающего тегов и допускают вложенность. Внутри них заключается содержимое в виде текста или других тегов. Одиночные теги тоже участвуют в форматировании страницы, но не содержат закрывающего тега.
В открывающем теге могут указываться разделённые через пробел дополнительные параметры — атрибуты тега, которым присваиваются значения. У каждого тега есть свой набор атрибутов. Значения атрибутов заключаются в одинарные или двойные кавычки, но могут распознаваться браузерами и без кавычек.
<ИМЯ_ТЕГА АТРИБУТ_1="значение" АТРИБУТ_2="значение">
Закрывающий тег указывается без атрибутов и содержит в начале символ косой черты — слеш:
</ИМЯ_ТЕГА>
Имена тегов и названия атрибутов являются регистронезависимыми.
Вложенность предполагает размещение одного парного или одиночного тега полностью внутри другого парного тега:
<ТЕГ1><ТЕГ2></ТЕГ2></ТЕГ1>
Предупреждение: Нарушение вложенности является ошибкой.
Пример нарушения вложенности: <ТЕГ1><ТЕГ2></ТЕГ1></ТЕГ2>
Различаются два типа тегов: текстовые (inline) и блочные (block). Inline-теги встраиваются в текстовую строку, а блочные формируют на странице прямоугольные блоки, начинающиеся всегда с новой строки.
Предупреждение: Блочные теги не допускается вкладывать внутрь строчных.
[править] Универсальные атрибуты HTML-тегов
В HTML существует ряд универсальных атрибутов, которые применяются ко всем тегам:
- TITLE — создаёт всплывающую подсказку при наведении курсора мыши на элемент. В качестве значения присваивается текстовая строка.
Атрибуты, добавляющие стили CSS:
- STYLE — универсальный атрибут, с помощью которого к тегам применяются встроенные стили CSS.
- CLASS — атрибут, добавляющий группы html-тегов к определённым классам, к которым применяются внешние стили CSS.
- ID — атрибут, применяющий отдельный набор CSS-стилей к какому-то одному конкретному тегу в html-документе.
[править] Форматы значений атрибутов
В HTML используются различные форматы значений, присваиваемых атрибутам тегов. Наиболее универсальные из них применяются сразу во множестве разных тегов:
- Линейные размеры элементов: ширина, высота, толщина границ, координаты или относительное смещение. Обозначаются в виде обычных чисел "N", обозначающих размер в пикселях, а также в виде процентов "N%", частей свободного пространства "N*".
- Выравнивание элемента на странице. В зависимости от того, блочный это элемент или строчный (inline), используются значения left, right, center (для блочных элементов), justify (равномерное распределение текста в блоках или ячейках таблиц), top, bottom, texttop, textbottom, baseline (для выравнивания строчных элементов относительно строки), middle (в таблицах) и т. д.
- Коды цветов. Обозначаются в виде 16-ричного кода цвета
"#RRGGBB"или буквенных имён цветов. - Гиперссылки. Обозначаются в виде абсолютного или относительного URL файла.
- Текстовые строки. Представляют собой обычный текст.
Для отдельных тегов также существуют свои специализированные атрибуты со уникальными значениями, применяемыми только к данному тегу.
[править] Общая структура веб-страницы
<HTML> <HEAD> <TITLE>Заголовок страницы</TITLE> </HEAD> <BODY> Содержание страницы </BODY> </HTML>
Общий вид минимальной разметки веб-страницы.
Веб-страница определяется открывающим и закрывающим тегами <HTML></HTML>, которые обозначает начало и конец файла HTML-документа. Внутри этого тега выделяются заголовок и тело документа. Заголовок заключён в парные теги <HEAD></HEAD> и содержит информацию, не отображаемую непосредственно в самом документе, но используемую браузерами и поисковыми системами. Обязательным внутри заголовка является парный тег <TITLE></TITLE>, в котором указывается название страницы. Название ограничивается длиной 64 символа.
Вслед за «головой» документа следует тело, заключённое в парные теги <BODY></BODY>. Внутри тела помещается всё содержимое, отображаемое на веб-странице.
Теги <HTML>, <HEAD> и <BODY> являются обязательными. Допускается только однократное применение их на одной странице. Однако браузеры могут отображать веб-страницу и в случае их отсутствия.
Отдельной разновидностью являются веб-страницы с фреймами, которые не имеют собственного содержимого и предназначены для загрузки в одно окно браузера сразу нескольких веб-страниц. Также внутри разметки может быть добавлен код программ на языке JavaScript.
[править] Заголовок <HEAD> и мета-теги
Внутри тегов <HEAD></HEAD> помещаются:
- Мета-теги, определяющие кодировку документа, содержащие короткое описание и ключевые слова для поисковиков, устанавливающие время перезагрузки страницы и т. д.
- Теги
<STYLE></STYLE>, содержащие стили CSS. - Теги
<LINK>, связывающие со страницей фавикон, внешние файлы стилей.
[править] Содержимое веб-страницы
В качестве содержимого веб-страницы выступает обычный текст. Для его разметки используется набор тегов, применяемых внутри «тела» документа <BODY>, которые задают стилевое оформление, физическое и логическое, выделяют заголовки, абзацы, цитаты, списки, добавляют на страницу гиперссылки, таблицы и изображения и т. д.
Для разметки текста используются inline-теги, которые встраиваются в текстовую строку и меняют внешний вид шрифта, его цвет, размер и положение относительно основного текста, а также ряд блочных тегов, добавляющих отступы и границы между фрагментами текста.
[править] Разметка текста
[править] Физическая разметка текста и стилевые теги
Тэги физических стилей непосредственно меняют вид шрифта на заданный, обеспечивая одинаковое стандартное отображение текста во всех браузерах.
| Тэг | Описание |
|---|---|
<B></B>
|
Жирный текст (англ. Boldface). |
<I></I>
|
Курсив (англ. Italics). |
<BIG></BIG>
|
Крупный шрифт, размер которого на единицу больший от окружающего текста. |
<SMALL></SMALL>
|
Мелкий шрифт, размер которого на единицу меньший от окружающего текста. |
<SUP></SUP>
|
Надстрочный текст для обозначения верхнего индекса (англ. Superscripts). |
<SUB></SUB>
|
Подстрочный текст для обозначения нижнего индекса (англ. Subscripts). |
<U></U>
|
Подчёркнутый текст (англ. Underline). |
<STRIKE></STRIKE>
|
Перечёркнутый текст. |
<S></S>
|
Перечёркнутый текст, сокращённый аналог тега <STRIKE>. Был введён в браузере Netscape Navigator 3.0 бета.
|
<TT></TT>
|
Шрифт фиксированной ширины (англ. Typewriter Text). Имитирует шрифт печатной машинки. |
<FONT></FONT>
|
Тег, задающий тип шрифта, цвет и размер текста. |
<BASEFONT>
|
Одиночный тег, задающий базовый размер шрифта на всей странице. Размещается в любом месте в теле html-документа. Возможные значения — от 1 до 7. По умолчанию базовый шрифт устанавливается размером 3. |
[править] Логическая разметка текста
Теги логических стилей служат для выделения логически схожих по содержанию фрагментов текста и оформления их в единообразном стиле с использованием таблиц стилей CSS. При этом стандартный вид выделенного каждым логическим тегом текста может отличаться в разных браузерах и на разных устройствах, и носит рекомендательный характер.
| Тэг | Описание |
|---|---|
<EM></EM>
|
Выделение фразы. От англ. emphasis — акцент. Обозначается обычно курсивом. |
<STRONG></STRONG>
|
Сильное выделение фразы. От англ. strong emphasis — сильный акцент. Обозначается обычно жирным шрифтом. |
<DFN></DFN>
|
Определение (англ. Definition). Используется для выделения нового термина в тексте. Выводится обычно курсивом. |
<KBD></KBD>
|
От англ. keyboard — клавиатура. Этот тег служит для выделения встречающихся в тексте комбинаций клавиш, водимых с клавиатуры. По умолчанию обычно выводится моноширинным шрифтом. |
<CODE></CODE>
|
Тег для форматирования листинга кода программ. Требует тег <BR> для переноса на новую строку. По умолчанию обычно выводится моноширинным шрифтом.
|
<VAR></VAR>
|
От англ. variable — переменная. Тег для выделения имён переменных в примерах компьютерных команд. Выводится обычно курсивом. |
<SAMP></SAMP>
|
От англ. sample — образец. Тег для создания примеров вывода программ на компьютерный дисплей. По умолчанию обычно выводится моноширинным шрифтом. |
<ADDRESS></ADDRESS>
|
Тег для выделение адреса автора статьи или сайта, номера телефона. Стандартно выделяется курсивом. |
[править] Разделители, пробелы и переносы строк
| Тэг | Описание |
|---|---|
<BR>
|
Одиночный HTML-тег, добавляющий перенос строки. |
<WBR>
|
Одиночный HTML-тег, указывающий места возможного переноса для строк, которые не влазят в размер блока или ячейки таблицы. Работает внутри тега <NOBR>.
|
<NOBR></NOBR>
|
Парный тег, запрещающий переносы строки для помещённого в него текста. |
<HR>
|
Англ. Horizontal Rule. Одиночный HTML-тег, добавляющий горизонтальную линию-разделитель. |
<P></P>
|
Блочный парный HTML-тег для создания абзацев. Имеет атрибут ALIGN, выравнивающий текст абзаца по левому, правому краю или по центру (left, right, center). По умолчанию выравнивание происходит по левому краю. В ранних версиях HTML данный тег применялся как непарный и служил в качестве разделителя абзацев. |
<PRE></PRE>
|
От анг. preformatted — предварительно форматированный. Этот тег сохраняет внутри себя все пробелы, табуляции и переносы строки в исходном виде. |
<CENTER></CENTER>
|
Центрирование элементов документа. Тег появился как расширение браузера Netscape Navigator для HTML 2.0. |
[править] Гиперссылки и якоря
Гиперссылки и якоря создаются с помощью тега <A>. Они служат для навигации внутри html-документов и между веб-страницами сайтов.
[править] Заголовки
| Тэг | Описание |
|---|---|
|
|
Заголовки (англ. heading) — это блочные элементы, которые в тексте статей отображаются крупными буквами с новой строки. У тегов существует атрибут ALIGN, выравнивающий текст по левому, правом краю или по центру (допустимые значения: left, right, center). Всего существует 6 уровней заголовков, первый отображается самым крупным шрифтом, а шестой самым мелким. В стандарте HTML рекомендуется не пропускать промежуточные уровни заголовков. |
[править] Списки
[править] Цитаты
| Тэг | Описание |
|---|---|
<BLOCKQUOTE></BLOCKQUOTE>
|
Цитата. Отображается с новой строки в виде отдельного блока, с отступом слева на 8 пробелов. |
<CITE></CITE>
|
Цитата в тексте. Относится к логической разметке текста. Используется для выделения источников: заголовков статей, названий книг. Отображается обычно курсивом. Может применяться в составе <BLOCKQUOTE>.
|
[править] Изображения
Изображения вставляются в текст веб-страницы с помощью тега <IMG>.
[править] Таблицы
[править] Формы
[править] Теги-«обёртки» для применения стилей CSS
В HTML есть два парных тега, служащих для применения стилей CSS к текстовым и блочным элементам:
| Тэг | Описание |
|---|---|
<SPAN></SPAN>
|
Тег-обёртка для текста, inline-элемент. Сам по себе ничего не делает, но позволяет применять к заключённым в него текстам стили CSS. |
<DIV></DIV>
|
Блочный тег, начинающийся всегда с новой строки. Создаёт на странице блоки прямоугольной формы, свойства которых определяются с помощью стилей CSS. |
[править] Стандартизация
С развитием HTML, в зависимости от версий языка, в разметку могут добавляться новые теги, другие теги устаревают и начинают считаться осуждаемыми. Такие теги не рекомендуются к применению, хотя и продолжают поддерживаться браузерами для совместимости. Некоторые теги полностью устаревают и перестают поддерживаться всеми разработчиками. Создатели популярных браузеров в свою очередь добавляют в качестве нововведений собственные нестандартные теги, не входящие в спецификацию HTML. Наиболее популярные из них приживаются и получают распространение, позже входя в стандарты новых версий HTML. Другие не получают распространения и выходят из употребления.
Основным активным периодом внедрения новых тегов был период начальной разработки и стандартизации языка HTML в 1990-х годах, который сопровождался битвой браузеров Netscape Navigator и Microsoft Internet Explorer.
[править] Источники
- Kevin Werbach Краткое руководство по HTML (перевод на русский Станислава Малышева) // c_rabbit.chat.ru. — 1996 год.
- П. Храмцов Язык гипертекстовой разметки HTML и протокол обмена гипертекстовой информацией HTTP // Материалы конференции «Internet — Россия '96». — РНЦ «Курчатовский Институт» — CITFORUM, 1996.
- HTML. — Softservice Group — Городской Кот, 1996.
- Николай Чувахин Практическое руководство по HTML. — Городской Кот, 1997.
- Д. Рассохин, А. Лебедев World Wide Web - всемирная информационная паутина в сети Internet // Второе издание. — Химический факультет МГУ, 14 Июль, 1997.
[править] Примечания
| Тэги HTML относится к теме «HTML» |