Div and span
У HTML теги div і span є елементами, які використовуються для визначення частин документа, щоб їх можна було ідентифікувати. Якщо інші елементи HTML, як p (paragraph - абзац), em (emphasis - наголос), точно представляють семантику вмісту, то використання тегів span і div призводить до кращої доступності для читачів і легшої підтримки для авторів. Якщо жоден інший елемент HTML не може бути застосованим, span і div можуть представити частини документа для застосування атрибутів class, id, lang або dir. [1] [2]
span представляє вбудовану (інлайн) частину документа, наприклад, слова в реченні. div представляє частину документа на рівні блоку, наприклад, кілька абзаців, або зображення з підписом. Жоден з цих елементів не має семантичного значення, але вони дозволяють використовувати семантичні атрибути (наприклад, lang="uk"), стилі CSS (наприклад, color і typography) або застосовувати сценарії на стороні клієнта (наприклад, анімацію, приховування та збільшення). [1] [2]
Наприклад, якщо хтось хоче зробити певну частину тексту всередині абзацу червоним, вони будуть використовувати span
<span style="color: red;">я червоний!</span>
Це поверне текст червоного кольору. В результаті побачимо: я червоний!
Елемент span був введений в HTML у другому проєкті html-i18n робочої групи з інтернаціоналізації в 1995 році. Однак лише HTML 4.01 став частиною мови HTML, з’явившись у робочому проєкті HTML 4 W3C у 1997 році.[3]
У 1995 році span був введений для розмітки будь-якого вбудованого інтервалу тексту, оскільки «потрібен загальний контейнер для перенесення атрибутів LANG і BIDI у випадках, коли жоден інший елемент не підходить». Він досі служить цій загальній меті, хоча з того часу було визначено набагато багатший діапазон семантичних елементів; також є багато інших атрибутів.
div означає «division» (поділ) документа, блочний елемент, який більше виділяється від елементів над і під ним, ніж вбудовані елементи, як span.
Є кілька відмінностей між div і span. Найбільш помітною є те, як відображаються елементи. У стандартному HTML div — це блочний елемент, тоді як span — це вбудований (інлайн) елемент. Блок div візуально ізолює розділ документа на сторінці й може містити інші блочні компоненти. Елемент span містить частину інформації в рядку з навколишнім вмістом і може містити лише вбудовані компоненти. На практиці відображення елементів за замовчуванням можна змінити за допомогою каскадних таблиць стилів (CSS), хоча це не скасовує правило про можливий дозволений вміст. Наприклад, незалежно від CSS, елемент span не може містити дочірніх блочних елементів.[4]
Елементи span і div використовуються виключно для логічного групування закритих елементів.
Є три основні причини використовувати теги span і div з атрибутами class або id :
Зазвичай елементи <span> і <div> містять атрибут class або id у поєднанні з CSS, щоб до вмісту застосувати макет, типографію, колір та інші атрибути презентації. CSS стосується не лише візуальних стилів: коли голосно вимовляється голосовим браузером, стиль CSS може вплинути на швидкість мовлення, наголос, насиченість і навіть положення в стереофонічному зображенні.
З цих причин, а також для підтримки семантики, атрибути, додані до елементів у HTML, мають описувати свою семантичну мету, а не лише їхні властивості відображення в певному середовищі. Наприклад, HTML у <span>...</span> семантично слабкий, тоді як <em>...</em> використовує елемент em для позначення наголосу (відображається у вигляді курсивного тексту), і надає більш відповідну назву класу. При правильному використанні CSS такі «попередження» можуть відображатися на екрані червоним жирним шрифтом, але при роздрукуванні вони можуть бути пропущені, оскільки на той час буде надто пізно щось робити з ними. Можливо, під час мовлення їм слід дати наголос і зниження темпу мовлення. Другий приклад — семантично багатша розмітка, а не просто презентаційна.
Таке групування та позначення частин вмісту сторінки може бути введено виключно для того, щоб зробити сторінку більш семантично значущою в загальних рисах. Неможливо сказати, як розвиватиметься всесвітня мережа через роки й десятиліття. Вебсторінки, розроблені сьогодні, можуть все ще використовуватися, коли інформаційні системи, які ми ще не можемо уявити, обробляють, обробляють і класифікують Інтернет. Навіть сучасні пошукові системи, такі як Google та інші, використовують власні алгоритми обробки інформації значної складності.
Протягом кількох років World Wide Web Consortium (W3C) реалізовує великий проєкт семантичної мережі, покликаний зробити всю мережу більш корисною та значущою для сучасних і майбутніх інформаційних систем.
Рух мікроформатів є спробою побудувати уявлення про семантичні класи. Наприклад, програмне забезпечення, що підтримує мікроформати, може автоматично знайти такий елемент, як <span class="tel">123-456-7890</span>, і дозволяє автоматично набрати номер телефону.
Після того, як розмітка HTML або XHTML буде доставлена до клієнтського браузера відвідувача сторінки, є ймовірність того, що клієнтському коду знадобиться переміщатися по внутрішній структурі (або об’єктній моделі документа) вебсторінки. Найпоширенішою причиною цього є те, що сторінка постачається із клієнтським JavaScript, який надаватиме динамічну поведінку після відображення сторінки. Наприклад, якщо наведення миші на посилання "Купити зараз" має на меті зробити акцент на ціні в іншому місці сторінки, код JavaScript може це зробити, але JavaScript має ідентифікувати елемент з ціною, де б він не був у розмітці. Досить буде наступної розмітки: <div class="price">149.99 грн</div>. Іншим прикладом є техніка програмування Ajax, де, клацання на гіпертекстове посилання може призвести до того, що код JavaScript отримає текст для відображення нової пропозиції ціни замість поточної без повторного завантаження всієї сторінки. Коли новий текст повертається із сервера, JavaScript має визначити точну область на сторінці, щоб замінити її новою інформацією.
Інструментам автоматичного тестування також може знадобитися навігація по розмітці вебсторінки за допомогою атрибутів class або id елементів span і div. У динамічно згенерованому HTML це може включати використання інструментів тестування сторінок, таких як HttpUnit, член сімейства xUnit, а також інструментів навантажувального або стресового тестування, таких як Apache JMeter, коли вони застосовуються до вебсайтів, керованих формою.
Розумне використання div і span є важливою частиною розмітки HTML і XHTML. Однак іноді ними зловживають.
Різні структури списків, доступні в HTML, можуть бути кращими, ніж саморобна суміш елементів div і span. [5]
Наприклад:
<ul class="menu">
<li>Головна сторінка</li>
<li>Зміст</li>
<li>Довідка</li>
</ul>
... зазвичай краще, ніж:
<div class="menu">
<span>Головна сторінка</span>
<span>Зміст</span>
<span>Довідка</span>
</div>
Інші приклади семантичного використання HTML замість елементів div і span включають використання елементів fieldset для поділу вебформи, використання елементів legend для ідентифікації розділів і використання label для ідентифікації елементів input форми. [6]
HTML5 представив кілька нових елементів, серед яких елементи header, footer, nav та figure. Використання семантично відповідних елементів забезпечує кращу структуру документів HTML, ніж span або div. [7]
- ↑ а б HTML5: A vocabulary and associated APIs for HTML and XHTML. 4.4 Grouping content: W3C.
- ↑ а б HTML5: A vocabulary and associated APIs for HTML and XHTML. 4.5 Text-level semantics: W3C. Архів оригіналу за 1 серпня 2015.
- ↑ HTML/Elements/span - Web Education Community Group. 13 червня 2013. Процитовано 14 листопада 2013.
{{cite web}}: Обслуговування CS1: Сторінки з параметром url-status, але без параметра archive-url (посилання) - ↑ HTML 5.1: 4. The elements of HTML. W3.org. Процитовано 3 серпня 2017.
- ↑ Harold, Elliotte Rusty (2008). Refactoring HTML. Addison Wesley. с. 184. ISBN 0-321-50363-5.
There is no simple way to find all the unidentified lists in a site. [...] They can be marked up in dozens of different ways: as paragraphs,
divs, tables, [etc]. Once you've found a list, marking up the individual items is easy. Just useul,ol, ordlinstead of the current wrapper element. [...] For example to remove the bullets add this rule to the page's CSS stylesheet: [...] - ↑ Raggett, Dave; Arnaud Le Hors; Ian Jacobs (1999). Adding structure to forms: the FIELDSET and LEGEND elements. HTML 4.01 Specification. W3C. Процитовано 12 липня 2010.
The
FIELDSETelement allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible. - ↑ van Kesteren, Anne (2010). HTML5 differences from HTML4. W3C. Процитовано 30 червня 2010.