Как переделать эту вёрстку в плане семантики?

Question

[iNeext10]

Нам на курсе дали задание переделать вёрстку. Изначально, в ней всё написано через <div>. Нужно вместо div'ov написать теги, которые подходят по семантике. Вообщем, сделать так, чтобы в вёрстке было как можно меньше дивов и спанов.

Подскажите пожалуйста, как можно семантически переделать эту секцию?


Вот код:

<section class="intro d-flex justify-content-between">
        <div class="mb-n1 align-self-end intro-left">
            <div class="text-white">
                <div class="d-block text-right">My Neighbor</div>
                <div class="d-block name">Totoro</div>
            </div>
        </div>
        <div class="pr-5 align-self-end intro-right">
            <div href="https://youtu.be/9_Cd0WnAflI" target="_blank" class="px-5 py-4 d-block text-decoration-none trailer-button">Watch Trailer</div>
        </div>
    </section>

Comments

[HamSter]

например:

<section class="intro d-flex justify-content-between">
  <div class="mb-n1 align-self-end intro-left">
    <div class="text-white">
      <p class="d-block text-right">My Neighbor</p>
      <h2 class="d-block name">Totoro</h2>
    </div>
  </div>
  
  <div class="pr-5 align-self-end intro-right">
    <a href="https://youtu.be/9_Cd0WnAflI" target="_blank" class="px-5 py-4 d-block text-decoration-none trailer-button">Watch Trailer</a>
  </div>
</section>

[Евгений]

Разве вам на курсе не говорили, как это сделать?

[Ankhena]

Подскажите пожалуйста, как можно семантически переделать эту секцию?

1. Понять какой смысл у каждого из элементов. У себя в голове на вашем родном языке.
2. Написать нужные теги.

[sergski]

HamSter,
название мультфильма — "My Neighbor Totoro", поэтому оно не может быть в 2 разных тегах;
h2 лучше заменить на h1,
text-white тоже не нужен,
ссылку на трейлер в тег a.

Answer 1

[VforValery]

Как по мне, то это самый правильный вариант. Никто ведь не говорит что `header` и `footer` не могут находится на одной и той же высоте. Их суть именно в семантике, а не в визуальном оформлении. Почему далее `h1`? Потому что нужен главный заголовк, а внутри явно элементы инлайновые которые классом превращаются в блочные (`d-block`). По линке, думаю, и так всё ясно.

<section class="intro d-flex justify-content-between">
        <header class="mb-n1 align-self-end intro-left">
            <h1 class="text-white">
                <span class="d-block text-right">My Neihgbor</div>
                <span class="d-block name">Totoro</div>
            </h1>
        </header>
        <footer class="pr-5 align-self-end intro-right">
            <a href="https://youtu.be/9_Cd0WnAflI" target="_blank" class="px-5 py-4 px-5 d-block text-decoration-none trailer-button">Watch TraiIer</div>
        </footer>
    </section>

Answer 2

[Григорий Моргачев]

Ну как вариант можно так:

<section class="intro d-flex justify-content-between">
        <main class="mb-n1 align-self-end intro-left">
            <div class="text-white">
                <p class="d-block text-right">My Neighbor</p>
                <h1 class="d-block name">Totoro</h1>
            </div>
        </main>
        <nav class="pr-5 align-self-end intro-right">
            <a href="https://youtu.be/9_Cd0WnAflI" target="_blank" class="px-5 py-4 d-block text-decoration-none trailer-button">Watch Trailer</a>
        </nav>
</section>