Html img текст: Как сделать текст на изображении

Содержание

html — Как можно выровнять на один уровень img и span (только без flexbox’а)

Вопрос задан 2 года 4 месяца назад

Изменён 2 года 4 месяца назад

Просмотрен 166 раз

Щас вот так

А нужно вот так:

<header>
  <a href="#"><img src="img/logo.png" alt="Logo"></a>
  <nav>
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">Компании</a></li>
      <li><a href="#">Как работает?</a></li>
      <li><a href="#">О сервисе</a></li>
      <li><a href="#">Партнерам</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </nav>
  <a href="#">
    <img src="http://via.  placeholder.com/50x25/33ff99/555555?text=L" alt="Contact" />
    <span>Связаться с нами</span>
  </a>
  <a href="#">
    <img src="http://via.placeholder.com/50x25/33ff99/555555?text=L" alt="Log-in" />
    <span>Войти в сервис</span>
  </a>
</header>

html
css
css3
html5
navigationbar

У ссылки или спана внутри укажите картинку как фоновую с позиционированием left center, а для текста укажите padding-left на ширину картинки или чуть больше. Как вариант, так:

.contact {
  background: url(img/contact.png) left center no-repeat;
}
.contact span {
  padding-left: 30px;
}

<a href="#"><span>Связаться с нами</span></a>

Это только пример. При записи стилей в css, необходимо проверить правильный путь к картинке и корректно настроить отступ

Grid && flex для этого и внедрили в css, чтобы упростить задачу верстки

. log_in,
.contact {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 5px;
}

<header>
  <a href="#"><img src="img/logo.png" alt="Logo"></a>
  <nav>
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">Компании</a></li>
      <li><a href="#">Как работает?</a></li>
      <li><a href="#">О сервисе</a></li>
      <li><a href="#">Партнерам</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </nav>
  <a href="#">
    <img src="http://via.placeholder.com/50x25/33ff99/555555?text=L" alt="Contact" />
    <span>Связаться с нами</span>
  </a>
  <a href="#">
    <img src="http://via.placeholder.com/50x25/33ff99/555555?text=L" alt="Log-in" />
    <span>Войти в сервис</span>
  </a>
</header>

/* чисто для наглядности */
a {background-color:gold; }
img {min-width:30px;min-height:30px; margin-right:5px; background-color:orange;}
span {background-color:white;}
/* нужное */
a {display:inline-block; line-height:30px}

<div>
    <a href="#">
        <img src="img/join. png" alt="Log-in"></img>
        <span>Войти в сервис</span>
    </a>
</div>

Если любите костыли, то, например, так:

<img src="img/contact.png" alt="Contact"></img>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

6 простых правил хорошего alt-текста / Хабр

Давайте поговорим о том, как написать хорошее описание фотографий в атрибуте alt.

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

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

Просто перескажите, что находится на картинке

Есть простой совет, чтобы создать идеальное описание.

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

Но не переусердствуйте, так как лучше, если описание будет лаконичным.

