Содержание

Справочник HTML | HTML теги

Все Блочные Строчные Новые HTML5 Нестандартные Не поддерживаемые в HTML5

Тег Описание
!, A
<!—…—> Добавляет комментарий в код документа
<!DOCTYPE>  Предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа)
<a> Предназначен для создания ссылок
<abbr> Указывает, что текст является аббревиатурой
<acronym> Указывает, что текст является акронимом
<address> Предназначен для хранения контактной информации автора
<applet> Используется для вставки на страницу апплетов — небольших программ на языке Java
<area> Определяет активные области изображения, которые являются ссылками
<article> Задаёт содержание сайта вроде новости, статьи, записи блога, форума и др.
<aside> Представляет собой раздел, который имеет косвенное отношение к содержимому страницы
<audio> Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице
B
<b> Устанавливает жирное начертание шрифта
<base> Определяет адрес или способ открытия всех ссылок странице по умолчанию
<basefont> Задаёт шрифт, размер и цвет текста по умолчанию
<bdi> Указывает фрагмент текста, который должен быть изолирован от изменения направления вывода текста
<bdo> Устанавливает направление вывода текста: слева направо или справа налево
<bgsound> Определяет музыкальный файл, который будет проигрываться на веб-странице
<big> Увеличивает размер шрифта на единицу по сравнению с обычным текстом
<blockquote> Предназначен для выделения длинных цитат внутри документа
<body> Предназначен для хранения содержимого веб-страницы, отображаемого в окне браузера
<blink> Устанавливает мигание текста
<br> Устанавливает перевод строки в том месте, где он находится
<button> Создаёт на веб-странице кнопку
C
<canvas> Создаёт область, в которой при помощи JavaScript можно рисовать и выводить изображения
<caption> Создаёт заголовок к таблице
<center>
<cite> Представляет название произведения (книги, статьи, поэмы, песни и др.)
<code> Предназначен для отображения текста программного код
<col>
Задаёт ширину и другие характеристики одной или нескольких колонок таблицы
<colgroup> Группирует колонки таблицы для изменения их параметров
<command> Создаёт команду в виде переключателя, флажка или обычной кнопки
<comment> Добавляет комментарий в код документа
D
<data> Представляет содержимое в машиночитаемом виде, предназначенное для автоматизированных систем
<datalist> Создаёт список вариантов, которые можно выбирать при наборе в текстовом поле
<dd> Указывает термин в списке описаний
<del> Используется для выделения текста, который был удалён в новой версии документа
<details> спользуется для хранения информации, которую можно скрыть или показать по требованию пользователя
<dfn> Выделяет термин в документе
<dialog> Показывает диалоговое окно, в котором можно выводить сообщение или форму, например, для входа на сайт
<dir> Создаёт список, содержащий названия директорий
<div> Универсальный блочный элемент
<dl> Создаёт список описаний
<dt> Определяет термин в списке описаний
E, F
<em> Предназначен для акцентирования текста
<embed> Используется для загрузки и отображения объектов
<fieldset> Группирует элементы формы
<figcaption> Содержит описание для элемента <figure>
<figure> Используется для группирования любых элементов, например, изображений и подписей к ним
<font> Изменяет характеристики шрифта, такие как размер, цвет и гарнитура
<footer> Определяет «подвал» сайта или раздела
<form> Устанавливает форму на веб-странице
<frame> Определяет свойства отдельного фрейма, на которые делится окно браузера
<frameset> Задаёт структуру фреймов на веб-странице
H
<h2> Заголовок первого уровня
<h3> Заголовок второго уровня
<h4> Заголовок третьего уровня
<h5> Заголовок четветого уровня
<h5> Заголовок пятого уровня
<h6> Заголовок шестого уровня
<head> Предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными
<header> Определяет «шапку» сайта или раздела
<hgroup> Используется для группирования заголовков веб-страницы или раздела
<hr> Рисует горизонтальную линию
<html> Является контейнером, который заключает в себе всё содержимое веб-страницы
I
<i> Устанавливает курсивное начертание шрифта
<iframe>
Создаёт встроенный фрейм на странице
<img> Отображает на веб-странице изображение
<input> Позволяет создавать разные элементы интерфейса
<ins> Предназначен для выделения текста, который был добавлен в новую версию документа
K, L
<kbd> Используется для обозначения текста, который набирается на клавиатуре или для названия клавиш
<keygen> Используется для генерации пары ключей — закрытого и открытого (для форм)
<label> Устанавливает связь между определённой меткой и элементом формы
<legend> Создаёт заголовок группы элементов формы
<li> Определяет отдельный пункт списка
<link> Устанавливает связь с внешним документом вроде файла со стилями
M
<main> Элемент main предназначен для основного содержимого документа
<map> Служит контейнером для элементов <area>, которые определяют активные области для карт-изображений
<marquee> Создаёт бегущую строку на странице
<mark> Помечает текст как выделенный
<menu> Отображает список меню
<menuitem> Задаёт команду, которую пользователь может вызывать через контекстное меню
<meta> Определяет данные, которые используются для хранения информации, предназначенной для браузеров и поисковых систем
<meter> Используется для вывода значения в некотором известном диапазоне
N
<nav> Группирует ссылки навигации по сайту
<nobr> Уведомляет браузер отображать текст без переносов
<noembed> Предназначен для отображения информации на веб-странице, если браузер не поддерживает работу с плагинами
<noindex> Запрещает поисковой системе Яндекс индексировать текст
<noframes> Содержимое элемента отображается в браузере, когда он не поддерживает фреймы и не умеет их интерпретировать
<noscript> Показывает своё содержимое, если браузер не поддерживает работу со скриптами
O
<object> Сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает
<ol> Устанавливает нумерованный (упорядоченный) список
<optgroup> Объединяет элементы <option> в одну группу
<option> Определяет отдельные пункты списка, создаваемого с помощью <select>
<output> Определяет область для вывода, преимущественно с помощью скриптов
P
<p> Определяет текстовый абзац
<param> Передаёт значения параметров Java-апплетам или объектам веб-страницы
<picture> Представляет собой контейнер для хранения нескольких элементов <source>, которые поддерживают элемент <img>
<plaintext> Отображает содержимое контейнера «как есть» со всеми тегами
<pre> Определяет блок предварительно форматированного текста
<progress> Используется для отображения прогресса завершённости задачи
Q, R
<q> Используется для выделения в тексте цитат
<rp> Используется для вывода текста в браузерах, которые не поддерживают элемент <ruby>
<rt> Добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>
<rtc> В основном применяется в качестве описательной части или аннотации для иероглифов
<ruby> Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста
S
<s> Используется для содержимого, которое уже не является точным или актуальным
<samp> Используется для отображения текста, который является результатом вывода компьютерной программы
<script> Предназначен для описания скриптов
<section> Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др.
<select> Создаёт раскрывающийся список
<small> Используется для сносок и комментариев, написанных обычно мелким текстом
<source> Вставляет медийный файл для элементов <audio>, <video> и <picture>
<spacer> Создаёт пустое пространство по вертикали или горизонтали
<span> Универсальный строчный элемент
<strike> Отображает текст как перечёркнутый
<strong> Выделяет важный текст
<style> Определяет стили элементов веб-страницы
<sub> Отображает шрифт в виде нижнего индекса
<summary> Указывает заголовок для <details>, по которому можно щёлкать для разворачивания/сворачивания информации
<sup> Отображает шрифт в виде верхнего индекса
T
<table> Создаёт таблицу
<tbody> Предназначен для хранения одной или нескольких строк таблицы
<td> Предназначен для создания одной ячейки таблицы
<template> Задаёт шаблон для фрагмента HTML, который может быть клонирован и вставлен в документ через скрипты
<textarea> Создаёт поле для многострочного текста
<tfoot> Предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы
<th> Создаёт одну ячейку таблицы, которая обозначается как заголовочная
<thead> Предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы
<time> Помечает текст внутри элемента как дату, время или оба значения
<title> Определяет заголовок документа
<tr> Служит контейнером для создания строки таблицы
<track> Позволяет авторам указать текстовую дорожку для медийных элементов (<video> и <audio>)
<tt> Отображает текст моноширинным шрифтом
U, V, W, X
<u> Используется для разметки текста, который должен отличаться стилистически от обычного текста
<ul> Устанавливает маркированный (неупорядоченный) список
<var> Используется для выделения переменных из компьютерных программ
<video> Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице
<wbr> Указывает браузеру место, где допускается делать перенос строки в тексте
<xmp> Отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины

