Как-то закрывается тег в html! Что делать?

Question

[Дом Домов]

У меня есть кусок кода:

<div id="test-answer">
  <h3 id="test-answer-text">Здесь находится какой-то вопрос, который должен адаптивно вписаться в определенные границы</h3>
  <p id="test-answer-price">
    <img src="/assets/coin.png" id="test-answer-price-img"/>
    <h5>15</h5>
  </p>
</div>

А в браузере выглядит так:


Кто не понял в коде только один тег , а в браузере 2
И он закрывается не в нужном месте

Comments

[Александр Васильев]

Логично, почитай, где должен быть h, и что может быть в p

[Ankhena]

В исходном коде меняем h5 на span и всё.

Либо

<h4>
  <img>
  <span></span>
</h4>

И именно h4, а не h5. Потому что предыдущий был h3

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

Ещё вряд ли монетка нужна как img. Скорее всего спокойно можно убрать в стили.
И останется просто

<p id="test-answer-price">
    15
  </p>

Answer 1

[DIVSIDE]

Потому что H5 не может быть в теге P. Ровно как и картинка там быть не должна. H - это заголовок, а P - это параграф (обычный строчный текст).

Браузеры тоже не тупые, вот и пытаются исправить твою семантическую ошибку. Не все теги можно пихать друг в друга. Максимум что ты можешь пихнуть в P - это spanс background-image.

Зачем тебе там вообще P, если у тебя там нет строчного текста...Делаешь просто div

Должно быть так:

<div id="test-answer">
    <h3 id="test-answer-text">Здесь находится какой-то вопрос, который должен адаптивно вписаться в определенные 
    границы</h3>
      <div id="test-answer-price">
        <img src="/assets/coin.png" id="test-answer-price-img" />
          <span>15</span>
      </div>
    </div>

Comments

[Дом Домов]

я уже забыл, долго на сайты не верстал

[DIVSIDE]

dom_4k, зачем лукавить что забыл)) видно же что просто не знаешь

[Ankhena]

dom_4k, DIVSIDE, img можно вставлять в p

[DIVSIDE]

Ankhena,

Ровно как и картинка там быть не должна

Завуалированное "не рекомендуется". Правило хорошего тона

[Дом Домов]

DIVSIDE, я последний раз сайт писал год назад

[Ankhena]

DIVSIDE,
Да, если мы не в полной мере контролируем разметку и опасаемся того, что внутрь закрадется div или заголовки или что-то типа того. Тогда, действительно, лучше не надо.
Оборачиваем в div (или что-то другое более подходящее по смыслу, если имеется).

Почему можно

Часто параграф воспринимается в бытовом смысле, как логическая конструкция. Но в HTML он имеет расширенную область применения и как структурный элемент, служащий для объединения фразового контента.
img + span вполне подходят для этого назначения.

Но автору вообще не нужен там img :)
Если судить по названию в урле.
Убрать его в стили и оставить спокойно только p.
Но там много чего ещё можно сделать с разметкой, если беспокоиться о семантике (Не похоже, что это кому-то нужно, но вопросы и ответы читают не только их авторы).