Содержание

теги — полный список, таблица тегов по разделам

HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.

Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.

В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие теги исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом.

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

Таблица 1. HTML-элементы
Тег Описание
<!--...--> Используется для добавления комментариев.
<!DOCTYPE> Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.
<a> Создаёт гипертекстовые ссылки.
<abbr> Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута
title
.
<address> Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
<area> Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега <map>.
<article> Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
<aside> Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
<audio> Загружает звуковой контент на веб-страницу.
<b> Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
<base> Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
<bdi> Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
<bdo> Отображает текст в направлении, указанном в атрибуте dir, переопределяя текущее направление написания текста.
<blockquote> Выделяет текст как цитату, применяется для описания больших цитат.
<body> Представляет тело документа (содержимое, не относящееся к метаданным документа).
<br> Перенос текста на новую строку.
<button> Создает интерактивную кнопку. Внутрь тега можно поместить содержимое — текст или изображение.
<canvas> Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
<caption> Добавляет подпись к таблице. Вставляется сразу после тега <table>.
<cite> Используется для указания источника цитирования. Отображается курсивом.
<code>
Представляет фрагмент программного кода, отображается шрифтом семейства monospace.
<col> Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
<colgroup> Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
<data> Элемент используется для связывания значения атрибута value, которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым тега.
<datalist> Элемент-контейнер для выпадающего списка элемента <input>. Варианты значений помещаются в элементы <option>
.
<dd> Используется для описания термина из тега <dt>.
<del> Помечает текст как удаленный, перечёркивая его.
<details> Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег <summary>.
<dfn> Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
<dialog> Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута
open
не виден для пользователя.
<div> Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
<dl> Тег-контейнер, внутри которого находятся термин и его описание.
<dt> Используется для задания термина.
<em> Выделяет важные фрагменты текста, отображая их курсивом.
<embed> Тег-контейнер для встраивания внешнего интерактивного контента или плагина.
<fieldset> Группирует связанные элементы в форме, рисуя рамку вокруг них.
<figcaption> Заголовок/подпись для элемента <figure>.
<figure> Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
<footer> Определяет завершающую область (нижний колонтитул) документа или раздела.
<form> Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action.
<h2-h6> Создают заголовки шести уровней для связанных с ними разделов.
<head> Элемент-контейнер для метаданных HTML-документа, таких как <title>, <meta>, <script>, <link>, <style>.
<header> Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
<hr> Горизонтальная линия для тематического разделения параграфов.
<html> Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
<i> Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
<iframe> Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
<img> Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
<input> Создает многофункциональные поля формы, в которые пользователь может вводить данные.
<ins> Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
<kbd> Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
<meta> Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке <head> может быть несколько тегов <meta>, так как в зависимости от используемых атрибутов они несут разную информацию.
<meter> Индикатор измерения в заданном диапазоне.
<nav> Раздел документа, содержащий навигационные ссылки по сайту.
<noscript> Определяет секцию, не поддерживающую сценарий (скрипт).
<object> Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег <param>.
<ol> Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
<optgroup> Контейнер с заголовком для группы элементов
<option>
.
<option> Определяет вариант/опцию для выбора в раскрывающемся списке <select>, <optgroup> или <datalist>.
<output> Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
<p> Параграфы в тексте.
<param> Определяет параметры для плагинов, встраиваемых с помощью элемента <object>.
<picture> Элемент-контейнер, содержащий один элемент <img> и ноль или несколько элементов <source>. Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
<pre> Выводит текст без форматирования, с сохранением пробелов и переносов текста.
Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
<progress> Индикатор выполнения задачи любого рода.
<q> Определяет краткую цитату.
<ruby> Контейнер для Восточно-Азиатских символов и их расшифровки.
<rb> Определяет вложенный в него текст как базовый компонент аннотации.
<rt> Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby>, выводится уменьшенным шрифтом.
<rtc> Отмечает вложенный в него текст как дополнительную аннотацию.
<rp> Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
<s> Отображает текст, не являющийся актуальным, перечеркнутым.
<samp> Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
<script> Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src.
<section> Определяет логическую область (раздел) страницы, обычно с заголовком.
<select> Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в <option>.
<small> Отображает текст шрифтом меньшего размера.
<source> Указывает местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio>.
<span> Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
<strong> Расставляет акценты в тексте, выделяя полужирным.
<style> Подключает встраиваемые таблицы стилей.
<sub> Задает подстрочное написание символов, например, индекса элемента в химических формулах.
<summary> Создаёт видимый заголовок для тега <details>. Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
<sup> Задает надстрочное написание символов.
<table> Тег для создания таблицы.
<tbody> Определяет тело таблицы.
<td> Создает ячейку таблицы.
<template> Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
<textarea> Создает большие поля для ввода текста.
<tfoot> Определяет нижний колонтитул таблицы.
<th> Создает заголовок ячейки таблицы.
<thead> Определяет заголовок таблицы.
<time> Определяет дату/время.
<title> Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
<tr> Создает строку таблицы.
<track> Добавляет субтитры для элементов <audio> и <video>.
<u> Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
<ul> Создает маркированный список.
<var> Выделяет переменные из программ, отображая их курсивом.
<video> Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
<wbr> Указывает браузеру возможное место разрыва длинной строки.

Элементы, теги и атрибуты — Основы HTML, CSS и веб-дизайна

Немного формальностей

Мало кто любит терминологию и формальности, но, к счастью, в мире HTML всё довольно просто.

Вкратце:

  1. Страница состоит из элементов.
  2. Элемент — это набор из тегов и содержания.
  3. Теги чаще всего идут парами: открывающий (<tag>) и закрывающий (</tag>). Между ними находится то, что попадает под действие этого элемента.
  4. Открывающий тег может содержать дополнительную информацию — атрибуты и значения атрибутов. Атрибуты позволяют «настроить» тег.

В примере из предыдущего урока есть элемент a (anchor — якорь), состоящий из открывающего и закрывающего тегов <a></a>.

<a href="https://ru.hexlet.io">Хекслет</a>

Это ссылка, и у неё есть атрибут href со значением https://ru.hexlet.io. Между открывающим и закрывающим тегами находится содержание — слово «Хекслет». Именно оно становится ссылкой.

А ниже есть картинка. Это пример одиночного тега, элемента, в котором не нужен закрывающий тег. Их ещё называют self-closing element — «самозакрывающиеся элементы».

<img src="https://i.imgur.com/789p0uP.png">

Как видите, мы указали атрибут src (от английского «source» — источник) со значением https://i.imgur.com/789p0uP.png. Это адрес файла изображения.

А некоторые элементы состоят из нескольких вложенных элементов. Например, списки:

<ol>
  <li>Код. Тайный язык информатики (Чарльз Петцольд)</li>
  <li>Не заставляйте меня думать (Steve Krug)</li>
  <li>Дизайн привычных вещей (Donald Norman)</li>
</ol>

Это — пронумерованный список (ordered list), поэтому тег называется <ol>. А каждая строчка списка — это элемент списка (list item) — <li>.

На странице это будет выглядеть примерно так:


  1. Код. Тайный язык информатики (Чарльз Петцольд)
  2. Не заставляйте меня думать (Steve Krug)
  3. Дизайн привычных вещей (Donald Norman)

А непронумерованный список (unordered list) создаётся с помощью <ul>. Заметьте, что достаточно лишь изменить открывающий и закрывающий тег всего списка, а сами элементы списка изменять не нужно.

<ul>
  <li>Код. Тайный язык информатики (Чарльз Петцольд)</li>
  <li>Не заставляйте меня думать (Steve Krug)</li>
  <li>Дизайн привычных вещей (Donald Norman)</li>
</ul>

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

See the Pen HTML lists with links by Hexlet (@hexlet) on CodePen.


Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Атрибуты тегов | htmlbook.ru

Чтобы расширить возможности отдельных тегов и более гибко управлять содержимым контейнеров и применяются атрибуты тегов.

Для атрибутов тегов используются значения по умолчанию

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

Атрибуты без значений

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