Теги по категориям | справочник HTML

ТегОписание
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.04.011.15.09.012.0
<meter>Предназначен для отображения скалярной величины в заданном диапазоне, или же для графического представления дробного числа. Для использования данного тега должно быть известно максимальное значение.8.06.011.06.0Нет13.0
<pre>Определяет предварительно отформатированный текст, т.е. текст, который был помещён внутрь тега отобразится со шрифтом фиксированной ширины, и сохранит как пробелы, так и разрывы строкДаДаДаДаДаДа
<progress>Предоставляет обратную связь, сообщая о состоянии текущего процесса, отображает какая часть задачи выполнена.8.016.011.06.010.012.0
<q>Используется для выделения коротких цитат (строчная цитата).ДаДаДаДаДаДа
<rp>Определяет, что отображать браузеру, который не поддерживает тег <ruby>5.038.015.05.05.512.0
<rt>Помещает полезный текст фуриганы в составе элемента <ruby>5.038.015.05.05.512.0
<ruby>Используются для добавления фуриган (фонетические подсказки в японском языке, их также называют — руби или ёмигана).5.038.015.05.05.512.0
<s>Определяет текст, который больше не является правильным или актуальным.ДаДаДаДаДаДа
<samp>Результат вывода компьютерной программы или скрипта.ДаДаДаДаДаДа
<small>Шрифт, который отображается меньшим размером(мелкий/юридический шрифт).ДаДаДаДаДаДа
<strike>Не поддерживается в HTML5.
Отображает перечеркнутый текст. Используйте вместо данного элемента тег <del> или тег <s>		ДаДаДаДаДаДа
<strong>Текст, которому придают особое значение (важный текст).ДаДаДаДаДаДа
<sub>Текст с нижним индексом.ДаДаДаДаДаДа
<sup>Текст с верхним индексом.ДаДаДаДаДаДа
<time>Тег временной разметки (семантическая разметка).6.04.011.15.09.012.0
<tt>Не поддерживается в HTML5.
Отображает шрифт моноширинным текстом. Используйте CSS вместо данного элемента.		ДаДаДаДаДаДа
<u>Содержит в себе текст, который должен стилистически отличаться от обычного текста, например слова с орфографическими ошибками или текст на другом языке.ДаДаДаДаДаДа
<var>Математические/переменные величины.ДаДаДаДаДа12.0
<wbr>Предоставляет возможность указать браузеру, что при необходимости в этом месте можно сделать перенос строки (например, слишком длинное слово или URL).1.03.011.74.0НетДа

