Правильная семанитческая разметка для лендинга?

Question

ko1es @ko1es

HTML

Правильная семанитческая разметка для лендинга?

Как правильно будет расставить семантические теги в лендинге?

У лендинга такая структура:

<body>
<header>
<h1>Главный заголовок</h1>
<p>Доп. текст</p>
</header>
<section>
<header>
<h2>Заголовок 1 секции лендинга</h2>
<p>Доп. текст секции</p>
</header>
...
</section>
<section>
<header>
<h2>Заголовок 2 секции лендинга</h2>
<p>Доп. текст секции</p>
</header>
...
</section>
<section>
<header>
<h2>Заголовок 3 секции лендинга</h2>
<p>Доп. текст секции</p>
</header>
...
</section>
<footer>Copyright</footer>
</body>

Нужно/правильно ли всё выше в body обернуть в main, нужен ли тут main? ?

2. Есть такая секция.

<section class="future">
    <div class="container mt-section">
      <div class="row">
        <header class="col-12">
          <h2 class="title mb-1">
            Заголовок секции лендинга
          </h2>
          <p class="m-0 desc">
            Доп. текст секции.
          </p>
        </header>
      </div>
      <div class="row mt-5">
        <div class="col-md-4">
          <aside class="item d-flex align-items-center flex-column text-align-center">
            <div class="img mb-3"></div>
            <div class="desc">
              Item Text 
            </div>
          </aside >
        </div>
        <div class="col-md-4">
          <aside class="item d-flex align-items-center flex-column text-align-center">
            <div class="img mb-3"></div>
            <div class="desc">
              Item Text 
            </div>
          </aside >
        </div>
        <div class="col-md-4">
          <aside class="item d-flex align-items-center flex-column text-align-center">
            <div class="img mb-3"></div>
            <div class="desc">
              Item Text 
            </div>
          </aside >
        </div>
      </div>

      <div class="row justify-content-center mt-5">
        <div class="col-9">
          <aside class="p-1 pr-3 pl-3 border-blue text-align-center" style="font-size:1.15em;line-height: 1.1;">
            <p>text line 1</p>
            <p><b>text line 2</b></p>
            <p>text line 3</p>
          </aside>
        </div>
      </div>

      <div class="row justify-content-center mt-5">
        <footer class="col-auto">
          <a href="#" class="btn btn-primary mr-3" rel="nofollow">Вызвать форму</a>
        </footer>
      </div>

    </div>
  </section>

Правильно ли здесь будут поставлены aside и footer?

Вопрос задан более трёх лет назад
367 просмотров

4 комментария

Подписаться 2 Простой 4 комментария

Ankhena @Ankhena Куратор тега HTML

Правильно ли здесь будут поставлены aside

Довольно странно обсуждать семантику в отрыве от содержимого.
Ну кто же знает как связано содержимое aside со всей остальной страницей.

И секция состоящая из одного хедера тоже выглядит подозрительно.

<div class="img mb-3"></div>
Внутри должен быть тег img либо этого div быть не должно, а на его месте должен быть псевдоэлемент.

Нужно ли в принципе столько оберток зависит от дизайна.

Написано более трёх лет назад

ko1es @ko1es Автор вопроса

Ankhena,
Например это

spoiler

Бдует так?

spoiler

<section>
  <header>
    <h2>Заголовок</h2>
  </header>
  
  <aside>
    <h3>Header</h3>
    <p>text</p>
  </aside>
  <aside>
    <h3>Header</h3>
    <p>text</p>
  </aside>
  ...

  <footer>
    *Форма*
  </footer>
</section>

И еше пример:

spoiler

Правильно будет это?

spoiler

<section>
  <header>
    <h2>FAQ</h2>
  </header>
  
  <article>
    <h3>Вопрос</h3>
    <p>Ответ</p>
  </article>
  <article>
    <h3>Вопрос</h3>
    <p>Ответ</p>
  </article>
  ...

  <footer>
    *Форма*
  </footer>