Пример 3.4. Атрибуты без значений

<!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>
  <form action="self.php">
   <p><input type="text"></p>
   <p><input type="submit" disabled></p>
  </form>
 </body>
</html>

В данном примере используется атрибут disabled, у которого явно не задано значение. Подобная запись называется «сокращенный атрибут тега».

Порядок атрибутов в тегах

Порядок атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет. Поэтому теги вида <img src=»/images/title.gif» > и <img src=»/images/title.gif»> по своему действию равны.

Формат атрибутов

Каждый атрибут тега относится к определенному типу (например: текст, число, путь к файлу и др.), который обязательно должен учитываться при написании атрибута. Так, в примере 3.3 упоминается тег <img>, он добавляет на веб-страницу рисунок, а его атрибут width задает ширину изображения в пикселах. Если поставить не число, а нечто другое, то значение будет проигнорировано и возникнет ошибка при валидации документа.

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

названия тегов краткое описание тегов
<a> Предназначен для создания ссылок (гипертекста).
Атрибуты:
name — Присваивает имя элементу.
href — Присваивает адрес ресурса, к которому ведет ссылка.
для создания ссылки вызова почтовой программы href=»mailto:e-mail»
title— Всплывающая подсказка

Синтаксис:
<a href=»page.html» title=»описание»>открыть страницу</a>
<a href=»http://www.site.ru» >ссылка на сайт</a>
<a href=»mailto:[email protected]»>открыть почтовую программу</a>
<a name=»razdel»>присвоить имя</a>
<a href=»#razdel»>перейти к закладке</a>

Читать о теге подробно в учебнике HTML

<abbr> Выделяет в тексте аббревиатуру. Обычно подчеркивается пунктирной линией.
Атрибуты:
title— всплывающая подсказка

Синтаксис:
<abbr title=»Ваше описание»>HTML</abbr>

<acronym> Выделяет в тексте акроним. Обычно подчеркивается пунктирной линией.
Атрибуты:
title— всплывающая подсказка

Синтаксис:
<acronym title=»Ваше описание»>Генштаб</acronym>

<address> Указывает автора документа и его адрес. Обычно отображается курсивом.
Атрибуты:
title— всплывающая подсказка

Синтаксис:
<address title=»Ваше описание»>Иванов Иван Иванович</address>

<area> Определяет области карты-изображения которые являются ссылками на тот или иной документ. располагается внутри тега <map>
Атрибуты:
alt — альтернативный текст для области изображения
title— всплывающая подсказка
href — указывает путь к открываемому документу
shape — форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений:
  • rect — прямоугольная область
  • poly — область представляет собой некий многоугольник
  • circle — область заданная окружностью
coords — координаты области
nohref — область без ссылки на другой документ
target — указывает в каком окне следует открывать документ.
  • _blank — открыть в новом окне
  • _self — открыть в текущем окне (по умолчанию)
  • _parent — открыть документ в фрейме-родителе, если фреймов нет, то работает как _self.
  • _top — отменяет фреймы и загружает документ в полном окне браузера, если фреймов нет, то как _self.
Синтаксис:


   <area href=»primer.html» shape=»rect» coords=»15,15,80,80″ alt=»описание» title=»описание» target=»_blank»>

не требует закрывающего тега

Читать о теге подробно в учебнике HTML

<b> Делает текст полужирным. Аналогичен тегу <strong>
<base>
в редакции..


Синтаксис:

<basefont> в редакции..


Синтаксис:

<bdo> Определяет направление вывода текста. Основное предназначение работа с текстами языковых групп, где чтение происходит справа — налево.
Атрибуты:
dir — Направление
  • ltr Слева — направо (по умолчанию)
  • rtl справа — налево
title— Всплывающая подсказка

Синтаксис:

<bdo dir=»rtl» title=»Ваше описание»>Упер казак репу</bdo>
<bgsound> Внедряет в документ звуковой файл. Файл проигрывается в качестве фоновой музыки.
Атрибуты:
loop — Указывает на количество повторов воспроизведения файла.
  • 1 — Постоянное, непрерывное воспроизведение звукового файла.
  • 0 — Воспроизведение звукового файла только один раз.
  • X — Заданное количество повторов воспроизведения где Х — число повторов.
src — Указывает путь к звуковому файлу

Синтаксис:
<bgsound src=»music.wav» loop=3>

Не требует закрывающего тега.

<big> Делает текст крупным.
<body> «Тело» документа указывает содержание видимой части документа.
Атрибуты:
bgcolor — задаёт цвет фона документа.
background — указывает адрес рисунка делая его фоном документа.
text — цвет текста документа.
link — цвет ссылок.
vlink — цвет посещённых ссылок.
alink — цвет нажатой, активной ссылки.
bgproperties=»fixed» — делает рисунок фон фиксированным.(фоновое изображение не прокручивается при нажатии PageDown)

Синтаксис:
<body link=»#008000″ alink=»# ff0000 » vlink=»# ffff00″ text=»#484800″ bgcolor=»#ffffff» background=»fon.jpg» bgproperties=»fixed»>
содержание видимой части документа
</body>

Читать о теге подробно в учебнике HTML

<blockquote> Предназначен для создания цитат.
Атрибуты:
title— Всплывающая подсказка

Синтаксис:
<blockquote title=»подсказка»>Данный текст будет являться цитатой, имея отступы с обеих сторон документа и остального текста</blockquote>

<br> Перенос строки.
<button> в редакции..


Синтаксис:

<caption> в редакции..


Синтаксис:

<center> Горизонтальное выравнивание всех элементов по центру документа.
<cite> Выделяет в тексте цитату. Обычно курсивом.
Атрибуты:
title— всплывающая подсказка

Синтаксис:
<cite title=»Ваше описание»>Лед тронулся! господа присяжные заседатели!</cite>

<code> Отмечает текст как некий программный код. Обычно отображается моноширинным шрифтом.
Атрибуты:
title — всплывающая подсказка

Синтаксис:
<code title=»Ваше описание»>Некий программный код</code>

<col> в редакции..


Синтаксис:

<colgroup> в редакции..


Синтаксис:

<dd> Описание списка определений.
Атрибуты:
title— Всплывающая подсказка

Синтаксис:
<dl>
    <dt>Опрределение
       <dd title=»подсказка»>Описание определения
</dl>

Закрывающий тег необязателен.

Читать о теге подробно в учебнике HTML

<del> Выделяет удалённый текст в новой версии документа. Выделенный текст станет перечёркнутым.
Атрибуты:
title— всплывающая подсказка

Синтаксис:
<del title=»Ваше описание»>Старая цена 1000р.</del> — Новая 999 р.!!!

<dfn> Отмечает текст как определение. Обычно отображается курсивом.
Атрибуты:
title— всплывающая подсказка

Синтаксис:
<dfn title=»Ваше описание»>Электроток — это направленное упорядоченное движение заряженных частиц</dfn>

<div> Определяет блок HTML. Преимущественно используется совместно с CSS.
Атрибуты:
align — Выравнивание блока относительно страницы:
  • left — по левому краю документа (по умолчанию)
  • right — по правому краю документа
  • center — по центру
  • justify — по обоим краям документа
title — Всплывающая подсказка.
unselectable — Запрещает или разрешает пользователю выделять текст в блоке.
  • on — запрещает,
  • off — разрешает.
Синтаксис:
<div unselectable=»on» align=»center» title=»подсказка»>Текст в этом блоке нельзя выделить</div>

Читать о теге подробно в учебнике HTML

<dl> Создаёт список определений.
<dt> Определение списка определений.
Атрибуты:
title— Всплывающая подсказка

Синтаксис:
<dl>
    <dt title=»подсказка»>Опрределение
       <dd>Описание определения
</dl>

Закрывающий тег необязателен.

Читать о теге подробно в учебнике HTML

<em> Выделяет особенно важный фрагмент текста. Обычно браузерами отображается курсивом.
Атрибуты:
title— Всплывающая подсказка

