Глобальные атрибуты html - список атрибутов. сlass, style, title, data атрибуты тегов

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

Каждый 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.

Как создать ссылку при помощи тега ?

Вот так выглядит сам код ссылки:

<a href=»Здесь адрес ссылки»>Название ссылки</a>

Данный тег парный, у него есть открывающий тег — <a> и закрывающий — </a>, они отличаются между собой только косой чертой. Между данными тегами помещается текст который будет отображаться на ссылке.

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

Пример настоящей ссылки:

<a href=»https://nischenko.ru/»>Как создать сайт</a>

Раздел HEAD.

Раздел HEAD содержит техническую информацию о веб-странице — заголовок, ее описание и ключевые слова для поисковых машин, данные об авторе документа, времени создания страницы, базовом адресе страницы, кодировке документа и т. д. Единственным обязательным тегом в разделе HEAD является тег <title>.

Текст, расположенный между тегами <title> и </title>, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, иначе он не полностью поместится в заголовке веб-браузера:
<title>Заголовок страницы</title>

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

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

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

<meta name="description" content="Описание содержимого страницы">
<meta name="keywords" content="Ключевые слова через запятую">

	В разделе HEAD могут быть расположены также теги <base>, <link>, <script>, <style> и другие. Все эти теги мы рассмотрим в дальнейшем по мере изучения материала.

HTML Введение
HTML Базовые теги

Список новых тегов в HTML5

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

<main> – используется для определения основного контента страницы. Он дает понять поисковому боту, что здесь содержится главный контент.
<header> – «шапка» страницы или раздела, в которой обычно располагается навигация по сайту. Но так же этот тег можно использовать в других секция сайта, определяя в нем заголовок этой самой секции.
<nav> – задает навигацию по сайту.
<section> – обычно применяется для группировки разделов. Например, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др.
<article> – может быть пост на форуме, статья в журнале или газете, заметка в блоге, сообщение пользователя или другая независимая контент-единица.
<aside> – определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации.
<audio> – добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице.
<video> – добавляет, воспроизводит и управляет настройками видеозаписи на веб-странице.
<canvas> – создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.
<footer> – задает «подвал» сайта или раздела, в нем может располагаться имя автора, дата документа, контактная информация или дополнительная навигация по сайту.
<command> – устанавливает команду, срабатывающую при активации элемента (нажатием или сочетанием клавиш). Элемент может иметь вид кнопки, переключателя или флажка и должен быть вложен в элемент <menu>, в противном случае он не будет показан.
<datalist> – создает список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.
<details> – используется для хранения информации, которую можно скрыть или показать по требованию пользователя. По умолчанию содержимое тега не отображается, для изменения статуса применяется атрибут open.
<embed> – используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает. Как правило, такие объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.
<hgroup> – используется для группирования заголовков веб-страницы или раздела. Внутри располагаются теги заголовков от <h1> до <h6>.
<keygen> – отвечает за генерацию пары ключей (открытый и закрытый), которые используются для шифрования и расшифровки данных форм, а также для создания и проверки цифровой подписи. Открытый ключ отправляется на сервер вместе с данными формы, а закрытый сохраняется на локальном устройстве пользователя.
<mark> – помечает текст как выделенный. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью стилей. В браузере Chrome и Firefox фоновый цвет текста внутри <mark> выделяется желтым цветом.
<meter> – используется для вывода значения в некотором известном диапазоне. Используется преимущественно для отображения числовых значений: например, количества результатов поиска, объема жидкости, давления и др.
<output> – определяет область, в которую выводится информация, преимущественно с помощью скриптов.
<progress> – используется для отображения прогресса завершенности задачи. Изменение значения происходит через JavaScript.
<ruby> – используется вместе с <rt> и <rp>. Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста. Такая форма записи преимущественно используется для идеографической письменности вроде китайского языка, но может применяться и для других языков, если требуется написать один текст над другим.
<time> – помечает текст внутри тега <time> как дата, время или оба значения. Может указываться непосредственно внутри контейнера <time> либо задаваться через атрибут datetime.
<wbr> — указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.

Обновленная декларация doctype

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

Декларация сообщает браузеру, на какой версии языка разметки написана текущая страница. Она делает это с помощью шаблона DTD (Document Type Definition — определение типа документа). DTD специфицирует правила, используемые языком разметки, благодаря чему браузеры корректно отображают контент.

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

Таблица 1. Doctype-декларации и их возможности

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

К счастью, в спецификации HTML5 декларация doctype существенно упрощена. И действительно, в HTML5 имеется лишь одна такая декларация. Чтобы ваш браузер осуществлял отображение с помощью спецификации HTML5, добавьте декларацию doctype, показанную в .

Структура HTML-элементов

Есть разница в понятиях тег, мета-тег, атрибут и элемент.

HTML-код выстраивается из отдельных элементов:

Тегов.
Мета-тегов.
Атрибутов с дополнительными характеристиками.

