Покрай стилизирането на една от задачите с формуляри се запитах дали използването на div и span е семантично правилно. Много трудно става подреждането на разните input, label, checkbox, select и т.н. ако не се използват div или span.
Та ми е чудно дали е добра практика семантичните тагове да се вкарват в несемантични с цел подредба?
Здравей. <div> и <span> по природа не са семантични, но нищо не пречи да се използват там където е необходимо. Въпреки, че за повечето елементи има заместител на <div>, той все още бива широко използван. <span> от друга страна се използва предимно за inline елементи, които после биват стилизирани.
От тази схема може да си отговориш на някои въпроси свързани със семантичността на HTML5 елементите:
Няма никакви проблеми. За заместител на span не се сещам за адекватен, нищо не значещ таг, който да върши същата работа. А div си е просто контейнер, който ти подпомага подредбата. Няма проблеми да имаш div-ове в семантични такова и обратно. Аз например винаги си правя 1 wrapper div и всичко останало ми е в него. Друг пример е ако искаш да имаш 2 aside bar-а по никакъв начин не свързани като значение 1 с друг но непременно да са например в ляво и 1 под друг. Това доста трудно можеш да го постигнеш ако нямат някакъв ограждащ таг. Например 1 обикновен div и в него 2-та aside.
Голяма част от семантичните тагове по природа са div-вове т.е. те са блокови елементи.
То вярно, че голяма част се държат като дивове, но и аз срещам доста трудности в подредбата на елементите без да ги държиш в някакви контейнери. Като имаш няколко семантични елемента от един вид, като тръгнеш да ги подреждаш става кървава и мътна, ако нямаш нещо от сорта на div. Поне при мен е така де.
Винаги може да направиш даден елемент да се държи като блоков (т.е. с поведение на <div>), използвайки CSS:
span {
display: block;
}
Друго нещо което помага в подобни случаи е да направиш блоковите елементи да се държат като inline елементи:
section {
display: inline-block;
}
Да, това ясно, но самият факт, че трупаш много на брой eднакви семантични елементи в body-то например, било то и блокови, почва да прави подреждането им доста триково. Например ти можеш да имаш няколко header-a(header като header на страницата, header на основния section), footer, nav и т.н. На мен ми изглежда по-лесно да позиционирам всеки от тях в отделен div, който вече да си позиционирам пак отделно в body-то.