HTML справочник | Теги HTML

HTML справочник — это список HTML тегов определенных в спецификации HTML 5. Список тегов редактируется по мере изменения спецификации (обновляется информация и о самих тегах и об их атрибутах).

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

Вставляемый контент

Интерактивные элементы

Комментарии

Корневой элемент

Метаданные документа

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

Разделы документа

Списки

Ссылки

Сценарии

Таблицы

Текст

Формы

Теги html

Если вы только собираетесь начать изучать HTML, то одна из первых вещей, которые следует запомнить – специальные термины. Два из них будут встречаться наиболее часто – это «тег» и «элемент».

Термины «HTML элемент» и «HTML тег» обычно используются как синонимы. Но в соответствии со спецификацией W3C элемент – это тег со всем его содержимым, включая открывающий и закрывающий теги. У некоторых элементов нет закрывающего тега, такие элементы называются одиночными или пустыми, но несмотря на то, что они не могут содержать в себе никакого контента, они все равно считаются полноценными элементами.

На страницах сайта понятия тега и элемента используются для обозначения одного и того же – структурной единицы языка HTML, которая применяется для разметки документа.

Если вы желаете узнать больше о создании веб страниц, тегах и их применении, то можете заглянуть в наш Самоучитель по HTML.

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

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

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

Как уже отмечалось выше, все теги начинаются с угловой скобки < и заканчиваются угловой скобкой > . После открывающей угловой скобки следует имя тега (команды).

Например, тег <em> предназначен для акцентирования текста, браузеры отображают такой текст курсивным начертанием. Когда браузер обнаруживает этот тег, он переключается на форматирование курсивным шрифтом текста, следующего за тегом.

Рассмотрим пример:

Этот текст обычный. <em> Этот текст курсивный.

Тег <em> называют начальным или открывающим тегом, что означает включение браузером определенной команды (в данном случае написание курсивным шрифтом). У большинства тегов есть пара в виде закрывающего тега, который отключает команду.

Закрывающий тег выглядит так же, как начальный, но начинается с слэша. Итак, конечный тег для выделения курсивным шрифтом — </em>.

Рассмотрим пример:

Этот текст обычный. <em> Внимание! Курсив.  </em> Это снова обычный шрифт.

Как вы успели заметить, браузер последовательно анализирует HTML – документ в поисках команд (тегов) и применяет или отключает разные параметры форматирования текста. Браузер отформатированный текст (все, что не является тегом) отображает в своем окне.

Процесс вставки тегов в обычный неформатированный текст называется разметкой HTML-документа, а теги — знаками разметки. При написании тегов не учитывается регистр букв, тег может быть прописан как строчными, так и прописными буквами, но всё же рекомендуется применение прописных букв.

Ниже приведены примеры основных тегов HTML, с объяснением их использования, а также примеры их применения в HTML-документе.

Заголовки

Существует специальный тег для указания заголовков в HTML. Есть 6 уровней заголовков в HTML, начиная от <h2> для наиболее важных объявлений, до <h6> для наименее важных.

Вот они:

Пример HTML:

Попробуй сам
<h2>Заголовок 1</h2>
<h3>Заголовок 2</h3>
<h4>Заголовок 3</h4>
<h5>Заголовок 4</h5>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>

HTML абзацы

С помощью HTML тэга <p> Вы можете определить абзац.

Абзацы используются для логической группировки текста. Перед и после текста абзаца браузер автоматически отступает одну строчку.

Пример HTML:

Попробуй сам
<p>Это абзац</p>
<p>Это другой абзац</p>
<p>Это третий абзац</p>

HTML ссылки

С помощью HTML тэга <a> создаются ссылки.

Ссылки используются для связывания HTML документов друг с другом. Нажав на ссылку пользователь будет перемещен на другой HTML документ, url которого указан в атрибуте href.

Атрибут href задает адрес документа, на который следует перейти.

Атрибуты используются для предоставления дополнительной информации о HTML-элементах.

Вставка изображений

С помощью HTML тэга <img> Вы можете вставить в HTML документ произвольное изображение.

Ширина и высота картинки может задаваться с помощью атрибутов width и height.

Пример HTML:

Попробуй сам

<img src="images/orange.jpg" alt="Апельсин">
Обратите внимание: HTML-атрибуты будут подробно рассмотрены далее в данном учебнике.


Структура HTML-кода | htmlbook.ru

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

Пример 4.1. Исходный код веб-страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Пример веб-страницы</title>
 </head>
 <body>
  <h2>Заголовок</h2>
  <!-- Комментарий -->
  <p>Первый абзац.</p>
  <p>Второй абзац.</p>
 </body>
</html>

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.

Рис. 4.1. Результат выполнения примера

Далее разберем отдельные строки нашего кода.

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

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.

Табл. 4.1. Допустимые DTD
DOCTYPEОписание
HTML 4.01
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>В HTML-документе применяются фреймы.
HTML 5
<!DOCTYPE html>В этой версии HTML только один доктайп.
XHTML 1.0
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»>Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.

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

Например, в строгом HTML и XHTML непременно требуется наличие тега <title>, а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе.

В дальнейшем будем применять преимущественно строгий <!DOCTYPE>, кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода.

Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа.

 <html>

Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).

 <head>

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

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

 <title>Пример веб-страницы</title>

Тег <title> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).

Рис. 4.2. Вид заголовка в браузере

Тег <title> является обязательным и должен непременно присутствовать в коде документа.

</head>

Обязательно следует добавлять закрывающий тег </head>, чтобы показать, что блок заголовка документа завершен.

<body>

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

<h2>Заголовок</h2>

HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h2> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h2>…<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

 <!-- Комментарий -->

Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.

Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом <!— и заканчиваются тегом —>. Все, что находится между этими тегами, отображаться на веб-странице не будет.

 <p>Первый абзац.</p>

Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

 <p>Второй абзац.</p>

Тег <p> является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 4.1.

</body>

Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.

</html>

Последним элементом в коде всегда идет закрывающий тег </html>.

Учебник HTML — Теги HTML

 

HTML-документ (страничка) — документ, написанный на языке HTML. Заключается между тегами <HTML> и </HTML>.

Значения тегов разметки документа

Теги разметки — специальные команды для расположения на экране текста, графики, видео и аудио фрагментов, а также команды, служащие для связи с другими HTML-документами и ресурсами Интернет.

Основные теги разметки

<HEAD> и </HEAD>. Между этими тегами располагается информация о документе.

<TITLE> и </TITLE>. В этих тегах заключается название странички, которое будет выведено в рамке окна программы просмотра.

<BODY> и </BODY>. «Тело» документа (текст, графика и т.д.) располагается между этими двумя тегами.

Параметры тега <BODY>:

BGCOLOR — цвет фона (<BODY BGCOLOR=»#000000″>)

BACKGROUND — бэкграунд

TEXT — цвет текста

LINK — цвет ссылки

VLINK — цвет ссылки, уже посещенной в прошлом

ALINK — цвет активной ссылки

<P> и </P> — теги, служащие для выделения абзацев. Новый абзац всегда отделяется от предыдущего пустой строкой.

<BR> — тег, служащий для переноса текста на другую строку. Может также служить для отделения графики от текста на интервал.

<HR> —  тег, служащий для логического разделения текста горизонтальной линией.

<PRE> и </PRE> —  Между этими тегами располагается предварительно отформатированный текст. На экран он выводится шрифтом типа «курьер».

Параметры выравнивания

Используются в <P> и <H>

ALIGN=LEFT — выравнивание по левому полю

ALIGN=RIGHT — выравнивание по правому полю

ALIGN=CENTER — выравнивание по центру

Теги выравнивания

<LEFT> и </LEFT> — выравнивание по левому полю

<RIGHT> и </RIGHT> — выравнивание по правому полю

<CENTER> и </CENTER> — выравнивание по центру

Заголовки, служащие для выделения логических частей текста

<h2> и </h2> — Заголовок первого уровня.

<h3> и </h3> — Заголовок второго уровня.

<h4> и </h4> — Заголовок третьего уровня.

<h5> и </h5> — Заголовок четвертого уровня.

<H5> и </H5> — Заголовок пятого уровня.

<H6> и </H6> — Заголовок шестого уровня.

Теги для выделения текста и шрифта

<B> и </B> — теги для выделения текста (слов, букв) жирным шрифтом.

<I> и </I> — теги для выделения текста (слов, букв) курсивным шрифтом, типа Italic.

<U> и </U> — текст, расположенный между двумя этими тегами, будет подчеркнут.

<BLINK> и </BLINK> — текст, расположенный между двумя этими тегами, будет мигать.

<FONT SIZE=n>и</FONT> — теги для изменения размера шрифта (где n — размер шрифта в пикселях px).

<FONT COLOR=»#FFFFFF»> и </FONT> — теги для изменения цвета шрифта.

Теги для формирования списков

<OL> и </OL> — теги, показывающие начало и конец нумерованного списка

<UL> и </UL> — теги, показывающие начало и конец маркированного списка.

<LI> — Элемент списка

 

<DL> и </DL> — теги, показывающие начало и конец глоссария.

<DT> — Термин глоссария, располагается без отступа от левого поля страницы.

<DD> — Описание термина, располагается с отступом от левого поля страницы.

Теги-команды для вставки в текст объектов не текстовой информации

<IMG SRC=»file.gif»> или <IMG SRC=»file.jpg»> — команда для вставки графического изображения

<IMG SRC=»file.wav»> — команда для вставки звукового фрагмента

<IMG SRC=»file.avi»> — команда для вставки видео фрагмента

Параметры графического изображения

WIDHT — ширина картинки в пикселях

HEIGHT- высота картинки в пикселях

ALIGN — выравнивание (ALIGN=LEFT — выравнивание по левому полю, ALIGN=RIGHT — по правому полю, ALIGN=TOP — по верхней границе, ALIGN=BOTTOM — по нижней границе, ALIGN=MIDDLE или CENTER — по центру)

HSPACE — горизонтальный отступ от графического изображения

VSPACE — вертикальный отступ

ALT — альтернативный текст, служит для обозначения изображения

Команды, служащие для гиперсвязи с другими HTML-документами и ресурсами Интернет

<A HREF=»fail.htm»>и</A>или<A HREF=»http://www.ru»>и</A> — гиперсвязи

<ADDRESS><A HREF=»mailto:[email protected]»>[email protected]</ADDRESS> — гиперсвязь с адресом электронной почты

Таблицы

Таблица — сетка для показа данных в строках и столбцах, а также средство для форматирования текста

<TABLE> и </TABLE> — теги для вставки таблицы в HTML документ

Параметры тега <TABLE>

BGCOLOR — цвет фона

BORDER — ширина бордюра

WIDHT — ширина таблицы

Теги разметки таблицы

<CAPTION> и </CAPTION> — название таблицы, имеет параметр ALIGN=TOP — выравнивание над таблицей и ALIGN=BOTTOM — под  таблицей.

<TR> и </TR> — Строчка таблицы. Может иметь параметры BGCOLOR — цвет фона внутри строки;

ALIGN=LEFT, RIGHT, CENTER — выравнивание внутри строки;

VALIGN=TOP, BOTTOM, MIDDLE — вертикальное выравнивание внутри строки таблицы.

<TD> и </TD>—  Столбец таблицы. Может иметь параметры BGCOLOR — цвет фона под столбцом;

ALIGN=LEFT, RIGHT, CENTER — выравнивание внутри столбца;

VALIGN=TOP, BOTTOM, MIDDLE — вертикальное выравнивание;

COLSPAN растягивание клетки на несколько столбцов, ROWSPAN — растягивание клетки на несколько строк.

<TH> и </TH> — Заголовок столбца. Может иметь параметры BGCOLOR — цвет фона под названием;

ALIGN=LEFT, RIGHT, CENTER — выравнивание;

VALIGN=TOP, BOTTOM, MIDDLE — вертикальное выравнивание;

COLSPAN, ROWSPAN — растягивание клетки на несколько столбцов или строк; WIDHT — ширина названия.

Рамки-фреймы

Рамки-фреймы — средство для разделения экрана на несколько областей, в каждой из которых отображается содержимое отдельной Web-страницы или Web-сайта.

<FRAMESET> и </FRAMESET> теги для создания рамки

Параметры тега <FRAMESET>

COLS — подразделяют экран на определенное количество колонок (вертикальных)

ROWS — подразделяют экран на определенное количество колонок (горизонтальных)

BORDCOLOR — цвет рамки

BORDER — ширина бордюра

FRAMEBORDER — граница рамки (FRAMEBORDER=YES — есть граница, FRAMEBORDER=NO — нет границы, FRAMESPACING=n — ширина границы)

<FRAME> Тег для описания рамки (<FRAME SRC=»file.htm»>).

Параметры тега <FRAME>

SCROLING — параметр для регулировки полосы прокрутки:

SCROLING=YES — полоса прокрутки будет всегда

SCROLING=NO — полосы прокрутки не будет

SCROLING=AUTO — полоса прокрутки появляется только в случае необходимости

MARGINWIDHT и MARGINHEIGHT — параметры, которые управляют отступом внутри рамок, служат для выравнивания графического изображения внутри рамки

NORESIZE — параметр, указывающий на то, что размер рамки-фрейма никогда не будет меняться.

A link to <A HREF=»file.htm» TARGET=»frame2″> file.htm</A> — Связь между фреймами

TARGET — атрибут связи между фреймами. Имеет несколько значений:

_BLANK загружает содержимое страницы, заданной ссылкой, в новое пустое окно.

_SELF содержимое страницы, заданной ссылкой, в окно, которое содержит ссылку.

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

_TOP содержимое страницы, заданной ссылкой, в окно, игнорируя используемые фреймы.

Обработка браузеров, не поддерживающих фреймы:

<FRAMESET>

…Здесь располагаются фреймы

</FRAMESET>

<NOFRAMES>

<BODY>

…Здесь располагается текст без фреймов

<BODY>

</NOFRAMES>

Бегущая строка

<MARQUEE>ТЕКСТ</MARQUEE> — тег, создающий бегущую строку

<MARQUEE DIRECTION=»left»>TEKCT</MARQUEE> — Если бегущую строку нужно направить справа налево

<MARQUEE DIRECTION=»right»>TEKCT</MARQUEE> — движение слева направо.

scroll — стандартное движение от правого края к левому

slide — надпись один раз пробегает от правого края к левому, где и остается.

alternate — движение от правого края страницы к левому и обратно. Бесконечный цикл.

<MARQUEE LOOP=n BEHAVIOR=scroll>TEKCT</MARQUEE> — Ограничение числа циклов. Значение n оператора LOOP указывает число повторений цикла.

<MARQUEE WIDHT=n>TEKCT</MARQUEE> — указать ширину участка, занимаемого бегущей строкой, где n — ширина той части страницы, на которой расположена бегущая строка. Значение n указывается как в пикселях, так и в процентах от общей ширины видимой части страницы.

<MARQUEE scrollamount=n>TEKCT</MARQUEE> — Регулировка движения надписи по экрану. Здесь n — число пикселей.

<MARQUEE scrolldelay=t>TEKCT</MARQUEE> — В данном случае переменная величина — время t — измеряется в миллисекундах. Метод задания скорости состоит в указании времени, спустя которое текст будет перерисован на экране заново.

<FONT SIZE=n><MARQUEE> ТЕКСТ</MARQUEE></FONT> — возможность указывать величину шрифта текста в строке.

<MARQUEE BGCOLOR=n> ТЕКСТ </MARQUEE> — окрасить поверхность бегущей строки в какой-либо цвет, где n можно указать в виде шестнадцатеричного числа либо написав его название

<MARQUEE HEIGHT=n>ТЕКСТ</MARQUEE> — указывает высоту бегущей строки

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
1.0+1.0+2.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью атрибута clear тега <br> можно сделать так, чтобы следующая строка начиналась ниже элемента.

Синтаксис

HTML
Текст<br> текст
XHTML
Текст<br /> текст

Атрибуты

clear
Сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег BR</title>
 </head>
 <body>

  <p>Р.Л. Стивенсон</p>
  <p>Лето в стране настало,<br>
   Вереск опять цветет.<br>
   Но некому готовить<br>
   Вересковый мед.</p>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид текста при использовании тега <br>

HTML тег HTML


Пример

Простой документ HTML:




Название документа

Это заголовок


Это абзац.


Попробуй сам »

Определение и использование

Тег представляет корень HTML-документа.

Тег является контейнером для всех других элементов HTML (кроме Тег ).

Примечание: Вы всегда должны включать lang внутри тег, чтобы объявить язык веб-страницы. Это предназначено для облегчения поиска движки и браузеры.

Поддержка браузера

Элемент
Есть Есть Есть Есть Есть

Атрибуты

Атрибут Значение Описание
xmlns http: // www.w3.org/1999/xhtml Задает атрибут пространства имен XML (если вам нужно, чтобы ваш контент соответствовал XHTML)

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Связанные страницы

Учебное пособие по HTML: Введение в HTML

Ссылка на HTML DOM: объект HTML

Настройки CSS по умолчанию

Большинство браузеров отображают элемент со следующими значениями по умолчанию:

html {
display: block;
}

html: focus {
outline: none;
}

,

HTML-объектов

Зарезервированные символы в HTML должны быть заменены символьными объектами.

HTML-объекты

Некоторые символы зарезервированы в HTML.

Если вы используете в тексте знаки «меньше» (<) или «больше» (>), браузер может смешивать их с тегами.

Символьные сущности используются для отображения зарезервированных символов в HTML.

Символьный объект выглядит так:

& имя_объекта ;

ИЛИ

entity_number ;

Чтобы отобразить знак «меньше» (<), мы должны написать: & lt; или & # 60;

Преимущество использования имени объекта: Имя объекта легко запомнить.
Недостаток использования имени объекта: Браузеры могут поддерживать не все имена объектов, но поддержка номера объектов это хорошо.

Неразрывное пространство

Обычно в HTML используется неразрывный пробел: & nbsp;

Неразрывный пробел — это пробел, который не разбивается на новую строку.

Два слова разделенные неразрывным пробелом, будут склеиваться (не разбиваться на новый линия). это удобен, когда разбиение слов может быть разрушительным.

Примеры:

Еще одно распространенное использование неразрывного пробела — запретить браузерам обрезать пробелы на HTML-страницах.

Если вы напишите в тексте 10 пробелов, браузер удалит 9 из них. Чтобы добавить в текст настоящие пробелы, вы можете использовать & nbsp; символов.

Совет: Неразрывный дефис (& # 8209;) используется для определения символа дефиса (-), который не превращается в новый линия.

Некоторые полезные объекты символов HTML

Результат Описание Имя объекта Регистрационный номер
неразрывное пространство & nbsp; & # 160;
< менее & lt; & # 60;
> больше & gt; & # 62;
и амперсанд & amp; & # 38;
« двойные кавычки & quot; & # 34;
‘ одинарная кавычка (апостроф) & apos; & # 39;
¢ цент & цент; & # 162;
£ фунтов & фунт; & # 163;
¥ йен иен; & # 165;
€ евро евро; & # 8364;
© авторское право & копия; & # 169;
® зарегистрированная торговая марка и рег; & # 174;

Примечание. Имена объектов чувствительны к регистру.

Объединение диакритических знаков

Диакритический знак — это «глиф», добавляемый к букве.

Некоторые диакритические знаки, такие как могила (̀) и ударение (́), называются ударениями.

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

Диакритические знаки могут использоваться в сочетании с буквенно-цифровыми символами для создания символа, которого нет в набор символов (кодировка), используемый на странице.

Вот несколько примеров:

Марка Персонаж Построить Результат
̀ а а & # 768; à
́ а а & # 769; á
̂ а а & # 770; â
̃ а а & # 771; ã
̀ O O & # 768; Ò
́ O O & # 769; Ó
̂ O O & # 770; Ô
̃ O O & # 771; Õ

Вы увидите больше символов HTML в следующей главе этого руководства.


,

Ссылка на элемент HTML — по категориям

Тег Описание
Определяет вид документа
Определяет документ HTML
Содержит метаданные / информацию для документа
<название> Определяет заголовок документа
Определяет тело документа

до

 Определяет заголовки HTML

 Определяет параграф

 Вставляет одинарный разрыв строки
 Определяет тематическое изменение содержания
Определяет комментарий
Тег Описание
<аббревиатура> Не поддерживается в HTML5. Вместо этого используйте .
Определяет акроним
Определяет аббревиатуру или акроним
<адрес> Определяет контактную информацию автора / владельца документа / статьи
Определяет полужирный текст
Изолирует часть текста, которая может быть отформатирована в другом направлении. из другого текста вне его
Заменяет текущее направление текста
<большой> Не поддерживается в HTML5.Вместо этого используйте CSS.
Определяет большой текст
 Определяет раздел, цитируемый из другого источника
<центр> Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет центрированный текст
Определяет название работы
<код> Определяет часть компьютерного кода
Определяет текст, который был удален из документа
Задает термин, который будет определен в содержимом
Определяет выделенный текст
Не поддерживается в HTML5.Вместо этого используйте CSS.
Определяет шрифт, цвет и размер текста
Определяет часть текста альтернативным голосом или настроением
Определяет текст, который был вставлен в документ
<КБД> Определяет ввод с клавиатуры
<отметка> Определяет выделенный / выделенный текст
<метр> Определяет скалярное измерение в известном диапазоне (шкале)
 Определяет предварительно отформатированный текст
 <прогресс> Представляет ход выполнения задачи
  Определяет короткое предложение
  Определяет, что показывать в браузерах, не поддерживающих рубиновые аннотации.
  Определяет объяснение / произношение символов (для восточноазиатских
типографика)
 <рубин> Определяет рубиновую аннотацию (для восточноазиатской типографики)
  Определяет текст, который больше не является правильным
  Определяет пример вывода компьютерной программы
 <маленький> Определяет меньший текст
 <удар> Не поддерживается в HTML5.Вместо этого используйте  или . 
 Определяет зачеркнутый текст
  Определяет важный текст
  Определяет нижний текст
  Определяет надстрочный текст
 <шаблон> Определяет контейнер для контента, который должен быть скрыт при загрузке страницы
 <время> Определяет конкретное время (или дату и время)
  Не поддерживается в HTML5.Вместо этого используйте CSS. 
 Определяет текст телетайпа
  Определяет текст, который не артикулирован и имеет стиль, отличный от обычного.
текст
  Определяет переменную
  Определяет возможный разрыв строки
 Тег Описание
 <форма> Определяет HTML-форму для ввода данных пользователем
 <вход> Определяет элемент управления вводом