Тегом называется элемент языка HTML, разграничивающий начало и конец элементов. Он влияет на текст, который находится между тегами, в соответствии с их свойствами. Мета-теги являются разновидностями тегов, которые нужны поисковым системам для анализа технической информации о веб-страницах (описание, ключевые запросы, кодировка, правила индексации страниц и пр.). Атрибутом называется дополнительная характеристика, применяемая к тегу или мета-тегу.

Например, на странице есть некий заголовок. Он обозначается в коде при помощи открывающего тега <h1> и закрывающего тега </h1>. К данному заголовку дополнительно применяется атрибут align = “left“, выравнивающий заголовок по левой стороне веб-страницы. Для картинки используется тег <img>, добавляющий изображение на страницу. Атрибут alt необходим для добавления альтернативного описания картинки, если изображение по каким-то причинам не будет отображаться на странице сайта.

Атрибут http equiv предназначен для того, чтобы показать содержимое HTTP-заголовка. Meta http equiv дает поисковым системам много полезной информации — имя и статус сервера, ответ сервера о состоянии страницы (200, 404 и пр.). Этот же тег можно использовать для запрета индексации страницы.

HTML Упражнения

HTML Атрибуты

Ниже приведен алфавитный список некоторых атрибутов, часто используемых в HTML, о которых вы узнаете больше в этом учебнике:

Атрибут	Описание
alt	Определяет альтернативный текст для изображения, когда изображение не может быть отображено
disabled	Указывает, что входной элемент должен быть отключен
href	Указывает URL-адрес (веб-адрес) для ссылки
id	Указывает уникальный идентификатор элемента
src	Указывает URL-адрес (веб-адрес) изображения
style	Определяет встроенный CSS стиль для элемента
title	Определяет дополнительную информацию про элемент (отображается как всплывающая подсказка)

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

Вопросы для самоконтроля

Что такое HTML-атрибуты?
Зачем нужны атрибуты HTML-элементам?
Где указываются атрибуты?
Какие бывают атрибуты?
Какой атрибут определяет адрес ссылки?
Какой атрибут указывает источник изображения?
Какие атрибуты определяют ширину и высоту элемента?
Какой атрибут определяет альтернативный текст?
Какой атрибут используется для определения стиля элемента?
С помощью какого атрибута объявлется язык веб-страницы?
С помощью какого атрибута указывается всплывающая подсказка для HTML-элемента?
В каком регистре рекомендуется писать имена атрибутов?
Нужно ли писать атрибуты в кавычках?
Какие кавычки — одинарные или двойные — рекомендуется писать вокруг значений атрибутов?

Эволюция HTML. Что отличает HTML и HTML5?

Начиная с первых дней, HTML прошёл невероятную эволюцию. W3C постоянно публикует новые версии и обновления, в то время как исторические вехи также получают выделенные имена.

HTML4 (в наши дни обычно называемый «HTML») был опубликован в 1999 году, а последняя крупная версия вышла в 2014 году. HTML5 — это обновление, которое ввело множество новых функций для языка.

Одной из наиболее ожидаемых особенностей HTML5 является поддержка встраивания аудио и видео. Вместо использования Flash-плеера мы можем просто вставлять видео и аудио-файлы на наши веб-страницы с помощью новых тегов <audio> </audio> и <video> </video>. Он также включает встроенную поддержку масштабируемой векторной графики (SVG) и MathML для математических и научных формул.

HTML5 также ввёл несколько семантических улучшений. Новые семантические теги информируют браузеры о значении контента, что приносит пользу как читателям, так и поисковым системам.

Наиболее популярными семантическими тегами являются <article> </article>, <section> </section>, <aside> </aside>, <header> </header> и <footer> </footer>. Чтобы найти уникальные отличия, попробуйте проверить наше подробное сравнение HTML и HTML5.

Как можно добавлять атрибуты js в тег примеры

И скрипт, который обработает нажати и добавит атрибут нашему тегу:

button_id_1 .onclick = function()<

id_input.value=»Данное значение будет видно, после того, как добавится атрибут value»;

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

button_id_1 .onclick = function()<

id_input.value=»Данное значение будет видно, после того, как добавится атрибут value»;

Результат работы скрипта, который добавляет атрибут элементу:

Может ли класс(class) быть атрибутом как id!? Конечно!

У нас точно такая же ситуация с добавлением атрибута класса, мы также уже касались темы добавления атрибута класса к тегу/элементу.

Код добавления атрибута placeholder в тег

button_id_2 .onclick = function()<

id_input_2.placeholder=»Данное значение будет видно, после того, как добавится атрибут placeholder»;

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

добавить атрибут элементу

Добавить атрибут с помощью setAttribute в тег

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

Для того, чтобы увидеть добавление атрибута с помощью setAttribute, вы должны нажать на кнопку!

Нажми на меня чтобы добавить атрибут с помощью setAttribute!

