В какой тег html5 будет семантически правильно обернуть различные формы?

Question

koller18 @koller18

HTML

В какой тег html5 будет семантически правильно обернуть различные формы?

Привет всем. Всё перечитал, но нигде не нашёл. Во что обернуть много форм? Они у меня вынесены за <main> и облачены в <section>, плюс каждая форма в <article>.

Формы разные: выбор станции метро, отправка заявки, просмотр статуса заказа и другие.

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

9 комментариев

Подписаться 2 Оценить 9 комментариев

Stalker_RED @Stalker_RED

Вынесены за в и в?
div и section не устраивают?

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

Stalker_RED:
вот тут формы

Поймёт ли яндекс и гугл, что текст в этих формах и списках не относится к контенту? То есть перечисление станций метро.

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

koller18: Вы вообще не смотрите что написали, да?

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

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

Stalker_RED: извините, первый раз на этом ресурсе. Не увидел даже, что код не вставился.

<section>
<article>
<form>
</form>
</article>
<article>
тут уже может быть просто туча ul с названиями станций метро
</article>
<article>
просто много div с интерактивными элементами
</article>
<article>
много ul
</article>
</section>

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

Stalker_RED @Stalker_RED

koller18: https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

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

Stalker_RED: Я уже понял, что я сделал неверно. Неужели сложно просто ответить как сделать правильно? Вы же сами в своих проектах как-то делаете, правильно? К чему столько бесполезных комментариев, я Вас не понимаю.

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

koller18:
div и section не устраивают?

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

Stalker_RED: возможно, я не знаю. Затем и пришёл сюда — спросить.

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

koller18: я более развернуто написал здесь: https://toster.ru/answer?answer_id=1064521#answers...

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

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

Ответы на вопрос 3

7 комментариев

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

Я спросил во что сами FORM должны быть обёрнуты и не только FORM, но и просто нумерованные списки. А Ваш ответ гениален.

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

koller18: дык все гениальное - просто. (ну почти).
а нумерованные списки это <ol>

Написано более трёх лет назад
Назар Мокринский @nazarpc

koller18: Но зачем им быть обернутыми в списки или во что-то ещё?

Написано более трёх лет назад
koller18 @koller18 Автор вопроса
Назар Мокринский: Вы не поняли или я криво написал. Есть блок с формами, длинющими списками, интерактивными кнопками и прочее. Это всё скрыто от пользователя и появляется по требованию. На всех страницах сайта. Находится (в данный момент) это всё «добро» в и вынесено после всех остальных элементов разметки, даже после footer, то есть рядом с body.

Правильно ли оборачивать ЭТО в aside, чтобы как то отделить от всего остального? И нужно ли оборачивать каждый "элемент" отдельно?

Надеюсь сейчас более менее правильно описал ситуацию. Прикладываю код, чтобы наверняка:
<body> <nav id="navigation"> </nav> <main role="main"> <header> <h1></h1> <h2></h2> </header> <nav></nav> <nav></nav> <nav></nav> <nav></nav> <article></article> <article></article> <article></article> <article></article> <section class="adss"></section> </main> <footer><div class="copyright"></div></footer> <aside class="forms"> <div class="interaktiv">Нажимаешь кнопку появляется 10 и так далее до нужной ссылки — типа каталог, но не совсем</div> <div class="order"><form>Форма заказа</form></div> <div id="status">INPUT с проверкой статуса заказа</div> <div id="metro">дохрена UL</div> </aside> </body>
Написано более трёх лет назад
Назар Мокринский @nazarpc

koller18: Опять-таки, почему не обернуть всё в одну форму?

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

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

Назар Мокринский: типа так? Форма в форме это норм?)

<form class="forms">
<div class="interaktiv">Нажимаешь кнопку появляется 10 и так далее до нужной ссылки — типа каталог, но не совсем</div>
<div class="order"><form>Форма заказа</form></div>
<div id="status">INPUT с проверкой статуса заказа</div>
<div id="metro">дохрена UL</div>
</form>

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

Назар Мокринский @nazarpc

koller18: <form> вкладывать внутрь <form> не имеет смысла. Оставьте только внешний элемент <form> и всё.

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

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

1 комментарий

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

koller18 @koller18 Автор вопроса
Спасибо за ответ. А если форм несколько, плюс всякие блоки с контентом, типа выбора станции метро в виде
и т.д?
Написано более трёх лет назад
xmoonlight @xmoonlight

koller18: разбиваете на секции.
Одна секция: заголовок, контент (относящийся к форме; расположен до и/или после формы) в тегах "p" (параграф) и одна форма в этой секции.
Если формы внутри статьи/публикации (внутри article), то на секции не разбиваем. Остальное - так же оставляем.

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