Разноцветный кот ест корм и облизывается (https://unsplash.com/photos/_FlMYRBExBk)

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

Используйте контекст, в котором находится картинка

Одна и та же картинка может иметь разное описание в alt в зависимости от контекста. Контекст — это то, что окружает иллюстрацию, например, текст статьи, если картинка туда встроена.

Проще говоря,

Описание зависит от того, на чём сейчас нужно сфокусировать пользователя.

Посмотрите на картинку ниже и подумайте, какое описание вы бы указали в alt.

Есть несколько правильных ответов:

CSS is awesome.

Подойдет для статьи о том, как работает CSS (плохо).

Белая кружка с надписью.

Если ваша статья про кружки и никак не связана с веб-разработкой.

Бардак на столе разработчика: кружки, переплетенные провода, карточки.

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

Белый стол.

Если продаёте столы и считаете, что то, что находится на столе, не имеет никакой разницы. Да хоть тарелка.

Белая кружка с надписью в квадрате «CSS is awesome» стоит на белом столе. Awesome выходит за пределы квадрата.

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

Главная мысль в этих примерах такая, что вам нужно акцентировать внимание на том, что сейчас более важно для статьи в этом изображении. Чтобы определить «сейчас», нужно понимать, о чём написано в статье рядом с этим изображением. Если в статье рассказывается о том, какие виды кружек бывают, то нужно описать детали кружки на изображении, например «Белая кружка с надписью «CSS is Awesome»». Всё, что есть на фоне, в этом случае не важно.

Не пишите alt, если картинка не несёт смысла

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

Для контекста: на аватарке нарисована голова человека, который лежит на кровати и не может уснуть от копошащихся мыслей.

<img src="avatar. jpg" alt="Николай Шабалин">

«Николай Шабалин» совсем плохой вариант, так как он полностью дублирует текст справа. Аватарка используется в шапке сайта, поэтому описывать её нет смысла.

Не описывать картинку нормально, но будьте аккуратнее и всегда помните про контекст.

<img src="avatar.jpg" alt="">

Передавайте эмоции через alt

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

Радостный человек лежит в гамаке на закате (https://unsplash.com/photos/Kc4MGyzfOTI)

Эту картинку можно описать «Радостный человек лежит в гамаке на закате». Нужно ли писать здесь, что человек радостный, хотя мы даже не видим его лица? Это не обязательно, но можно так написать, если мы продаём гамаки, хотим дополнить картинку и сказать, насколько хорошо он себя чувствует в нашем удобном гамаке, лёжа в нём на берегу океана.

Про эмоциональное описание для изображений вы можете подробнее узнать в блоге Лео́ни Уотсон.

Не заигрывайте с декором ради декора

Все мы знаем, что декоративные изображения обычно используются без описания, хотя такая возможность есть. Для этого можно использовать свойства content: «» или, если вы используете изображение в content: url(), то правильно будет написать так:

content: url("path/to/image.jpg" / "Описание декоративного изображения").

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

Не пишите в alt названия файлов или имя фотографа

Я часто смотрю, какое описание заполняют в атрибуте alt, и удивляюсь, насколько фантазия может пойти не туда. Часть заполненный альтернативный текст полностью бесполезен, так как не передаёт смысла изображения.

Какое описание не подойдёт:

imgX2 или 7e0273c07fef3b598590d3fdddf7808604f0a191435c2c0c — это просто название или хэш файла с картинкой.
название сайта или название статьи — возможно, это проделки для SEO.
имя фотографа — тут всё понятно.

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

Итого — как написать хороший alt-текст

Просто понятное описание — самое хорошее решение, если оно не слишком длинное. Отсутствие описания — нормально, но должно быть к месту. Эмоциональное описание — тоже хорошо, если вписано в контекст.

А вот шесть правил коротко:

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

Экспериментируйте, пробуйте и не бойтесь ошибиться.

HTML img width Атрибут

❮ HTML тег

Пример

Изображение высотой 600 пикселей и шириной 500 пикселей:

Попробуйте сами »

Атрибут width определяет ширину изображения в пикселях.

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

Совет: Уменьшение размера большого изображения с помощью Атрибуты height и width заставляют пользователя загрузите большое изображение (даже если оно выглядит маленьким на странице). Чтобы этого избежать, измените масштаб изображения с помощью программы, прежде чем использовать его на странице.

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

Атрибут
ширина	Да	Да	Да	Да	Да

Синтаксис

Значения атрибутов

Значение	Описание
пикселей	Ширина в пикселях (например)

❮ HTML-тег

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL

Учебное пособие по Python
Учебное пособие по W3.

CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

Top References Справочник по HTML

Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

HTML img alt Attribute

❮ HTML тег

Пример

Изображение с указанным альтернативным текстом:

Попробовать это сам »

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

Обязательный атрибут alt указывает альтернативный текст для изображения, если изображение не может быть отображено.

Атрибут alt предоставляет альтернативную информацию для изображения, если пользователь по какой-либо причине не может просмотреть это (из-за медленного соединения, ошибки в атрибуте src

или если пользователь использует программу чтения с экрана).

Совет: Для создания всплывающей подсказки к изображению используйте атрибут title !

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

Атрибут
или	Да	Да	Да	Да	Да

Синтаксис

Значения атрибутов

Значение	Описание
текст	Указывает альтернативный текст для изображения. Рекомендации для альтернативного текста: Текст должен описывать изображение, если изображение содержит информацию Текст должен объяснять, куда ведет ссылка, если изображение находится внутри элемента Используйте alt=»» если изображение предназначено только для украшения

Значение

Описание

текст

Указывает альтернативный текст для изображения.

Рекомендации для альтернативного текста:

Текст должен описывать изображение, если изображение содержит информацию
Текст должен объяснять, куда ведет ссылка, если изображение находится внутри элемента
Используйте alt=»» если изображение предназначено только для украшения

❮ HTML-тег

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top9 Examples Примеры HTML
Примеры CSS
Примеры JavaScript

Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3.

html — Как можно выровнять на один уровень img и span (только без flexbox’а)

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

6 простых правил хорошего alt-текста / Хабр

Просто перескажите, что находится на картинке

Используйте контекст, в котором находится картинка

Не пишите alt, если картинка не несёт смысла

Передавайте эмоции через alt

Не заигрывайте с декором ради декора

Не пишите в alt названия файлов или имя фотографа

Итого — как написать хороший alt-текст

HTML img width Атрибут

Пример

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

Синтаксис

Значения атрибутов

ВЫБОР ЦВЕТА

Лучшие учебники

Top References Справочник по HTML

Основные примеры

HTML img alt Attribute

Пример

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

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

Синтаксис

Значения атрибутов

ВЫБОР ЦВЕТА

Лучшие учебники

Лучшие ссылки

Добавить комментарий Отменить ответ

Рубрики