javascript добавить атрибут ко всем ссылкам

Сделаем кнопку, чтобы было видно добавление атрибутов ссылкам :

Добавим атрибут style с цветом красный — red

Добавим вторую кнопку изменим функцию и цвет, пусть это будет зеленый — green.

Похожие публикации:

Зачем нужны метатеги

Помимо тега <title>, в <head> располагаются теги типа <meta>, которые предназначены для браузеров и поисковых систем. Корректное использование метатегов позволяет увеличить привлекательность сниппетов, управлять индексацией страниц. Также позволяет правильно отображать страницы сайта пользователям. Далее рассмотрим метатеги: description, robots, charset, viewport и keywords.

Meta description

Текст метатега description — это краткое описание контента страницы. Информация из этого тега напрямую не влияет на ранжирование страницы. При этом большинство поисковых систем использует содержимое метатега description при образовании сниппета. Цепляющий description, который к тому же отвечает на запрос пользователя, поможет привлечь человека на ваш сайт.

Сниппет — фрагмент текста, который представляет сайт в результатах поисковой выдачи. В декабре 2017 года Google расширил длину сниппетов с 160 до 320 символов с пробелами. Для кириллицы следует ориентироваться на длину в 280 символов. Это значение получили ребята из Serpstat, изучив 1 млн сниппетов.

Meta robots

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

Значение атрибута «name» указывает, что директива актуальна для всех роботов. Вы также можете закрыть доступ только одному из них. Для этого в атрибуте «name» следует указать нужного робота, например, основного робота Google — «googlebot» или Яндекса — «yandex».

Основные значения атрибута content:

index — страница доступна для индексации;
noindex — запрет добавления страницы в индекс;
follow — ссылки на странице доступны к индексации и открыты для передачи ссылочного веса;
nofollow — сигнализирует роботу о том, что переходить по ссылкам и передавать ссылочный вес запрещено;
all — инструкция, аналогичная «index, follow», противоположная настройка: «none».

Наличие метатега robots в коде сайта не обязательно. Если meta robots отсутствует, страница открыта для индексации и переходить по ссылкам разрешено.

Meta charset

Метатег с атрибутом «charset» указывает на тип кодировки документа. Он применяется для правильного отображения текста страницы браузером. Для операционной системы Windows и кириллицы используют значения атрибута «utf-8» или «windows-1251». Этот метатег следует размещать в самом начале блока <head> до элементов, которые содержат текст, включая тег <title>.

Пример кода:

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

Meta viewport

Метатег «viewport» сообщает браузеру, как следует обрабатывать размеры страницы, изменять ее масштаб под ширину экрана устройства, с которого выполнен переход. Meta viewport — один из пунктов внедрения адаптивного дизайна, когда для всех устройств используется один код с корректировкой по размеру экрана. Для корректного отображения контента сайта на любом устройстве, на всех страницах следует разместить следующий фрагмент кода:

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

Meta keywords

Правильно составленный метатег keywords должен содержать 5-7 ключевых слов, описывающих основное содержание страницы. Раньше он сильно влиял на ранжирование по заданным в нем ключевым словам, но утратил значимость из-за действий недобросовестных вебмастеров и постоянного развития поисковых систем. Тем не менее, для метатега keywords еще не все потеряно. Так, в отчете «Яндекс и Google: факторы ранжирования в 2017 году» от «Ашманов и партнеры» представлен вывод о влиянии метатега на продвижение в Google.

Атрибуты

Элементам DOM, с другой стороны, соответствуют HTML-теги, у которых есть текстовые атрибуты.

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

Доступ к атрибутам осуществляется при помощи стандартных методов:

– проверяет наличие атрибута
– получает значение атрибута
– устанавливает атрибут
– удаляет атрибут

Эти методы работают со значением, которое находится в HTML.

Также все атрибуты элемента можно получить с помощью свойства , которое содержит псевдо-массив объектов типа .

В отличие от свойств, атрибуты:

Всегда являются строками.
Их имя нечувствительно к регистру (ведь это HTML)
Видны в (за исключением старых IE)

Рассмотрим отличия между DOM-свойствами и атрибутами на примере HTML-кода:

Пример ниже устанавливает атрибуты и демонстрирует их особенности.

При запуске кода выше обратите внимание:

– первая буква имени атрибута написана в верхнем регистре, а в HTML – в нижнем, но это не имеет значения, так как имена нечувствительны к регистру.
Мы можем записать в атрибут любое значение, но оно будет превращено в строку. Объекты также будут автоматически преобразованы.
После добавления атрибута его можно увидеть в элемента.
Коллекция содержит все атрибуты в виде объектов со свойствами и .

Первое итоговое задание [1-4]

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

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

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

Задание
Ответ
Реши сам »

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

Рис. 1

Задание
Ответ
Реши сам »

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

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

Задание
Ответ
Реши сам »

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

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

Задание
Ответ
Реши сам »

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

HTML Элементы
HTML Фоматирование