Синтаксис:
<em title=»Ваше описание»>этот текст будет наклонным</em>

<embed>
в редакции..


Синтаксис:

<fieldset> в редакции..


Синтаксис:

<font> Шрифт.
Атрибуты:
size — размер шрифта
color — цвет шрифта
face — задаёт шрифт из библиотеки шрифтов

Синтаксис:
<font face=»arial» size=»+2″ color=»#ff0000″> этот текст будет напечатан красным цветом с помощью шрифта Аrial размером+2 </font>

Читать о теге подробно в учебнике HTML

<form> в редакции..


Синтаксис:

<frame> Определяет фрейм в фреймовой структуре документа. Располагается внутри тега <frameset>.
Атрибуты:
srs — Путь к документу. Обязательный атрибут
name — Присваивает имя фрейму.
marginwidth — Отступ в пикселях от левого и правого края фрейма.
marginheight — Отступ в пикселях от верхнего и нижнего края фрейма.
scrolling — Определяет наличие полос прокрутки содержимого фрейма.
  • no— никогда не показывать полосу прокрутки,
  • yes — всегда показывать,
  • auto— показывать в том случае если она необходима.
noresize — Запрещает пользователю изменять размеры фрейма.
frameborder — Определяет наличие рамок у фрейма.
  • 1 — включить рамку
  • 0— выключить рамку
bordercolor — Задаёт цвет бордюра фрейма.

Синтаксис:
<html>
   <head>
      <title>фреймы</title>
   </head>
   <frameset rows=»30%,70%»>
      <frame src=»primer1.html» marginwidth=»0″ marginheight=»0″ noresize>
      <frame src=»primer2.html» name=»osnovnoe» scrolling=»no» bordercolor=»#ff0000″>
   </frameset>
</html>

Не требует закрывающего тега.

Читать о теге подробно в учебнике HTML

<frameset> Определяет фреймовую структуру документа. Используется вместо тега <body>.
Атрибуты:
rows — Определяет количество и размеры горизонтальных фреймов в пикселях процентах или * — использовать всё свободное пространство.
cols — Количество и размеры вертикальных фреймов.
border — Определяет ширину рамок фреймов в пикселях.
frameborder — Определяет наличие рамок у фрейма.
  • 1 — включить рамку
  • 0 — выключить рамку
framespacing — определяет ширину рамок фреймов в пикселях. Альтернатива border и frameborder при нулевом значении.

Синтаксис:
<html>
   <head>
      <title>фреймы</title>
   </head>
   <frameset rows=»15%,85%» framespacing=»0″ frameborder=»0″ border=»0″>
          <frame src=»logotype.html»>
          <frameset cols=»20%,80%» framespacing=»0″ frameborder=»0″ border=»0″>
                <frame src=»menu.html»>
                <frame src=»text.html»>
          </frameset>
   </frameset>
</html>

Читать о теге подробно в учебнике HTML

<h2> Делает текст заголовоком. Может иметь значение от 1-6.
Атрибуты:
align -выравнивание заголовока по:
  • center — центру
  • left — левому краю
  • right — правому краю
title— Всплывающая подсказка

Синтаксис:
<h4 title=»Ваше описание» align=»right»>заголовок</h4>

Читать о теге подробно в учебнике HTML

<head> «Голова» определяет место в документе не для отображения видимой его части «тела» может располагать в себе теги предназначенные для поисковых машин, а так же название документа.
<hr> Рисует горизонтальную линию.
Атрибуты:
align -выравнивание линии по:
  • center — центру
  • left — левому краю
  • right — правому краю
size — толщина линии
width — ширина линии
color — присваивает цвет линии
noshade — указывает на отсутствие тени линии

Синтаксис:
<hr align=»left» size=»5″ color=»#ff0000″ noshade>
не требует закрывающего тега

Читать о теге подробно в учебнике HTML

<html> Указывает программам просмотра html страниц начало и конец документа.
<i> Делает текст наклонным.
<iframe> Вводит на страницу не фреймовой структуры плавающий фрейм.
Атрибуты:
src — Путь к вводимому документу (обязательный атрибут)
width — ширина плавающего фрейма в пикселях или процентах
height — высота плавающего фрейма

scrolling — показ полосы прокрутки:

  • no— никогда не показывать полосу прокрутки,
  • yes — всегда показывать,
  • auto— показывать в том случае если она необходима.
align — выравнивание пваюшего фрейма:
  • left — слева
  • right — справа
  • top — выше
  • bottom — ниже
frameborder — наличие рамки вокруг плавающего фрейма:
  • 1 — включить рамку
  • 0— выключить рамку
Синтаксис:
<iframe src=»primer.html» align =»left» scrolling=»auto» frameborder=»1″></iframe>

Читать о теге подробно в учебнике HTML

<img> Выводит графическое изображение (рисунок).
Атрибуты:
src — адрес рисунка. (обязательный атрибут)
align -выравнивание рисунка по:
  • center — центру
  • left — левому краю
  • right — правому краю
  • bottom — нижнему краю
  • top — верхнему краю
  • middle — по середине
alt — Описание рисунка (когда он не загружен), может выполнять роль всплывающей подсказки.
title— Всплывающая подсказка
border — Толщина рамки
bordercolor — Цвет рамки
width — Ширина рисунка
height — Высота рисунка
hspace — Горизонтальный отступ
vspace — Вертикальный отступ
ismap — Изображение является навигационной картой на сервере
usemap — Изображение является навигационной картой на стороне клиента.

Синтаксис:
<img src=»foto.jpg» alt=»описание» title=»описание» align=»right» hspace=»10″ vspace=»10″ border=»2″ bordercolor=»#ff0000″>
Не требует закрывающего тега

Читать о теге подробно в учебнике HTML

<input> в редакции..


Синтаксис:

<ins> Выделяет новый текст в новой версии документа. Выделенный текст станет подчёркнутым. Противоположен по значению тегу <del>.

Атрибуты:
title— всплывающая подсказка

Синтаксис:
<del> Старая цена 1000р.</del> — <ins title=»Ваше описание»>Новая 999 р.</ins>!!!

<kbd> От английского keyboard — клавиатура. Указывает текст вводимый с клавиатуры. Обычно отображается моноширинным шрифтом.
Атрибуты:
title— всплывающая подсказка

Синтаксис:
<kbd title=»Ваше описание»>Текст набранный клавиатурой</kbd>

<label> в редакции..


Синтаксис:

<legend> в редакции..


Синтаксис:

<li> Обозначает элемент списка. Используется в нумерованных и ненумерованных списках.
Атрибуты:
title— Всплывающая подсказка

Синтаксис:
<ul>
      <li title=»главный пункт»>Пункт 1
      <li>Пункт 2
      <li>Пункт 3
</ul>

Закрывающий тег необязателен.

Читать о теге подробно в учебнике HTML

<link> Указывает на связь документа с каким либо внешним файлом. Тег <link> является ссылкой, но не для людей а для программ, и ведет к внешнему файлу например иконке или таблице стилей.. Располагается в «голове» документа между тегом <head></head> и не выводится браузерами на экран.

Атрибуты:
href — Путь к файлу.
rel — Определяет отношения между текущим документом и файлом, на который делается ссылка.

  • shortcut icon — Определяет, что подключаемый файл является иконкой.
  • stylesheet — Определяет, что подключаемый файл содержит таблицу стилей.
  • application/rss+xml — Файл в формате XML для описания ленты новостей.
type — тип данных подключаемого файла.

Синтаксис:
<head>
   <link rel=»shortcut icon» href=»favicon.ico»>
   <link rel=»stylesheet» href=»style.css» type=»text/css»>
   <title>link</title>
</head>

Не требует закрывающего тега.

<map> Определяет место в коде документа в котором создаётся описание карты-изображения с помощью тега/тегов <area>
Атрибуты:
name — указывает имя графического изображения которое является картой

