Подробное описание работы тегов html. Основные HTML-теги
Атрибуты задаются в начальном тэге элемента и состоят из имени и значения , которые отделяются друг от друга знаком равно (=). Например в атрибуте href="http://www.сайт/" href является именем, а http://www.сайт/ значением.
HTML-теги могут содержать один или несколько атрибутов. Атрибуты добавляются в тег для того, чтобы информировать браузер о том, как данный тег должен отображаться в html-документе.
Атрибут titleРассмотрим следующий пример:
В этом примере используется тег , который предназначен для обозначения аббревиатуры или акронима. В начальном теге элемента дополнительно был добавлен атрибут. Этот атрибут содержит заголовок для элемента.
Имя атрибута title . В этом примере, мы дали ему значение Язык гипертекстовой разметки .
Атрибут title может (необязательно) использоваться в любом HTML - элементе, чтобы предоставить дополнительную информацию о содержимом элемента.
При использовании атрибута title, большинство браузеров будет отображать его значение как "всплывающую подсказку", когда пользователь наводит указатель мыши на элемент.
Атрибут altВы уже знаете, что изображения вставляются в Web-страницы с помощью одинарного тега . Атрибут alt добавляется внутрь тera и определяет для добавленноrо на WеЬ-страницу rpaфическоrо элемента альтернативный текст. Этот текст называется альтернативным, поскольку может отображаться на экране как альтернатива самому изображению.
В следующем примере вы увидите, как браузер работает с атрибутом alt, когда появляется «отсутствующее» изображение. Если рисунок не может быть найден или по какой-то причине не загружается, вместо него выводится значение атрибута alt. Поменяйте имя файла с изображением с orange.jpg на pencil.jpg. На самом деле такого файла не существует, поэтому вы получите «отсутствующее» изображение.
Атрибут hrefВы можете добавить сразу несколько атрибутов к элементу.
Вот пример сложения двух атрибутов к элементу (который используется для создания гиперссылки на другую веб - страницу).
Пример HTML: Попробуй сам HTML TutorialsАтрибут href определяет расположение веб - страницы, на которую ведет ссылка.
Мы также используем атрибут title для того, чтобы обеспечить некоторую консультационную помощь для пользователя в виде всплывающей подсказки.
Указывать атрибуты можно только внутри открывающих тегов и если атрибутов несколько, то между ними ставится пробел. При этом нельзя в одном теге задавать два одинаковых атрибута, даже если у них разные значения, то есть дублировать их запрещено. Атрибуты, как и теги, нечувствительны к регистру, то есть их допустимо писать заглавными и строчными буквами. Значения атрибутов можно брать в необязательные двойные (" ") или одинарные кавычки(" ").
Иногда бывает необходимо использовать кавычки. В этом примере атрибут заголовка не будет отображаться правильно, так как в значении атрибута содержатся пробелы:
Одинарные или двойные кавычки?Чаще всего в HTML используются "двойные кавычки", но вы можете использовать и "одинарные". Иногда вам придется использовать одинарные кавычки, если в значении есть часть, которая отдельно должна быть заключена в кавычки:
HTML
Можно наоборот:
HTML
Общие атрибутыНиже представлен список некоторых атрибутов, которые стандартны для большинства html-элементов:
align | right, left, center | Горизонтальное выравнивание тегов |
valign | top, middle, bottom | Вертикальное вырвнивание тегов внутри HTML-элемента. |
background | URL | Расположение фонового изображения |
id | Уникальное имя | Уникальное имя для использования с каскадными таблицами стилей. |
class | правило класса или стиль класса | Классифицирует элемент для использования с каскадными таблицами стилей. |
width | Числовое значение | Определяет ширину таблиц, изображений или ячеек таблицы. |
height | Числовое значение | Определяет высотуу таблиц, изображений или ячеек таблицы. |
title | Текст подсказки | Текст, отображаемый во всплывающей подсказке. |
Полный список всех атрибутов для каждого элемента HTML, указан в нашем справочнике: HTML Атрибуты.
Задачи Первое итоговое заданиеВы познакомились с тегами, необходимыми для создания простейшей HTML-страницы, а также с атрибутами и их значениями, которые очень важны для корректного отображения документа, оптимизации и продвижения в поисковиках.
Пришло время повторить изученное и выполнить несложные задания:
Всплывающая подсказка- Реши сам »
Сделайте всплывающую подсказку с текстом "Хороший сайт", который появляется когда вы наводите указатель мыши на абзац, как показано на рис. 1.
Всплывающая подсказка
Title="Хороший сайт">сайт - сайт для разработчиков.
Размеры изображения- Реши сам »
Измените размер изображения до 200 пикселей в ширину и 150 пикселей в высоту.
Размеры изображения
Размеры изображения
HTML - язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги - это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTMLНиже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
Комментарий. | |||||||||||||||||||||||||||||||||||||||
Определяет тип документа. | |||||||||||||||||||||||||||||||||||||||
Ссылка, гиперссылка, якорь. | |||||||||||||||||||||||||||||||||||||||
Определяет текст как аббревиатуру. | |||||||||||||||||||||||||||||||||||||||
Контактная информация автора или владельца документа. | |||||||||||||||||||||||||||||||||||||||
Определяет область на карте-изображении | |||||||||||||||||||||||||||||||||||||||
Статья | |||||||||||||||||||||||||||||||||||||||
Контент в стороне (содержимое не является основным на странице по смыслу) | |||||||||||||||||||||||||||||||||||||||
Позволяет вставить воспроизводимый аудио файл. | |||||||||||||||||||||||||||||||||||||||
Полужирный текст. | |||||||||||||||||||||||||||||||||||||||
Задает базовый URL или аттрибут target для относительных ссылок в документе. | |||||||||||||||||||||||||||||||||||||||
Область, где написание текста может имееть другое направления. | |||||||||||||||||||||||||||||||||||||||
Устанавливает направление написания текста. В отличии от направление указывается физическое направление | |||||||||||||||||||||||||||||||||||||||
Цитата. | |||||||||||||||||||||||||||||||||||||||
Указывает область body документа. | |||||||||||||||||||||||||||||||||||||||
Перенос строки. | |||||||||||||||||||||||||||||||||||||||
Кликабельная кнопка | |||||||||||||||||||||||||||||||||||||||
Используется для рисовании графики с помощью скриптов | |||||||||||||||||||||||||||||||||||||||
Подпись таблицы. | |||||||||||||||||||||||||||||||||||||||
Сноска на название материала. | |||||||||||||||||||||||||||||||||||||||
Используется для вставки компьютерного кода в текстовом виде. | |||||||||||||||||||||||||||||||||||||||
Задает характеристики колонок в таблице. | |||||||||||||||||||||||||||||||||||||||
Определяет группу из одной или более колонок таблицы для форматирования. | |||||||||||||||||||||||||||||||||||||||
Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле | |||||||||||||||||||||||||||||||||||||||
Определяет описание термина из тега в списке терминов | |||||||||||||||||||||||||||||||||||||||
Текст, который удален в новой версии документа. | |||||||||||||||||||||||||||||||||||||||
Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть | |||||||||||||||||||||||||||||||||||||||
Указывает, что содержимое является термином. | |||||||||||||||||||||||||||||||||||||||
Определяет диалоговое окно или интерактивный элемент | |||||||||||||||||||||||||||||||||||||||
Блочный элемент - один из основных элементов верстки. | |||||||||||||||||||||||||||||||||||||||
Определяет список определений | |||||||||||||||||||||||||||||||||||||||
Название термина в списке определений | |||||||||||||||||||||||||||||||||||||||
выделенный по смыслу текст (обычно, текст выделенный курсивом). | |||||||||||||||||||||||||||||||||||||||
Контейнер для внешнего приложения | |||||||||||||||||||||||||||||||||||||||
Группа связанных элементов в форме | |||||||||||||||||||||||||||||||||||||||
Заголовок для элемента | |||||||||||||||||||||||||||||||||||||||
Определяет автономную группу из нескольких элементов (например картинка с подписью) | |||||||||||||||||||||||||||||||||||||||
Нижний колонтитул | |||||||||||||||||||||||||||||||||||||||
Определяет форму пользовательского ввода | |||||||||||||||||||||||||||||||||||||||
- | Заголовки HTML разного уровня: , , , , , . | ||||||||||||||||||||||||||||||||||||||
Указывает область head документа. | |||||||||||||||||||||||||||||||||||||||
Блок заголовка | |||||||||||||||||||||||||||||||||||||||
Горизонтальная линия - тематический разделитель. | |||||||||||||||||||||||||||||||||||||||
Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. | |||||||||||||||||||||||||||||||||||||||
Выделяет текст курсивом. | |||||||||||||||||||||||||||||||||||||||
Определяет встроенный фрейм | |||||||||||||||||||||||||||||||||||||||
Изображение, картинка. | |||||||||||||||||||||||||||||||||||||||
Поле для ввода | |||||||||||||||||||||||||||||||||||||||
Текст, который был добавлен в новой версии документа. | |||||||||||||||||||||||||||||||||||||||
Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. | |||||||||||||||||||||||||||||||||||||||
Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода. | |||||||||||||||||||||||||||||||||||||||
Заголовок элементов | |||||||||||||||||||||||||||||||||||||||
Элемент списка | |||||||||||||||||||||||||||||||||||||||
Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS) | |||||||||||||||||||||||||||||||||||||||
Основной контент | |||||||||||||||||||||||||||||||||||||||
Контейнер для . Определяет пользовательскую карту на изображении | |||||||||||||||||||||||||||||||||||||||
Выделенный текст (обычно с помощью подсветки фона). | |||||||||||||||||||||||||||||||||||||||
Контейнер для списка пунктов меню | |||||||||||||||||||||||||||||||||||||||
Определяет элементы, которые пользователь может вызвать из контекстного меню | |||||||||||||||||||||||||||||||||||||||
Используется для определения мета-данных документа. | |||||||||||||||||||||||||||||||||||||||
Измеритель значений в заданном диапазоне | |||||||||||||||||||||||||||||||||||||||
Контейнер для навигационных элементов | |||||||||||||||||||||||||||||||||||||||
Альтернативный контент для пользователей, отключивших скрипты | |||||||||||||||||||||||||||||||||||||||
Определяет встроенный объект | |||||||||||||||||||||||||||||||||||||||
Определяет нумерованный список | |||||||||||||||||||||||||||||||||||||||
Определяет группу связанных вариантов в выпадающем списке. Дает название группу | |||||||||||||||||||||||||||||||||||||||
Параметр (вариант выбора) в выпадающем списке | |||||||||||||||||||||||||||||||||||||||
Результат вычислений | |||||||||||||||||||||||||||||||||||||||
|
Абзац. | ||||||||||||||||||||||||||||||||||||||
Задает параметры для встроенных объектов | |||||||||||||||||||||||||||||||||||||||
Контейнер для нескольких изображений | |||||||||||||||||||||||||||||||||||||||
Предварительно отформатированный текст. | |||||||||||||||||||||||||||||||||||||||
Индикатор выполнения (прогресса) | |||||||||||||||||||||||||||||||||||||||
Цитата в тексте. | |||||||||||||||||||||||||||||||||||||||
Альтернативный текст, если браузер не поддерживает тег . | |||||||||||||||||||||||||||||||||||||||
Аннотация к содержимому тега . | |||||||||||||||||||||||||||||||||||||||
Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). | |||||||||||||||||||||||||||||||||||||||
Перечеркнутый текст. | |||||||||||||||||||||||||||||||||||||||
Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). | |||||||||||||||||||||||||||||||||||||||
Определяет скрипт или подключение скрипта из внешнего ресурса. | |||||||||||||||||||||||||||||||||||||||
Раздел | |||||||||||||||||||||||||||||||||||||||
Определяет выпадающий список | |||||||||||||||||||||||||||||||||||||||
Текст шрифтом меньшего размера. | |||||||||||||||||||||||||||||||||||||||
Определяет ресурс для тегов , и . | |||||||||||||||||||||||||||||||||||||||
Строчный элемент. | |||||||||||||||||||||||||||||||||||||||
Текст, выделенный по значению. Обычно отображается полужирным. | |||||||||||||||||||||||||||||||||||||||
Определяет контейнер для определения стилей документа | |||||||||||||||||||||||||||||||||||||||
Отображает текст в виде нижнего индекса. | |||||||||||||||||||||||||||||||||||||||
Заголовок внутри тега | |||||||||||||||||||||||||||||||||||||||
Отображает текст в виде верхнего индекса. | |||||||||||||||||||||||||||||||||||||||
|