Как правильно перенести слова и вписать картинку?

Question

[Владислав]

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



Что именно интересует:
1. Как контролируемо переносить слова в заголовке и в тексте под заголовком? Не банальным < br > же это делается!?
2. Как корректно внедрить в разметку картинку лампочки?
3. Оценить в целом "правильность" моего видения структуры данного блока, исходя из кода ниже.

<section class="hero">
<div class="hero__info">
<h1 class="hero__heading">Learn any foreign language</h1>
<p class="hero__text">With our teachers who write a program for each student, you will be able to make your first sketch after the first lesson.</p>
<a href="#" class="hero__button">Get started</a>
</div>
<img src="img/main/woman.svg" alt="A woman learning languages" class="hero__image"/>
</section>

.hero {
  align-items: center;
  display: flex;
}
.hero__info {
  display: flex;
  flex: 1 1 50%;
  flex-direction: column;
}
.hero__image {
  flex: 1 1 50%;
}

Всем ответившим заранее спасибо!

Comments

[Ankhena]

Не банальным < br > же это делается!?

Почему нет? Если шириной не получается решить, то да, br.
Альтернатива - неразрывные пробелы. Но их ставят только там, где они нужны по нормам типографики.

2. Как корректно внедрить в разметку картинку лампочки?

Псевдоэлементом. Не нужно её внедрять в разметку.

И тетку тоже.
Это либо псевдоэлемент либо, если совсем никак, то img с aria-hidden true.

3. Оценить в целом "правильность" моего видения структуры данного блока, исходя из кода ниже.

Да, такая разметка допустима.

[Владислав]

Ankhena, Спасибо! А если тетка у пользователя не прогрузится, как ей задать альтернативный текст через псевдоэлемент?

[Ankhena]

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

[Владислав]

Ankhena, Намёк понял, спасибо)