Синтаксис:
<img src=»karta.jpg» usemap=»#panel» border=»0″>
<map name=»panel»>
   <area href=»primer.html» shape=»rect» coords=»15,15,80,80″ alt=»описание» title=»описание» target=»_blank»>
</map>

Читать о теге подробно в учебнике HTML

<marquee> Бегущая строка.
Атрибуты:
behavior — определяет тип скроллинга, может иметь следующие значения:
  • alternate — колебательные движения от края к краю
  • scroll — прокручивание текста. текст будет выходить за рамки экрана и снова появляться с противоположной его стороны
  • slide — прокручивание текста c остановкой.
scrollamount — скорость бегущей строки от 1 до 10.
loop задает количество прокруток бегущей строки.

direction — направление движения текста. значения:

  • up — вверх,
  • down — вниз,
  • left — влево,
  • right — вправо.
bgcolor — цвет фона бегущей строки,
height — высота строки,
width — ширина строки.
title— Всплывающая подсказка

Синтаксис:
<marquee behavior=»alternate» direction=»right» scrollamount=»8″ bgcolor=»#b40000″ title=»описание»>этот текст будет являтся бегущей строкой</marquee>

Читать о теге подробно в учебнике HTML

<meta> Определяет мета теги информация в которых предназначена для браузеров и поисковых систем. Мета теги не видны пользователю и располагаются в заголовке HTML документа между тегами <head> </head>

Атрибуты:
http-equiv — указывает браузеру как следует обработать основное содержание документа.
name — информационное имя.
content — информационное содержание(обязательный атрибут).
Атрибуты http-equiv и name могут быть равны любому подходящему идентификатору.

Синтаксис:
<head>
   <meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
   <meta name=»author» Content=»Остап Бендер»>
   <meta name=»copyright» Content=»»Рога и копыта» Остап Бендер»>
   <meta name=»description» Content=»Производим закупку по выгодным ценам рогов и копыт!»>
   <meta name=»keywords» Content=»рога, копыта, рожки, рог, копыто, копытце, закупка, покупка, приобретение, выгодно, продать, купить, сбыть, реализовать, корова, бык, коровьи, бычьи, оплата, деньги, наличные, цена, цене»>

</head>

Не требует закрывающего тега.

Читать о теге подробно в учебнике HTML

<nobr> Запретить перенос строки. Противоположенный по значению тег <br>


Синтаксис:
<nobr>Длинная, длинная, очень длинная строка.. которая не будет переносится на другую строчку так как мы принудительно запретили ей это делать. Из-за неё появится горизонтальная полоса прокрутки, однако, что поделаешь, раз нам так захотелось..</nobr>

<noembed> в редакции..


Синтаксис:

<noframes> Тег <noframes> выводит текст заключенный в него в том случае если браузер пользователя не поддерживает фреймы или они принудительно выключены в его настройках.
<noscript> Тег <noscript> выводит текст заключенный в него в том случае если браузер пользователя не поддерживает скрипты или они принудительно выключены в его настройках.


Синтаксис:
<noscript>Извините, но Ваш браузер не поддерживает скрипты..</noscript>

<object> в редакции..


Синтаксис:

<ol> Определяет нумерованный (упорядоченный) список.
Атрибуты:
type-Тип маркера
  • А — Заглавные буквы
  • а — Строчные буквы
  • I — Заглавные римские цифры
  • i — Строчные римские цифры
  • 1 — Арабские цифры (по умолчанию)
title — Всплывающая подсказка
start — Начальное значение для нумерованного списка

Синтаксис:
<ol type=1 start=»24″ title=»список»>
      <li>Пункт 24
      <li>Пункт 25
      <li>Пункт 26
</ol>

Читать о теге подробно в учебнике HTML

<optgroup> в редакции..


Синтаксис:

<option> в редакции..


Синтаксис:

<p> Создаёт параграф.
Атрибуты:
align — Выравнивание параграфа относительно страницы:
  • left — по левому краю документа (по умолчанию)
  • right — по правому краю документа
  • center — по центру
  • justify — по обоим краям документа
title— Всплывающая подсказка

Синтаксис:
<p align=»right» title=»Ваше описание»>Текст</p>

Читать о теге подробно в учебнике HTML

<param> в редакции..


Синтаксис:

<pre> Обрамляет предварительно отформатированный текст. Браузер при выводе текста на экран не удаляет пробелы и переносы строк.
<q> Предназначен для создания цитат. От <blockquote> отличается тем что цитата не имеет отступов. А в отличие от тега <cite> цитата обозначенная тегом <q> автоматически берётся браузерами в кавычки.
Атрибуты:
title— Всплывающая подсказка

Синтаксис:
<q title=»подсказка»>Данный текст будет являться цитатой.</q>

<s> Делает текст перечёркнутым. Аналогичент тегу <strike>.
<samp> Выделяет текст как образец. Используется для отметки текста являющемся результатом работы программ. Отображается моноширинным шрифтом.

Атрибуты:
title— Всплывающая подсказка

Синтаксис:
<samp title=»Ваше описание»>Этот текст является результатом действия некой программы</samp>

<script> Внедряет на страницу скрипт.
Атрибуты:
defer — Указывает на то что перед выполнением скрипта следует полностью загрузить документ в который он внедрён.
type — Определяет тип содержимого тега <script>
language — Определяет язык скрипта.
  • JScript
  • javascript
  • VBS
  • VBScript
src — Путь к внешнему файлу содержащему скрипт.

Синтаксис:
<html>
   <head>
      <title>скрипт</title>
   </head>
   <body>
      <script language=»vbscript»>
         Sub knopka()
          Alert «Привет мир!»
         End Sub
      </script>
      <button>кнопка</button>
   </body>
</html>

<select> в редакции..


Синтаксис:

<small> Делает текст малым.
<span> Определяет контейнер для внутреннего текста. Как правило используется совместно с CSS.
Атрибуты:
title — Всплывающая подсказка.
unselectable — Запрещает или разрешает пользователю выделять текст в блоке.
  • on — запрещает,
  • off — разрешает.
Синтаксис:
<span unselectable=»on» title=»Описание»>Первое</span> слово в параграфе имеет собственыые свойства
<strike> Делает текст перечёркнутым. Аналогичент тегу <s>.
<strong> Выделяет особенно важный фрагмент текста. Обычно браузерами отображается полужирным.
Атрибуты:
title— всплывающая подсказка

Синтаксис:
<strong title=»Ваше описание»>Этот текст будет полужирным</strong>

<style> Служит для определения стилей элементов страницы. Тег <style> распологается в заголовке страницы между <head></head>.
Атрибуты:
media — Указывает на устройство вывода, для работы с которым предназначена таблица стилей.
  • all -Все устройства.
  • screen — Монитор (по умолчанию).
  • print — Принтер.
  • projection — Проектор.
  • braille — Устройства, основанные на системе Брайля. Предназначены для слепых людей.
  • speech — Речевые синтезаторы.
type — Сообщает браузеру, какой синтаксис использовать для правильной интерпретации стилей. Синтаксис:

   
      Стили
      style type=»text/css»>
         a:link {
         color: #008000;
         text-decoration: none;
         font-size: 14px;
         }
         a:hover {
         text-decoration: none;
         color: #ff0000;
         font-size: 18px;
         }
      </style>
   
   
      открыть страницу
   

<sub> Нижний индекс.
<sup> Верхний индекс.
<table> Создаёт таблицу.
Атрибуты:
align — Выравнивание таблицы по:
  • left — по левому краю (по умолчанию)
  • right — по правому краю
  • center — по центру
  • justify — по левому и правому краю