</section>

Написано более трёх лет назад

Вадим @MrDecoy Куратор тега HTML

Опираясь лишь на абстрактный пример, который Вы дали, можно лишь предположительно сказать что:
Да, стоит обернуть всё в main, а header у которого h1 - вынести вне main, и footer соответственно после main.
Скорее всего пихать в каждую секцию header Вам не надо.
Скорее всего, Вы используете aside не правильно. Уж слишком их много.

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега HTML

ko1es, по вашему скрину: секция, в ней заголовок нужного уровня и список.
Всё

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

PHP

+2 ещё

Средний
Проблема с отображением данных о городах из таблицы в запросе SQL?
- 1 подписчик
- вчера
- 53 просмотра
1

ответ
HTML

+1 ещё

Простой
Как применить nth-child?
- 1 подписчик
- вчера
- 89 просмотров
1

ответ
HTML

Простой
Не могу задать ширину таблицы html?
- 1 подписчик
- 07 мая
- 72 просмотра
1

ответ
HTML

+1 ещё

Простой
Как сделать так, чтобы содержимое defs работало?
- 1 подписчик
- 06 мая
- 52 просмотра
0

ответов
HTML

+1 ещё

Простой
Выровнить картинку по центру в тексте, чтобы не зависимости всегда была по центру?
- нет подписчиков
- 05 мая
- 99 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему схлопываются внешние отступы соседних элементов?
- 1 подписчик
- 04 мая
- 81 просмотр
1

ответ
HTML

+2 ещё

Простой
Почему моргает видеофон на сайте?
- 1 подписчик
- 03 мая
- 99 просмотров
0

ответов
HTML

+1 ещё

Простой
Как изменить строчку кода HTML на чужом сайте tampermonkey?
- 2 подписчика
- 02 мая
- 366 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- 02 мая
- 77 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- 01 мая
- 224 просмотра
3

ответа
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 140 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Макет для печати на Плейсменты | Меню на стол А3

10 мая 2024, в 17:44

1500 руб./за проект

Доработка ИМ на 1С Битрикс

10 мая 2024, в 17:30

80000 руб./за проект

Требуется Java + Spring Boot специалист на разработку API-сервиса

10 мая 2024, в 17:14

2000 руб./за проект

Правильно ли здесь будут поставлены aside

Довольно странно обсуждать семантику в отрыве от содержимого.
Ну кто же знает как связано содержимое aside со всей остальной страницей.

И секция состоящая из одного хедера тоже выглядит подозрительно.

<div class="img mb-3"></div>
Внутри должен быть тег img либо этого div быть не должно, а на его месте должен быть псевдоэлемент.

Нужно ли в принципе столько оберток зависит от дизайна.
Ankhena,
Например это

spoiler

Бдует так?

spoiler

<section> <header> <h2>Заголовок</h2> </header> <aside> <h3>Header</h3> <p>text</p> </aside> <aside> <h3>Header</h3> <p>text</p> </aside> ... <footer> *Форма* </footer> </section>

И еше пример:

spoiler

Правильно будет это?

spoiler

<section> <header> <h2>FAQ</h2> </header> <article> <h3>Вопрос</h3> <p>Ответ</p> </article> <article> <h3>Вопрос</h3> <p>Ответ</p> </article> ... <footer> *Форма* </footer> </section>
Опираясь лишь на абстрактный пример, который Вы дали, можно лишь предположительно сказать что:
Да, стоит обернуть всё в main, а header у которого h1 - вынести вне main, и footer соответственно после main.
Скорее всего пихать в каждую секцию header Вам не надо.
Скорее всего, Вы используете aside не правильно. Уж слишком их много.
ko1es, по вашему скрину: секция, в ней заголовок нужного уровня и список.
Всё

Answer 1 · 2021-01-29 15:23:30

body
  header
     nav
  main
      section
      section
      section
      aside
  footer

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

Правильная семанитческая разметка для лендинга?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт