Loading...
ttitto avatar ttitto 1153 Точки

Семантично ли е ползването на div и span?

Покрай стилизирането на една от задачите с формуляри се запитах дали използването на div и span е семантично правилно. Много трудно става подреждането на разните input, label, checkbox, select и т.н. ако не се използват div или span.

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

Тагове:
1
Web Fundamentals - HTML5
Flyer avatar Flyer 150 Точки
Best Answer

Здравей. <div> и <span> по природа не са семантични, но нищо не пречи да се използват там където е необходимо. Въпреки, че за повечето елементи има заместител на <div>, той все още бива широко използван. <span> от друга страна се използва предимно за inline елементи, които после биват стилизирани.

От тази схема може да си отговориш на някои въпроси свързани със семантичността на HTML5 елементите:

HTML5 Tags Usage

2
HPetrov avatar HPetrov 822 Точки

Няма никакви проблеми. За заместител на span не се сещам за адекватен, нищо не значещ таг, който да върши същата работа. А div си е просто контейнер, който ти подпомага подредбата. Няма проблеми да имаш div-ове в семантични такова и обратно. Аз например винаги си правя 1 wrapper div и всичко останало ми е в него. Друг пример е ако искаш да имаш 2 aside bar-а по никакъв начин не свързани като значение 1 с друг но непременно да са например в ляво и 1 под друг. Това доста трудно можеш да го постигнеш ако нямат някакъв ограждащ таг. Например 1 обикновен div и в него 2-та aside.

0
ZvetanIG avatar ZvetanIG 907 Точки

Голяма част от семантичните тагове по природа са div-вове т.е.  те са блокови елементи.

1
XmUrF avatar XmUrF 363 Точки

То вярно, че голяма част се държат като дивове, но и аз срещам доста трудности в подредбата на елементите без да ги държиш в някакви контейнери. Като имаш няколко семантични елемента от един вид, като тръгнеш да ги подреждаш става кървава и мътна, ако нямаш нещо от сорта на div. Поне при мен е така де.

2
Flyer avatar Flyer 150 Точки

Винаги може да направиш даден елемент да се държи като блоков (т.е. с поведение на <div>), използвайки CSS:

span {

display: block;

}

 

Друго нещо което помага в подобни случаи е да направиш блоковите елементи да се държат като inline елементи:

section {

display: inline-block;

}

 

2
XmUrF avatar XmUrF 363 Точки

Да, това ясно, но самият факт, че трупаш много на брой eднакви семантични елементи в body-то например, било то и блокови, почва да прави подреждането им доста триково. Например ти можеш да имаш няколко header-a(header като header на страницата, header на основния section), footer, nav и т.н. На мен ми изглежда по-лесно да позиционирам всеки от тях в отделен div, който вече да си позиционирам пак отделно в body-то.

0
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.