bgcolor — Цвет фона таблицы.
border — Толщина бордюра в пикселях.
background — Задает фоновый рисунок в таблице.
bordercolor — Цвет бордюра.
cellspacing — Расстояние между ячейками таблицы.
cellpadding — Расстояние между содержимым ячейки и рамкой.
width — Ширина таблицы в процентах или пикселях.
height — Высота таблицы в процентах или пикселях.
cols — Определяет число колонок в таблице. Позволяет браузерам показывать содержимое таблицы ещё до окончания её полной загрузки.
frame — Определяет в каких местах таблицы следует показывать бордюр.
  • void — Нет бордюра
  • border — Бордюр вокруг всей таблицы. (по умолчанию)
  • above — Бордюр по верхнему краю таблицы.
  • below — Бордюр только снизу таблицы.
  • hsides — Только горизонтальные границы.
  • vsides — Только вертикальные границы.
  • rhs -Бордюр только справа.
  • lhs — Бордюр только слева.
rules — Определяет в каких местах ячеек таблицы следует показывать бордюр.
  • all — Вокруг каждой ячейки.(по умолчанию)
  • groups — Между группами ячеек образованными тегами <thead>, <tbody>, <tfoot>, <colgroup>, <col>.
  • cols — Только между столбцами таблицы.
  • none — Отсутствуют.
  • rows — Только между строк таблицы.
Синтаксис:
    table cols=»2″ border=»5″ frame=»vsides» align=»center» cellpadding=»5″ cellspacing=»2″ bgcolor=»#ffa0cf»>
      
          строка1 ячейка1 строка1 ячейка2
      
      
          строка2 ячейка1 строка2 ячейка2
      
    </table>

Читать о теге подробно в учебнике HTML

<tbody> в редакции..


Синтаксис:

<td> Создаёт отдельную ячейку в таблице.
Атрибуты:
width — Ширина ячейки в процентах или пикселях
height — Высота ячейки в процентах или пикселях

align — Выравнивает текст в ячейке:

  • left — по левому краю (по умолчанию)
  • right — по правому краю
  • center — по центру
  • justify — по левому и правому краю
valign — Выравнивает текст в ячейке по вертикали:
  • top — по верхнему краю
  • middle — по центру
  • bottom — по нижнему краю
  • baseline — по базовой линии.
colspan — количество столбцов занимаемое ячейкой
rowspan — количество рядов занимаемое ячейкой
bgcolor — Цвет фона ячейки
background — Задает фоновый рисунок в ячейке.
bordercolor — Цвет бордюра.
title — Всплывающая подсказка
nowrap — Запрещает перенос строк в ячейке.

Синтаксис:
    <table border=»1″>
       <tr>
          <td colspan=»2″ valign=»top» align=»center» bgcolor=»#b2ff80″>строка1 ячейка1</td>
       </tr>
       <tr>
          <td bgcolor=»#ffa0cf»>строка2 ячейка1</td>
          <td title=»Описание ячейки» align=»center»>строка2 ячейка2</td>
       </tr>
    </table>

Читать о теге подробно в учебнике HTML

<textarea> в редакции..


Синтаксис:

<tfoot> в редакции..


Синтаксис:

<th> Создаёт ячейку в таблице которая определяется как заголовок. Обычно браузеры выравнивают содержимое ячейки/заголовка по центру и делают текст жирным.

Атрибуты:
width — Ширина ячейки в процентах или пикселях
height — Высота ячейки в процентах или пикселях

align — Выравнивает текст в ячейке:

  • left — по левому краю
  • right — по правому краю
  • center — по центру
  • justify — по левому и правому краю
valign — Выравнивает текст в ячейке по вертикали:
  • top — по верхнему краю
  • middle — по центру
  • bottom — по нижнему краю
  • baseline — по базовой линии.
colspan — количество столбцов занимаемое ячейкой
rowspan — количество рядов занимаемое ячейкой
bgcolor — Цвет фона ячейки
background — Задает фоновый рисунок в ячейке.
bordercolor — Цвет бордюра.
title — Всплывающая подсказка
nowrap — Запрещает перенос строк в ячейке.

Синтаксис:
    <table border=»1″>
       <tr>
          <th colspan=»2″ title=»Описание заголовка» bgcolor=»#b2ff80″ bordercolor=»#ff0000″>Заголовок таблицы</th>
       </tr>
       <tr>
          <td bgcolor=»#ffa0cf»>строка2 ячейка1</td>
          <td title=»Описание ячейки» align=»center»>строка2 ячейка2</td>
       </tr>
    </table&gt

<thead> в редакции..


Синтаксис:

<title> Заголовок и название документа.
<tr> Создаёт строку в таблице.
Атрибуты:
align — Выравнивает текст в ячейках строки:
  • left — по левому краю (по умолчанию)
  • right — по правому краю
  • center — по центру
  • justify — по левому и правому краю.
valign — Выравнивает текст в ячейках строки по вертикали:
  • top — по верхнему краю
  • middle — по центру
  • bottom — по нижнему краю
  • baseline — по базовой линии.
bordercolor — Цвет бордюра.
bgcolor — Цвет фона ячеек строки

Синтаксис:
    <table border=»1″>
       <tr valign=»middle» align=»center» bordercolor=»#ff0000″>
          <td>строка1 ячейка1</td> <td>строка1 ячейка2</td>
       </tr>
       <tr valign=»top» align=»left» bgcolor=»#ffa0cf»>
          <td>строка2 ячейка1</td> <td>строка2 ячейка2</td>
       </tr>
    </table>

Читать о теге подробно в учебнике HTML

<tt> Делает текст моноширинным.
<u> Делает текст подчёркнутым.
<ul> Определяет ненумерованныый (неупорядоченный)список.
Атрибуты:
type-Тип маркера
  • disk — Закрашенный кружок. (по умолчанию)
  • circle — Незакрашенный кружок
  • square — Квадрат
title— Всплывающая подсказка

Синтаксис:
<ul type=circle title=»список»>
      <li>Пункт 1
      <li>Пункт 2
      <li>Пункт 3
</ul>

Читать о теге подробно в учебнике HTML

<var> Выделяет в тексте переменные. Обычно отображается курсивом.
Атрибуты:
title— Всплывающая подсказка

Синтаксис:
<var title=»Ваше описание»>переменная</var>

<wbr> Разрешает перенос строки.
Используется внутри тега <nobr>

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

Не требует закрывающего тега.

<xmp> Отображает текст в том виде в котором он и был набран. Пробелы, переносы строк не удаляются, кроме того спецсимволы выводятся как обычный текст.

Синтаксис:
<xmp>
Пример:
<html>
      <head>
            <title>Моя первая страничка </title>
      </head>
      <body>
            Привет мир!!!
      </body>
</html>
</xmp>

HTML — Атрибуты / ProgLang

Вы уже знакомы с несколькими html-тегами и их использованием, например теги заголовков <h2>, <h3>, или тег абзаца <p> и другие. До сих пор мы использовали их в простейшей форме, но большинство тегов в HTML могут иметь атрибуты, которые являются дополнительными битами информации.

Атрибут — используется для определения характеристик html-элемента и помещается внутри открытого тега элемента. Все атрибуты состоят из двух частей — это имя и значение:

  • Имя — это свойство, которое Вы хотите установить. Например, элемент абзаца <p>, в примере ниже, содержит атрибут align, который Вы можете использовать для указания выравнивания абзаца на странице.
  • Значение — это значение, которое Вы хотите установить для свойства. Значение атрибута всегда помещается в кавычки. В приведенном ниже примере показаны три возможных значения атрибута align: left, center и right.

Имена и значения атрибутов в HTML не зависят от регистра. Однако консорциум World Wide Web (W3C) рекомендует в своей рекомендации HTML 4 использовать атрибуты и значения атрибутов в нижнем регистре.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример атрибута align</title>
  </head>
  <body>
    <p align="left">Выровнено по левому краю.</p>
    <p align="center">Выровнено по центру.</p>
    <p align="right">Выровнено по правому краю.</p>
  </body>
</html>

Получим следующий результат:

Основные атрибуты HTML

Существует четыре основных атрибута в HTML, которые могут использоваться для большинства html-элементов (хотя и не для всех):

Атрибут id

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

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

Таблицу стилей мы обсудим в отдельном самоучителе. Пока же давайте использовать атрибут id для различения двух элементов абзаца, как показано ниже.

<p>Этот абзац объясняет, что такое HTML.</p>
<p>Этот абзац объясняет, что такое каскадная таблица стилей (CSS).</p>

Атрибут title

Атрибут title — дает название элемента для элемента. Синтаксис для атрибута title аналогичен атрибуту id.

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример атрибута title</title>
  </head>
  <body>
    <h3 title="Привет самоучитель по HTML!">Пример заголовка</h3>
  </body>
</html>

Получим следующий результат:

Теперь попробуйте навести курсор на «Пример заголовка», и Вы увидите, что title, который Вы использовали в вашем коде, выйдет как подсказка курсора.

Атрибут class

Атрибут class — используется для связывания элемента со списком стилей и задает класс элементу. Вы узнаете больше об использовании атрибута class, когда изучите CSS (каскадные таблицы стилей). Так что пока можете это пропустить.

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

class="названиеКласса1 названиеКласса2 названиеКласса3"

Атрибут style

Атрибут style — позволяет указывать правила каскадной таблицы стилей (CSS) внутри элемента.

<!DOCTYPE html>
<html>
  <head>
    <title>Пример атрибута style</title>
  </head>
  <body>
    <p>Немного текста... </p>
  </body>
</html>

Получим следующий результат:

На данный момент мы не изучаем CSS, так что давайте продолжим, не беспокоясь о CSS. Здесь Вам нужно понять, какие существуют html-атрибуты, и как их можно использовать при форматировании содержимого.

Атрибуты интернационализации

Существует три атрибута интернационализации в HTML, которые доступны для большинства (хотя и не для всех) элементов XHTML.

Атрибут dir

Атрибут dir — позволяет указать браузеру направление потока текста. Атрибут dir может принимать одно из двух значений, которые Вы можете видеть в следующей таблице:

ЗначениеОписание
ltrСлева направо (значение по умолчанию).
rtlСправа налево (для языков, таких как иврит или арабский, которые читаются справа налево).

Пример

<!DOCTYPE html>
<html dir="rtl">
  <head>
    <title>Пример направления потока текста</title>
  </head>
  <body>
    <p>Отображает направленный текст справа налево.</p>
  </body>
</html>

Получим следующий результат:

Когда атрибут dir используется в теге <html>, он определяет, как текст будет представлен во всем документе. При использовании в другом теге он управляет направлением текста только для содержимого этого тега.

Атрибут lang

Атрибут lang — позволяет указать основной язык, используемый в документе, но этот атрибут хранится в HTML только для обратной совместимости с более ранними версиями HTML. Этот атрибут был заменен атрибутом xml:lang в новых xhtml-документах.

Значения атрибута lang — это стандартные двухсимвольные языковые коды ISO-639. Проверьте коды ISO-639 для языка HTML, перейдите по ссылке для получения полного списка кодов языков.

Пример

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Русский язык страницы</title>
  </head>
  <body>
    <p>Эта страница использует русский язык.</p>
  </body>
</html>

Атрибут xml:lang

Атрибут xml:lang — это XHTML замена для атрибута lang. Значение атрибута xml:lang должно быть ISO-639 кодом страны, которые указаны выше.

Общие атрибуты

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

АтрибутОпцияФункция
alignright, left, centerГоризонтальное выравнивание тегов.
valigntop, middle, bottomВертикально выравнивает тегов внутри html-элемента.
bgcolorчисловые, шестнадцатеричные, RGB значенияПомещает фоновый цвет за элемент.
backgroundURLПомещает фоновое изображение за элемент.
idопределяется пользователемИменование элемента для использования с каскадными таблицами стилей.
classопределяется пользователемКлассифицирует элемент для использования с каскадными таблицами стилей.
widthчисловое или процентное значениеЗадает ширину таблиц, изображений или ячеек таблицы. heightчисловое или процентное значениеЗадает высоту таблиц, изображений или ячеек таблицы. titleопределяется пользователем«Всплывающий» заголовок элементов.

Мы ещё увидим соответствующие примеры атрибутов при изучении других html-тегов (полный список html-тегов и связанных атрибутов).

Поделитесь:

HTML Атрибуты



Атрибуты задаются в начальном тэге элемента и состоят из имени и значения, которые отделяются друг от друга знаком равно (=). Например в атрибуте href=»http://www.wm-school.ru/» href является именем, а http://www.wm-school.ru/ значением.

HTML-теги могут содержать один или несколько атрибутов. Атрибуты добавляются в тег для того, чтобы информировать браузер о том, как данный тег должен отображаться в html-документе.

Атрибут title

Рассмотрим следующий пример:

Пример HTML: Попробуй сам
<abbr title="Язык гипертекстовой разметки">HTML</abbr>

В этом примере используется тег <abbr>, который предназначен для обозначения аббревиатуры или акронима. В начальном теге элемента дополнительно был добавлен атрибут. Этот атрибут содержит заголовок для элемента.

Имя атрибута title. В этом примере, мы дали ему значение Язык гипертекстовой разметки.

Атрибут title может (необязательно) использоваться в любом HTML — элементе, чтобы предоставить дополнительную информацию о содержимом элемента.

При использовании атрибута title, большинство браузеров будет отображать его значение как «всплывающую подсказку», когда пользователь наводит указатель мыши на элемент.

Атрибут alt

Вы уже знаете, что изображения вставляются в Web-страницы с помощью одинарного тега <img>. Атрибут alt добавляется внутрь тera <img> и определяет для добавленноrо на WеЬ-страницу rpaфическоrо элемента альтернативный текст. Этот текст называется альтернативным, поскольку может отображаться на экране как альтернатива самому изображению.

В следующем примере вы увидите, как браузер работает с атрибутом alt, когда появляется «отсутствующее» изображение. Если рисунок не может быть найден или по какой-то причине не загружается, вместо него выводится значение атрибута alt. Поменяйте имя файла с изображением с orange.jpg на pencil.jpg. На самом деле такого файла не существует, поэтому вы получите «отсутствующее» изображение.

Атрибут href

Вы можете добавить сразу несколько атрибутов к элементу.

Вот пример сложения двух атрибутов к элементу <a>(который используется для создания гиперссылки на другую веб — страницу).

Пример HTML: Попробуй сам
<a href="http://www.wm-school.ru" title="Лучшие уроки HTML!">HTML Tutorials</a>

Атрибут href определяет расположение веб — страницы, на которую ведет ссылка.

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

Указывать атрибуты можно только внутри открывающих тегов и если атрибутов несколько, то между ними ставится пробел. При этом нельзя в одном теге задавать два одинаковых атрибута, даже если у них разные значения, то есть дублировать их запрещено. Атрибуты, как и теги, нечувствительны к регистру, то есть их допустимо писать заглавными и строчными буквами. Значения атрибутов можно брать в необязательные двойные (» «) или одинарные кавычки(‘ ‘).

W3C рекомендует использовать кавычки в HTML, и требует применение кавычек для более строгих типов документов, таких как XHTML.

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

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

Одинарные или двойные кавычки?

Чаще всего в HTML используются «двойные кавычки», но вы можете использовать и ‘одинарные’. Иногда вам придется использовать одинарные кавычки, если в значении есть часть, которая отдельно должна быть заключена в кавычки:


<abbr title="Hypertext 'Markup' Language">HTML</abbr>

Можно наоборот:


<abbr title='Hypertext "Markup" Language'>HTML</abbr>

Общие атрибуты

Ниже представлен список некоторых атрибутов, которые стандартны для большинства html-элементов:

АтрибутЗначениеОписание
alignright, left, centerГоризонтальное выравнивание тегов
valigntop, middle, bottomВертикальное вырвнивание тегов внутри HTML-элемента.
backgroundURLРасположение фонового изображения
idУникальное имяУникальное имя для использования с каскадными таблицами стилей.
classправило класса или стиль классаКлассифицирует элемент для использования с каскадными таблицами стилей.
widthЧисловое значениеОпределяет ширину таблиц, изображений или ячеек таблицы.
heightЧисловое значениеОпределяет высотуу таблиц, изображений или ячеек таблицы.
titleТекст подсказкиТекст, отображаемый во всплывающей подсказке.

Полный список всех атрибутов для каждого элемента HTML, указан в нашем справочнике: HTML Атрибуты.

Задачи

Первое итоговое задание

[1-4]

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

Пришло время повторить изученное и выполнить несложные задания:

Всплывающая подсказка


Сделайте всплывающую подсказку с текстом «Хороший сайт», который появляется когда вы наводите указатель мыши на абзац, как показано на рис. 1.

Рис. 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Всплывающая подсказка</title>  
 </head>
 <body>
  <p> title="Хороший сайт">wm-school.ru — сайт для разработчиков.</p>
 </body>
</html>

Размеры изображения

Измените размер изображения до 200 пикселей в ширину и 150 пикселей в высоту.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Размеры изображения</title>  
 </head>
 <body>
  <img src="smile.jpg">
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Размеры изображения</title>  
 </head>
 <body>
  <img src="smile.jpg">
 </body>
</html>

Ссылка на веб-сайт

Измените нижеприведенный код так, чтобы при щелчке кнопкой мыши по тексту «Это ссылка на сайт», вы перешли на главную страницу сайта www.wm-school.ru.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылка на веб-сайт</title>  
 </head>
 <body>
  Это ссылка на сайт
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылка на веб-сайт</title>  
 </head>
 <body>
  <a href="http://www.wm-school.ru">Это ссылка на сайт</al>
 </body>
</html>

Альтернативный текст


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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Альтернативный текст</title>  
 </head>
 <body>
  <img src="noimage.jpg">
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Альтернативный текст</title>  
 </head>
 <body>
  <img src="noimage.jpg" alt="Смайлик">
 </body>
</html>





Атрибуты HTML-тегов — шпаргалка

С тем, что такое HTML теги, мы уже разобрались. Мы выяснили, что у них есть содержимое. Однако это ещё не всё. У тегов также есть атрибуты, которые расширяют их возможности, а у атрибутов, в свою очередь, есть значения. С их помощью элементу можно задавать параметры, определять стиль оформления. Например, тегом

вы обозначили абзац. Но как сделать, чтобы он был выровнен по правому краю? Для этого понадобится определённый атрибут с соответствующим значением. Как некоторые теги не имеют пары, так и некоторые атрибуты могут употребляться без значений.

Как писать атрибуты?

Атрибуты — зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично — это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?

Значения с атрибутами записываются в таком формате:

      Атрибут=”значение” 
      lang=”en” 

Писать атрибуты всегда нужно внутри открывающего тега, после зарезервированного слова.

      <p align=”center”>Абзац</p>   

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

Универсальные атрибуты

Каждый HTML-тег наделён собственным набором атрибутов. Некоторые атрибуты могут быть доступны для нескольких тегов, другие же могут работать только с одним. Ещё есть группа универсальных (глобальных) атрибутов, которые можно использовать с любым тегом. Вкратце ознакомимся с атрибутами этой категории.

  • accesskey позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш Alt+1 пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.

В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:

      <a acceskey=”1” href=”https://youtube.com”>Ссылка будет открываться по нажатию сочетания клавиш с единицей</a>
  • class позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.
  • С помощью contenteditable можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: true — правку разрешить, false — запретить.
  • При помощи атрибута contextmenu вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге <menu>, а атрибуту contextmenu присваивается его идентификатор.
  • dir определяет направление текста: слева направо (ltr) или справа налево (rtl).
  • draggable позволяет запретить (false) или разрешить (true) пользователю перетаскивать наделённый этим атрибутом элемент страницы.
  • dropzone указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение copy), перемещать (move) или создать на него ссылку (link).
  • hidden — атрибут, позволяющий скрыть содержимое элемента, чтобы оно не отображалось в браузере. Если атрибуту задано значение false, объект отображается, true — скрывается.
  • id задаёт идентификатор элемента — своего рода имя, которое нужно для простой смены стиля объекта, а также для того, чтобы к нему могли обращаться скрипты. Значением атрибута и будет его имя. Начинаться оно должно обязательно с латинской буквы, и может содержать цифры, буквы всё того же латинского алфавита (большие и маленькие), а также символы дефиса (-) и подчёркивания (_). Русских букв содержать не может.
  • lang помогает браузеру понять, на каком языке написан контент, и задать ему соответствующий стиль (например, в языках могут использоваться разные кавычки). Значениями выступают коды языков (русский — ru, английский — en и т. п.).
  • spellcheck включает (true) или отключает (false) проверку правописания. Особенно полезно использовать атрибут в тегах полей форм, куда текст будет вводить пользователь.
  • style позволяет задать оформление элемента с помощью CSS-кода.
  • tabindex даёт возможность определить, сколько раз пользователю придётся нажать клавишу Tab, чтобы фокус получил объект с этим атрибутом. Количество нажатий определяет значение атрибута — целое положительное число.
  • title — всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной. Строка в значении и будет подсказкой.
      <a title=”Ссылка, ведущая на Яндекс” href=”http://yandex.ru”>Поиск</a>
  • translate разрешает (yes) или запрещает (no) перевод содержимого тега.
  • align задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left), по правому краю (right), по центру (center) или по ширине (justify). Для изображений (тег <img>) также доступно выравнивание по верхней границе самого высокого элемента строки (top), по нижней границе (bottom), а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.

Стоит иметь в виду, что использовать атрибут align не рекомендуется, а выравнивать текст лучше с помощью CSS.

Пример использования атрибутов

В качестве примера рассмотрим строку HTML-кода:

      <p contenteditable=”true”>Этот текст можно редактировать</p>

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

Разберём каждый элемент строки.

<p> — открывающий тег контейнера, хранящего абзац.

</p> — закрывающий тег.

Между символами > и < расположен текст Этот текст можно редактировать. Это — надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.

contenteditable=”true” — это и есть атрибут и его значение. Помните, как в школе: x=3. Так и здесь: contenteditable=”true”. Атрибут contenteditable задаёт, сможет ли пользователь редактировать содержимое элемента, значение true, написанное в кавычках через знак равно, редактирование разрешает:

      Атрибут=”значение”
      contenteditable=”true”

Полезные ссылки:

HTML-атрибутов


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


Атрибуты HTML

  • Все элементы HTML могут иметь атрибуты
  • Атрибуты предоставляют дополнительную информацию об элементах
  • Атрибуты всегда указываются в стартовом теге
  • Атрибуты обычно представлены парами имя / значение, например: name = «value»

Атрибут href

Тег определяет гиперссылку.В href Атрибут указывает URL-адрес страницы ссылка идет на:

Вы узнаете больше о ссылках в наших HTML-ссылках. глава.


Атрибут src

Тег используется для встраивания изображение на HTML-странице. Атрибут src указывает путь к отображаемому изображению:

Есть два способа указать URL в src атрибут:

1. Абсолютный URL-адрес — Ссылки на внешнее размещенное изображение. на другом сайте.Пример: src = «https://www.w3schools.com/images/img_girl.jpg».

Примечания: Внешние изображения могут быть защищены авторским правом. Если вы это сделаете не получить разрешение на его использование, вы можете нарушить законы об авторских правах. В кроме того, вы не можете управлять внешними изображениями; это может быть внезапно удалено или измененный.

2. Относительный URL — ссылка на изображение, размещенное в веб-сайт. Здесь URL-адрес не включает имя домена. Если URL начинается без косой черты он будет относиться к текущей странице.Пример: src = «img_girl.jpg». Если URL-адрес начинается с косой черты, он будет относиться к домену. Пример: src = «/ images / img_girl.jpg».

