Как прописать атрибут ALT к картинке правильно? Alt это описания к изображениям
Элемент (от англ. division - раздел, секция) является универсальным блочным элементом и предназначен для группирования элементов документа с целью изменения вида содержимого через стили. Для этого добавляется атрибут class или с именем класса или идентификатора.
Как и при использовании других блочных элементов, содержимое всегда начинается с новой строки, после него также добавляется перенос строки.
Синтаксис...
Закрывающий тегОбязателен.
ПримерDIV .block1 { width: 200px; background: #ccc; padding: 5px; padding-right: 20px; border: solid 1px black; float: left; } .block2 { width: 200px; background: #fc0; padding: 5px; border: solid 1px black; float: left; position: relative; top: 40px; left: -70px; } Почвообразовательный процесс физически иссушает монолит в полном соответствии с законом Дарси. В лабораторных условиях было установлено, что сушильный шкаф теоретически возможен. Выветривание, несмотря на внешние воздействия, однократно. Конкреция пространственно трансформирует пирогенный псевдомицелий, хотя этот факт нуждается в дальнейшей тщательной экспериментальной проверке.
Результат данного примера показан на рис. 1.
Рис. 1. Вид блоков, оформленных с помощью стилей
СпецификацияКаждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living ) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
× БраузерыВ таблице браузеров применяются следующие обозначения.
The HTML Content Division element ( ) is the generic container for flow content. It has no effect on the content or layout until styled using CSS.
The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
As a "pure" container, the element does not inherently represent anything. Instead, it"s used to group content so it can be easily styled using the class or attributes, marking a section of a document as being written in a different language (using the lang attribute), and so on.
| Flow content , palpable content. |
| Flow content . Or (in WHATWG HTML): If the parent is a element: one or more elements followed by one or more elements, optionally intermixed with and elements. |
| None, both the starting and ending tag are mandatory. |
| Any element that accepts flow content . Or (in WHATWG HTML): element. |
| Any |
| HTMLDivElement |
The align attribute is obsolete; do not use it anymore. Instead, you should use CSS properties or techniques such as CSS Grid or CSS Flexbox to align and position elements on the page.
Usage notes- The element should be used only when no other semantic element (such as or ) is appropriate.
Any kind of content here. Such as
,
| HTML Living Standard The definition of "" in that specification. |
Living Standard | No changes since the latest snapshot |
| HTML5 The definition of "" in that specification. |
Recommendation | Obsoleted align |
| HTML 4.01 Specification The definition of "" in that specification. |
Recommendation |
The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop Mobile | ||||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android Safari on iOS Samsung Internet | ||||||||||||
| Chrome Full support Yes | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | |||||||
| Chrome Full support Yes | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
- Semantic sectioning elements: , , , ,
- element for styling of phrasing content
Происхождение имени бога Дива может идти от cтарославянского слова «divъ», что дословно означает нечто чудесное, способное сильно удивить. Отсюда произошли и украинское «диво», болгарское «дивен» и другие слова в родственных славянских языках. Значение, вне зависимости от вариаций изначального корня, остаётся неизменным-это чудо.
Существует вероятность, что имя данного божества происходит от праиндоевропейского слова «deivos», что означает «бог». Похожими по звучанию и по смыслу выступают древнеиндийское слово «devas» и латинское «deus». В обоих случаях это «бог». Если учитывать, что у древних славян с праиндоевропейцами не только много общего в языковом понимании, но и по части религиозных убеждений. Поэтому
данная теория вполне может соответствовать реальности.
Если мы обратимся к вымершему авестийскому языку, то мы можем найти загадочно схожее по звучанию с Дивом слово «daeva», что в переводе означает злой дух. Подобные существа, встречаются в мифологии народов Кавказа, Сибири, Урала, Средней и Малой Азии. Это великаны, с человекоподобным видом, или с телом человека, но головой зверя. Подобным великанам приписываются разные злодеяния, в том числе и похищение красавиц с целью сожительства с ними и продолжения своего рода. В славянской мифологии Див не охарактеризован, как положительный персонаж, что вызывает некоторые сомнения. Нет и прямых упоминаний и о том, что Див был злым. У восточных славян Див, выступает в роли духа-предсказателя, способного принять облик птицы, в частности это филин или сова. Птица предвещает войну и сопровождает в сражении войско, и кружит над головами тех, кого неминуемо ждёт поражение.
Див — одна из загадок языческого прошлого. Кто это — мифический злодей, или светлый бог? До нас, увы, не дошли прямые доказательства, которые смогли бы полностью опровергнуть один из этих вариантов. У Дива есть несколько вариаций имени. Это Дый и Дий. Мы говорили уже о возможных вариантах происхождения этого имени. Допустим, что Див это если и не бог, то наделённая большой силой и властью мифическая фигура из славянского пантеона богов.
В источнике «Слово Святого Григория», указывается, что Див — это бог, властвующий на небе, и сила его и мощь в свете небесных светил. В другом источнике, в » Слове о полке Игореве», Див и вовсе предстаёт предвестником бед. Возможно, с течением времени и под влиянием разных инородных культур, образ Дия менялся и воспринимался по-разному разными поколениями. Возможно ещё деды почитали его, как бога, а уже их внуки считали того же Дия злым духом. Миграция кочевников, переселение разных племён неотвратимо несла за собой ассимиляцию и слияние местной культуры с пришедшей, что со временем могло разительно изменить исконные образы богов и других явлений.
В другом историческом источнике, «Беседа Григория богослова об испытании града», Див упоминается, как бог неба, а его жена Дивия — богиня земли и плодородия. Мифология древних народов пропитана дуалистической идеей создания мира, путём слияния мужского и женского начала. Здесь и возникает одна из теорий, которая бытует среди нынешних исследователей, касательно предназначения Дива, как бога. Возможно Див, почитался, как божество небесных вод — источника первичной силы, которая полилась с небес и оплодотворила земную твердь и зародила на ней жизнь.
Стоит уделить внимание ещё одному источнику «Летовник Георгия Амартола». В нём Дий представлен как, сын Крона (Хроноса), что царствовал в Асирии, и был известен, как каннибал, поедающий собственных детей. Согласно традициям и устоям персов, Дий был женат на сестре своей Ире и был у него брат Нина. В этом же источнике указывается, что некий Серух, привил вавилонянам почитание своих предков и героев, как богом, что было распространённым в эллинских государствах. Таким образом, те кто делал какие-либо открытия, или отличался своими деяниями в обществе, воспринимался как некто особенный, божественный. Дый упоминается, как бог дождя, что даёт отсылку о предположении его причастности к небесным водам в славянской мифологии.
Существует и совершенно иная версия, что Див был богом ночного неба. Стоит упомянуть, что у Амартола, Дыю, тому же Дию, приписывается двух полость «ов дыю жреть, а дроугый дивии». В славянской мифологии женой Дива выступает Дивия, которая почиталась как богиня ночного неба и луны. Можно предположить, что изначальную гермафродитную сущность Дыя, славяне расщепили на два божества: Дива и Дивию.
Див согласно этой версии, выступает и в роли Птицы-Див, и обитал он на небесах первозданных, которое было раньше, чем небо, скованное Сварогом. Родился Див от союза Великого Рода и небесной Козы Седуни, и был он братом Сварогу. Если обратиться, к Амартолу, то он указывает, что в честь Дыя, в древнем Египте в жертву приносился рогатый скот, в том числе и козы. Возможно именно отсюда и возникла идея о родстве со славянской козой Седуни.
После того, как Див своим копьём прикоснулся к тверди земной, и родился могучий Индра. А от Дивии, сестры своей у Дива родились, прекрасная Дива-Додола и красавец Чурила. Богу Диву так же приписывается тайная связь с женой бога Бармы, Тарусей. По легенде именно от этого союза пошёл народ, что породил Дивьих людей.
По этой теории Дый обитал в Уральских горах, и посылал дождь людям, для того чтобы полить поля и посевы. В услужении у него были великаны, Дивьи люди, что были его правнуками, от детей Таруси. Он требовал от них слишком много дани, и в конечном итоге великаны перестали почитать своего прародителя. Тогда в гневе Див, назвал себя богом ночного неба и ему стали поклоняться нечестивые: убийцы, воры и разбойники. Люди, что больше не получали от Дива дождя, попросили помощи у мудрого Велеса, что низверг тёмного Дива в Навий мир. Но Диву помог Вий, и он вернулся в свою обитель. Решив помириться с Велесом, Див пригласил бога-мудреца в свои покои, где предложил ему испить из чащи полной яда. В итоге Велес был отравлен и низвергнут в Навий мир, где обрёл свою супругу, дочь Вия — Ягиню. Есть предположения, что Вий не спроста помог Диву, дескать в зятья хотел Велеса заполучить.
В это же время сын Дива, Чурила вместе с великанами, одолел сварожичей. В наказание за дерзость Сварог запер великанов в самом сердце Уральских гор, а раскаявшегося Чурилу, что преподнёс Сварогу в подарок золото из тайных подземелий, взял себе в услужение. Вражда между Ирийскими богами и Дивом была окончена, и он снова стал светлым божеством.
). Создавалась одна большая таблица, которая потом делилась на несколько областей: заголовок, левый блок, правый блок, центр и низ. С появлением тега все вебмастера стали пользоваться им для создания "скелета" будущего сайта. Например, так может выглядеть структуру страницы сайта:
Синтаксис тега
...HTML тег является блочным элементом. Самым главным его атрибутом является class . С помощью него можно создавать блоки с нужными стилями CSS .
Пример . Использование блока div
.primer { width : 300px ; background : #9affe8 ; padding : 5px ; padding-right : 25px ; border : solid 1px orange ; float : right ; } Пример использования блока divПример использования блока div
Это элементарный пример использования тега . Его возможности уходят далеко за рамки этого примера. Например, с помощью этого тега можно создавать красивые меню (см. как сделать выпадющее меню на css »)
Теперь рассмотрим подробно все атрибуты тега div .
Атрибуты и свойства тега- align="параметр"
- задает выравнивание. Может принимать следующие значения:
- center - выравнивание текста по центру
- left - выравнивание текста по левому краю
- right - выравнивание текста по правому краю
- justify - выравнивание по левому и правому краю
- title="текст" - всплывающая подсказка к тегу. Почти никогда не используется.
- class="имя" - определяет принадлежность к классу.
- style="стили через запятую" - возможность задать стили.
Давайте рассмотрим пару практических примеров с тегом .
Пример. Вывод контента по центру с использованием div .center { text-align : center ; } Этот текст будет по центруПреобразуется на странице в следующее:
Этот текст будет по центру
Теперь вместо тега можно писать и текст будет выведен по центру. Это соответствует требования стандарта HTML (валидация сайта).
Пример. Красивая рамка с div .ramka { background : #eeeee5 ; border : 1px dashed #abab9a ; padding : 5px ; font : 8pt Tahoma ; color : #2c2c2c ; } Вывод текста в красивом блокеПреобразуется на странице в следующее:
Вывод текста в красивом блоке
Пример. Реализация тизеров на сайтеУдобство тега div состоит в том, что он размещается блочно относительно друг друга. Практическим примером является вывод подряд идущих блоков, которые будут автоматически переноситься на новую строку при достижении конца.
.block { padding : 0 ; font-size : 14px ; } .block .element { border : solid 1px #C7CADD ; margin : 0px 3px 3px 0px ; padding : 0px 0px 0px 0px ; float : left ; height : 200px ; width : 150px ; } .block .element:hover { border : solid 1px #000 ; margin : 0px 3px 3px 0px ; padding : 0 ; float : left ; height : 200px ; width : 150px ; background : #FFFAE7 ; } .block .img { text-decoration : none ; } .block .img img { margin : 5px 0px 0px 5px ; padding : 0 ; width : 140px ; height : 130px ; } .block .text { text-align : center ; padding : 0 ; margin : 0 ; }Таких элементов можно сделать множество. В итоге Вы получаете что-то подобное.
В сегодняшней статье я хочу рассмотреть, почему всё-таки стоит заполнять HTML-атрибут Alt у картинок, чем он отличается от атрибута Title. Материал рассчитан на новичков и начинающих веб-мастеров, которых интересует вопрос, зачем и почему нужно заполнять атрибут Alt. В конце статьи я подготовил ответы на популярные вопросы по этим атрибутам. Начнём с основ.
Что такое атрибут Alt?Alt у картинки – это альтернативный источник информации для пользователей, у которых по какой-то причине (слабый интернет, отключено отображение картинок и т. д.) не выводятся изображения на странице. Выводится он в виде текста там, где должна быть картинка.
Рассмотрим на примере.
Для примера я взял фото с сайта обоев для рабочего стола. Основной контент страницы – изображения.
После того, как я отключил отображение картинок в браузере, вся графика на странице перестала отображаться и можно увидеть альтернативное описание изображения.
С его помощью мы понимаем, что находится на странице. Кроме того, этот атрибут полезен не только пользователю, он также помогает понять поисковому роботу, что изображено на картинке. И Google, и Яндекс используют Alt как один из критериев ранжирования при поиске по картинкам.
Появляется следующий вопрос: что же нужно добавлять в Alt, чтобы он был максимально полезным и для пользователя, и для поисковика?
Как правильно заполнить атрибут Alt для картинокЧто понять, как правильно заполнить атрибут Alt, рассмотрим следующий пример: у нас есть интернет-магазин зоотоваров, и мы хотим прописать Alt для карточки товара с «мячиком для собак».
Есть несколько вариантов заполнения атрибута:
Вариант 2. Пишем в Alt «Собака с мячиком во рту». В этом случае мы описываем саму картинку, но нужно обратить внимание, что запрос «Собака с мячиком во рту» – информационный. Для описания изображения интернет-магазина он не подойдёт.
Вариант 3. Alt «Мячик для собак» – этот вариант нам больше подходит, но, так как мячиков в магазине может быть много, лучше уточнить запрос.
Вариант 4. Alt «Мячик для собак Humunga Chomp» – этот вариант оптимален для нас. Атрибут содержит название товара и его производителя. Если такого товара много, можно расширить Alt, используя цвет, название модели.
Вариант 5. Alt «Мячик для собак Humunga Chomp, игрушка Humunga Chomp, купить, недорого, Москва» – такой вариант может быть воспринят поисковой системой как спам и нужного результата не принесёт.
Из этих примеров следует, что атрибут Alt:
- должен быть содержательным и описывать картинку;
- состоять из 3–5 слов, но не больше 250 символов (сложно описать картинку двумя словами);
- не должен быть спамным.
Title у картинок даёт дополнительную информацию об изображении. Он нужен для того, чтобы пользователю было проще понять, что изображено на картинке. Атрибут выводится при наведении курсора на изображение.
На картинке выше видно, как отображается атрибут на странице.
В HTML-коде атрибут прописывается следующим образом:
Рекомендуется заполнять Title. Он может положительно отразиться на поведенческих параметрах сайта. Когда пользователю сложно понять, что изображено на картинке, он машинально может навести на неё мышкой и подсказка Title поможет ему сориентироваться.
Основные требования к Title похожи на требования к Alt:
- должен быть содержательным и описывать изображение;
- состоять из 3–5 слов, но не больше 250 символов;
- не должен быть слишком большим, так как при наведении текст в 3–4 строчки может отпугнуть;
- по возможности содержать ключевой запрос;
- не должен быть спамным.
Зная это, перейдём к вопросам.
Ответы на популярные вопросы по Alt и TitleAlt это описания к изображениям?
Не совсем. Alt – это альтернативное описание, которое будет выводиться вместо картинки, если у пользователя не отображаются изображения.
Обязательно ли заполнять атрибуты Alt и Title для картинок?
Если Вас интересует трафик из поиска по картинкам, Alt обязательно нужно заполнять, Title – по желанию.
Alt и Title должны быть разными или одинаковыми?
Существует два основных мнения по этому поводу:
1) Alt и Title должны быть уникальными;
2) атрибуты должны быть одинаковыми.
Если посмотреть, как заполняют эти атрибуты сайты, изображения которых находятся в ТОПе поиска по картинкам, увидим оба варианта заполнения.
Яндекс по этому поводу пишет следующее:
Я считаю, что эти атрибуты могут быть одинаковыми. Главное, чтобы они давали чёткое структурированное описание вашей картинке.
Нужно ли прописывать возле атрибута Alt ещё и Title?
Необязательно, но учтите: атрибут Title в некоторых случаях помогает лучше понять, что изображено на картинке. Это может положительно отразиться на поведенческих показателях сайта.
В Alt картинки надо ставить те же ключевые слова, что и у статьи, или другие?
Желательно. Главное, чтобы Alt был содержательным и описывал картинку.
Нужно ли прописывать в этих атрибутах ключевые слова?
Если эти ключевые слова будут описывать картинку, то да.
Как правильно писать атрибут Alt: кириллицей или латиницей?
Если ваш сайт на русском, заполняйте кириллицей.
Как писать – с большой или маленькой буквы?
Не имеет значения.
А если статья уже проиндексирована поисковиками, можно внести описание в картинки или не стоит?
Можно. Когда поисковики переиндексируют вашу страницу, они учтут эти описания.
Где заполнять Alt и Title?
Всё зависит от того, на какой CMS сделан ваш сайт.
Если это чистый HTML, то:
Обычно поля для заполнения Alt и Title находятся в параметрах изображения. Например, если ваш сайт сделан на WordPress, открыв параметры изображения, вы увидите поле для заполнения атрибута Alt. В дополнительных настройках есть поле для атрибута Title.
Если же ваш сайт на 1С-Битрикс, в дополнительных настройках параметров изображения есть поле для атрибута Alt. Атрибут Title будет подтягиваться из поля «Заголовок».
Нужно понимать, что всё индивидуально. Многое зависит от того, на какой CMS сделан ваш сайт и как настроен.
Стоит ли и возможно ли прописывать Alt и Title для своих картинок в комментариях?
Не вижу в этом необходимости, да и вряд ли у кого-то в комментариях есть возможность оптимизировать изображения.
Когда к картинкам пишу тайтл и альт на русском, на сайте высвечиваются иероглифы, что делать?
Такое происходит из-за кодировки. Нужно преобразовать текущую кодировку в UTF-8.
ИтогиЕщё раз пробежимся по тому, какими же должны быть Alt и Title.
Основные требования к атрибуту Alt:
- содержательный, описывает изображение;
- длиной около 3–5 слов (до 250 символов);
- по возможности должен включать ключевой запрос;
- не должен быть спамным.
Почему стоит заполнять Alt:
1. учитывается поисковыми системами при ранжировании картинок, а значит, если ваша картинка попадёт в ТОП, – это источник дополнительного трафика;
2. будет полезен пользователю, у которого отключены изображения на сайте.
Атрибут Title:
- содержательный и описывает изображение;
- длиной около 3–5 слов или до 250 символов;
- по возможности должен содержать ключевой запрос;
- без спама.
Почему стоит заполнять Title:
1.
будет полезен пользователю, которому сложно разобраться, что изображено на картинке;
2.
подсказки Title могут положительно отразиться на поведенческих показателях сайта.