xmoonlight: заголовков нет, в том то и дело) И контента у формы нет. Всё что расположено в этом блоке скрыто от пользователя и вылезает, вываливается и появляется только после взаимодействия с определенными элементами на странице, к примеру: кнопка заказа, просмотр списка станций метро и другие интерактивные элементы.

То есть это всё «говно» во что-то обернуть нужно.

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

koller18: так это не важно: есть они или нет - я написал максимально для секции то, что относится к контентному содержанию.

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

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

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

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

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

HTML

+1 ещё

Простой
Почему html,vs code.в текстовом файле открывается весь набранный код?
- 1 подписчик
- 5 часов назад
- 68 просмотров
2

ответа
HTML

+2 ещё

Простой
Как поставить видео на всю ширину флекс элемента?
- 1 подписчик
- 5 часов назад
- 48 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как правильно сделать переключение темы?
- 1 подписчик
- 15 часов назад
- 96 просмотров
2

ответа
HTML

+3 ещё

Простой
Почему третья карточка не становиться в ряд?
- 1 подписчик
- вчера
- 159 просмотров
1

ответ
HTML

+1 ещё

Простой
Как добиться срабатывания transition для checkbox?
- 1 подписчик
- 02 нояб.
- 82 просмотра
3

ответа
HTML

Простой
Как преобразовать HTML в exe?
- 2 подписчика
- 02 нояб.
- 334 просмотра
4

ответа
HTML

+1 ещё

Простой
Как сделать Second Picker?
- 1 подписчик
- 02 нояб.
- 104 просмотра
2

ответа
HTML

Простой
Чем и как вы тестируете WAI-ARIA?
- 1 подписчик
- 01 нояб.
- 62 просмотра
0

ответов
HTML

+1 ещё

Простой
Как исправить эффект при наведении?
- 1 подписчик
- 01 нояб.
- 107 просмотров
0

ответов
HTML

Простой
Чему равна высота и ширина элемента .content в следующем коде?
- 1 подписчик
- 31 окт.
- 49 просмотров
0

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

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

от 2 000 до 4 000 $

Смарт-контракт на блокчейне TON

06 нояб. 2024, в 00:03

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

Ручное тестирование приложения в сторах (iOS и Android)

05 нояб. 2024, в 23:19

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

Разработать одностраничный сайт , на сайте будет описание проекта

05 нояб. 2024, в 22:00

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

Вынесены за в и в?
div и section не устраивают?
Stalker_RED:
вот тут формы

Поймёт ли яндекс и гугл, что текст в этих формах и списках не относится к контенту? То есть перечисление станций метро.
koller18: Вы вообще не смотрите что написали, да?
Stalker_RED: извините, первый раз на этом ресурсе. Не увидел даже, что код не вставился.

<section> <article> <form> </form> </article> <article> тут уже может быть просто туча ul с названиями станций метро </article> <article> просто много div с интерактивными элементами </article> <article> много ul </article> </section>
koller18: https://developer.mozilla.org/ru/docs/Web/HTML/Ele...
Stalker_RED: Я уже понял, что я сделал неверно. Неужели сложно просто ответить как сделать правильно? Вы же сами в своих проектах как-то делаете, правильно? К чему столько бесполезных комментариев, я Вас не понимаю.
Stalker_RED: возможно, я не знаю. Затем и пришёл сюда — спросить.
koller18: я более развернуто написал здесь: https://toster.ru/answer?answer_id=1064521#answers...

Answer 1 · 2017-08-06 07:01:53

Назар Мокринский @nazarpc

Open Source enthusiast

Форма (если это та форма) должна быть в <form>. Ни во что без надобности его оборачивать не нужно.

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

7 комментариев

Answer 2 · 2017-08-06 17:43:11

Вот список всех html тегов.
Их там несколько десятков, но можно сразу понять что некоторые группы вам не подходят вообще. По сути подойдет только что-то из раздела Styles and Semantics.
Там всего 13 тегов, и если прочитать их краткое описание, то сразу большая часть кандидатов отпадет, и выбор сведется к трем-четырем тегам. Скорее всего это будут div или section, а точнее сложно порекомендовать, не зная подробностей.

Answer 3 · 2017-08-06 18:23:01

xmoonlight @xmoonlight

https://sitecoder.blogspot.com

1. div, article (+div)
2. section (+article (+div) или просто +div)
3. aside (+div)

Пример: stumper.ru/demo (view-source) - Проверка W3C

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

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

В какой тег html5 будет семантически правильно обернуть различные формы?

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

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

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