Совет: Почти всегда лучше использовать относительные URL-адреса. Они не сломается, если поменять домен.


Атрибуты ширины и высоты

Тег также должен содержать ширина и атрибуты height , которые определяют ширину и высота изображения (в пикселях):


Атрибут alt

Требуемый атрибут alt для тег определяет альтернативный текст для изображения, если изображение по каким-либо причинам не может быть отображено.Это может быть связано с медленное соединение, или ошибка в атрибуте src , или если пользователь использует экран читатель.

Пример

Посмотрите, что произойдет, если мы попытаемся отобразить несуществующее изображение:

Девушка
  с курткой

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

Вы узнаете больше об изображениях в нашей главе «Изображения HTML».



Атрибут стиля

Атрибут стиля используется для добавления стилей в элемент, например цвет, шрифт, размер и т. д.

Вы узнаете больше о стилях в нашей главе «Стили HTML».


Атрибут lang

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

В следующем примере в качестве языка указан английский:






Коды стран также можно добавить к коду языка в lang атрибут.Итак, первые два символа определяют язык HTML-страницы, а последние два символа определяют страну.

В следующем примере в качестве языка указан английский, а в качестве языка — США. страна:






Вы можете увидеть все языковые коды в нашем Справочник по языку HTML.


Атрибут заголовка

Атрибут title определяет некоторые дополнительные информация о элемент.

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


Мы рекомендуем: всегда использовать строчные атрибуты

Стандарт HTML не требует имен атрибутов в нижнем регистре.

Атрибут заголовка (и все другие атрибуты) можно писать в верхнем или нижнем регистре. например заголовок или заголовок .

Однако W3C рекомендует атрибутов нижнего регистра в HTML, а требует атрибуты нижнего регистра для более строгих типов документов, таких как XHTML.

В W3Schools мы всегда используем имена атрибутов в нижнем регистре.


Мы предлагаем: всегда указывать значения атрибутов

Стандарт HTML не требует заключения в кавычки значений атрибутов.

Однако W3C рекомендует кавычек в HTML, а требует котировок для более строгие типы документов, такие как XHTML.

Хорошо:

Посетите наше руководство по HTML

Плохо:

Посетите наше руководство по HTML

Иногда приходится использовать кавычки. В этом примере не будет отображаться атрибут title правильно, потому что он содержит пробел:

В W3Schools мы всегда используем кавычки вокруг значений атрибутов.


Одинарные или двойные кавычки?

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

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

Или наоборот:


Краткое содержание главы


Упражнения HTML

Проверьте себя упражнениями

Задание:

Добавьте «всплывающую подсказку» к абзацу ниже с текстом «О W3Schools».

W3Schools — это сайт веб-разработчиков.


Отправить ответ »

Начало упражнения


Ссылка на атрибут HTML



HTML-заголовков


Заголовки HTML — это заголовки или субтитры, которые вы хотите отображать на веб-странице.



HTML-заголовки

Заголовки

HTML определяются с помощью тегов

.

определяет наиболее важный заголовок.
определяет наименее важный заголовок.

Пример

Заголовок 1


Заголовок 2


Заголовок 3


Заголовок 4

Заголовок 5

Заголовок 6

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

Примечание. Браузеры автоматически добавляют пробелы (поля) до и после заголовка.


Заголовки важны

Поисковые системы используют заголовки для индексации структуры и содержания ваших веб-страниц.

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

заголовки должны использоваться для основных заголовков, за которыми следуют заголовки

, затем менее важные

и т. Д.

Примечание: Используйте заголовки HTML только для заголовков. Не используйте заголовки для создания текста BIG или жирный .


Большие заголовки

Каждый заголовок HTML имеет размер по умолчанию.Однако вы можете указать размер для любого заголовка. с атрибутом стиля , используя свойство размера шрифта CSS :



Упражнения HTML


Ссылка на тег HTML

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

W3Schools содержит дополнительную информацию об этих тегах и их атрибутах.

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

до

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


Ссылка: полезные теги HTML и их атрибуты

Тег тела и атрибуты
... Содержит просматриваемую часть документа
Устанавливает цвет фона в шестнадцатеричном коде
Устанавливает изображение в качестве фона страницы (обоев)
Задает цвет обычного текста в шестнадцатеричном коде
< BODY link = "color"> Задает цвет по умолчанию для непосещенных ссылок в шестнадцатеричном коде
Задает цвет ссылок при нажатии в шестнадцатеричном коде
Определяет цвет следующих ссылок в шестнадцатеричном коде
Тег шрифта и атрибуты
... Изменяет атрибуты шрифта для текста в тегах
... Устанавливает размер шрифта от 1 до 7 , с 1 наименьшим и 7 наибольшим
... Устанавливает начертание шрифта
. .. Устанавливает цвет шрифта с использованием шестнадцатеричного кода
Тег изображения и атрибуты
Встраивает изображение в документ в месте расположения tag
text Добавляет изображение с текстовым описанием
text Выравнивает изображение по левому, правому, центральному, нижнему или верхнему краям
 t ext Устанавливает размер границы вокруг изображения
 text Устанавливает высоту изображения
text Устанавливает ширину изображения
text Устанавливает горизонтальное поле для размещения вокруг изображения
text Устанавливает вертикальное поле для размещения вокруг изображения
text Обозначает изображение как карту изображений на стороне клиента
Тег привязки и атрибуты
... Указывает источник и место назначения гиперссылки
... Создает гиперссылку
... Ссылки на целевое местоположение на текущей странице
... Ссылки на целевое местоположение на странице за пределами вашего сайта
... Устанавливает целевое местоположение в документе
... Создает ссылку mailto

Необязательные атрибуты:
... Указывает, где должен быть размещен связанный документ
... Устанавливает связь между связанным документом и текущей страницей
... Устанавливает обратную связь между текущей страницей и связанным документом
Теги и атрибуты таблицы
...
Создает таблицу
Устанавливает размер границ ячеек
Устанавливает размер пространства между ячейками
Устанавливает расстояние между границей и содержимым ячейки
... Или или FOR >...
Устанавливает высоту таблицы
<ТАБЛИЦА или "%"> Устанавливает ширину таблицы
... Определяет ячейку данных таблицы
Устанавливает ячейку для охвата столбцов
Устанавливает ячейку для охвата строк
Запрещает перенос строк внутри ячейки
... Определяет заголовок таблицы с полужирным шрифтом и центрированными данными таблицы
Определяет строку таблицы
Выравнивает содержимое строки или ячейки по левому краю, справа или по центру
Устанавливает вертикальное выравнивание строки или ячейки по верхнему, среднему или нижнему краю
Теги и атрибуты фрейма
... Определяет макет подразделов в главном окне браузера
Определяет строки в наборе фреймов
Определяет столбцы в наборе фреймов
... Предоставляет альтернативное содержимое для браузеров, не поддерживающих фреймы
Определяет внешний вид и содержимое одного кадра
Обозначает фрейм для таргетинга другими фреймами
< FRAME marginwidth = "#"> Устанавливает ширину поля рамки
Устанавливает высоту поля рамки
Создает полосу прокрутки фрейма
Запрещает изменение размера фрейма
Теги и атрибуты формы
Создает контейнер для всех элементов формы
Указывает путь скрипта для обработки ввода из формы
< FORM method = "get | post"> Указывает браузеру, как взаимодействовать с формой URL.
Определяет, какие типы MIME поддерживаются сервером, обрабатывающим form
Определяет, какие наборы символов поддерживаются сервером, обрабатывающим форму.
Определяет формат отправленных данных
Определяет каждый пункт меню
Создает раскрывающееся меню
Создает флажок
Скрывает поле от просмотра
Создает изображение, которое действует как кнопка «Отправить»
Создает единицу поле пароля
Создает переключатель
Создает однострочное текстовое поле
Создает кнопку «Отправить» (форма отправки)
Создает кнопку сброса (чистая форма)

Справка по атрибутам HTML — HTML: Hyp Язык разметки erText

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