Как правильно разметить такой блок?

Question

[Сергей Дроздов]

Можете, пожалуйста, написать разметку для этого блока? Хотелось бы узнать, каким тэгом верстать текст, который жирным шрифтом (то ли p, то ли h2/h3), непонятно награды верстать таблицой или просто списком и в целом непонятно, как правильно разметить, чтобы несильно мудрить потом с флексами/гридами, но так же без лишних оберток.
Заранее спасибо!

Comments

[Модератор]

На вопрос «как сделать» отвечает документация и поиск в интернет.

Тут отвечают на вопросы «почему я сделал, как в документации, а оно не работает. Поискал в интернет, вот запросы, в ответах не нашел. Что я делаю не так?»

Покажите, как вы пробовали решить проблему, приведите код попытки (пусть неудачной), опишите, как запускали, что ожидали и что получилось.
За готовыми решениями - на фриланс. В текущем виде это не вопрос, а задание. Нарушен п.5.12 Регламента.

[Ankhena]

Похоже на выдранный кусок макета.
Где-то ведь должна быть информация о том, кто "руковожу командой..."

И ваши сомнения разумны, это не заголовок, а просто выделенный дизайнером текст для привлечения внимания.
Значит, <p>

непонятно награды верстать таблицой или просто списком и в целом непонятно

Просто список?
Ну можно и просто списком.
Лучше подходят <table> или <dl>

чтобы несильно мудрить потом с флексами/гридами

Тут просто: не будете мудрить, не будет мудрёно ;)

Answer 1

[Stalker_RED]

Заголовок(это заголовок же у вас?) - Hx (цифра зависит от наличия заголовка более высокого уровня)
Оба абзаца - P
Список - UL
Слово "награды" - тоже заголовок, но с номером поменьше.

Comments

[Сергей Дроздов]

Заголовок(это заголовок же у вас?) - Hx (цифра зависит от наличия заголовка более высокого уровня)

Визуально это наверно заголовок, а логически скорее всего нет. Мне кажется правильнее будет сделать заголовок <h2 class="visually-hidden">Обо мне</h2>, а "Руковожу командой..." параграфом

[Stalker_RED]

Сергей Дроздов, я вижу только фрагмент страницы, вам видне как семантически корректнее её разбить.