Span and div

от Уикипедия, свободната енциклопедия
Направо към: навигация, търсене

В HTML, span и div елементите се използват за определяне части от документ, така че те да могат да бъдат идентифицирани, когато нито един друг HTML елемент не е подходящ. Използването на span и div предлага по-добра достъпност на читателите и по-лесна поддръжка на авторите, докато други HTML елементи като например p(параграф), em(наблягане) и т.н. точно представят семантиката на съдържанието. Там където нито един от съществуващите HTML елементи не може да бъде приложен, span и div могат да представят тези части от документа, така че да бъдат приложени HTML атрибути като class, id, lang или div.

Span представя редова част от документ, например думи в изречение. Div представя блоково-структурна част от документ като например няколко параграфа или изображение с неговото заглавие. Нито един от двата елемента не съдържа някакво значение в себе си, но позволяват семантичните атрибути (например lang="en-US"), CSS оформянето (например цвят, типография) или client-side scripting (например анимация, скриване, увеличаване) да бъдат приложени.

История[редактиране | редактиране на кода]

Span представя редова част от документ, например думи в изречение. Div представя блоково-структурна част от документ като например няколко параграфа или изображение с неговото заглавие. Нито един от двата елемента не съдържа някакво значение в себе си, но позволяват семантичните атрибути (например lang="en-US"), CSS оформянето (например цвят, типография) или client-side scripting (например анимация, скриване, увеличаване) да бъдат приложени.

Различия и поведението по подразбиране[редактиране | редактиране на кода]

Има много разлики между span и div. Най-отличителната е начина, по който се показват елементите. В стандартния HTML, div е блоков елемент, докато span е редов. Div блокчето визуално отделя част от документ на страницата и може да съдържа други блоково-структурни компоненти. Span елементът представя част от информацията на ред заедно с околното съдържание и може да съдържа други компоненти от редово ниво. В практиката показването на елементите по подразбиране може да бъде променено чрез използването на Cascading Style Sheets (CSS), въпреки че разрешеното съдържание на всеки елемент не може да бъде променяно. Например, независимо от CSS, един span елемент не може да съдържа подчасти от блоково ниво.

Практическо използване [редактиране | редактиране на кода]

Span и div елементите се използват да означат логическо групиране на затворени елементи.

Има три основни причини да се използват span и div таговете с class или id атрибути:

Оформление с помощта на CSS[редактиране | редактиране на кода]

Общото за span и div елементите е да съдържат class или id атрибути и с използването на CSS да прилагат оформление, типография, цвят и други атрибути за представяне на части от съдържанието. CSS не се отнася само за визуалния стил: когато се изкаже на глас с гласов браузър, CSS оформлението може да повлияе на скоростта на говорене, интонацията, богатството на езика и дори позицията в рамките на стерео озвучение.

Общото за span и div елементите е да съдържат class или id атрибути и с използването на CSS да прилагат оформление, типография, цвят и други атрибути за представяне на части от съдържанието. CSS не се отнася само за визуалния стил: когато се изкаже на глас с гласов браузър, CSS оформлението може да повлияе на скоростта на говорене, интонацията, богатството на езика и дори позицията в рамките на стерео озвучение. Чрез правилното използване на CSS, подобни 'warnings' /предупреждения/ могат да бъдат оказани в червено, удебелен шрифт на екрана, но когато се принтират те могат да бъдат пропуснати, тъй като тогава може да е твърде късно да се направи нещо за тях. Може би, когато се изговарят, трябва да им се придаде добълнително акцент и малко да се намали скоростта на говорене. Вторият пример е семантично по-богато маркиран, вместо просто презентационно.

Семантична яснота[редактиране | редактиране на кода]

Този вид групиране и етикиране на части от съдържанието на страницата може да бъде въведен само за да направи страницата по-семантично смислена в общи линии. Невъзможно е да се каже как Световната мрежа ще се развива през следващите години и десетилетия напред. Уеб страници проектирани днес все още може да се използват с информационни системи, които ние все още не можем да си представим. Дори днешните търсачки като Google и други използват патентовани алгоритми от значителна сложност за обработка на информация.

От няколко години World Wide Web Consortium (W3C) работи върху основен Semantic Web проект, разработен да направи цялата мрежа все по-полезна и значима за днешните и бъдещите информационни системи.

Движението на микроформати е опит да се изгради представа за логични класове. Например microformats-aware software могат автоматично да намерият елемент като 123-456-7890 и дават възможност за автоматично набиране на телефонен номер.

Достъп от кода[редактиране | редактиране на кода]

След като HTML и XHTML маркирането е доставено на броузера на клиента посетил страницата има шанс кодът от страна на клиента да трябва да се насочи към вътрешната структура(or Document Object Model) на уеб страницата. Най-честата причина за това е, че страницата се доставя с предназначен за клиента JavaScript, който ще доведе до динамично поведение в хода след като страницата е представена.

Например, ако при плъзване на мишката върху линк "Купи сега" има за цел да покаже цената, която на друго място на страницата да бъде подчертана, то JavaScript код може да направи това, но JavaScript трябва да определи цената на елемента, където и да е в маркирането. За следното маркиране е достатъчно:

$45.99

.

Друг пример е техниката за програмиране Ajax, където като кликнете хипертекстова връзка може да направи JavaScript кодът да поправи текста на нова цена на оферта и да го покаже на мястото на сегашния в страницата без повторно зареждане на цялата страница. Когато новият текст се появи отново от сървъра, JavaScript трябва да определя точното място на страницата, за да го замени с новата информация. 

По-рядко срещани, но също толкова важни примери за получаване на достъп на код до крайните уеб страници и да се налага да се използва span и div елементите class или ID атрибути, за да се движите в рамките на страницата, включват използването на автоматични настройки за тестване. На динамично генериран HTML, това може да включва използването на автоматични системи за тестване на страница като HttpUnit, член на семейството xUnit и зареждането на тестващи инструменти като Apache JMeter, които се прилагат за form-driven уеб сайтове.

Прекомерно използване[редактиране | редактиране на кода]

Разумното използване на div и span е много важна част от HTML и XHTML кодa. Въпреки това, те понякога са прекалено употребявани.

Различни списъчни структури налични в HTML може да са за предпочитане от една лично направена комбинация от div и span елементи. 

Например това:

<ul class="menu">
  <li>Main page</li>
  <li>Contents</li>
  <li>Help</li>
</ul>

... като цяло за предпочитане пред това:

<div class="menu">
  <span>Main page</span>
  <span>Contents</span>
  <span>Help</span>
</div>

Други примери за семантичното използване на HTML са:

- fieldset елементи за разделяне на уеб форма

- legend елементи за идентифициране на такива части  

- label за идентифициране формата input елементи          

вместо div, span или table елементи, често използвани за такива цели.  

Връзки[редактиране | редактиране на кода]

Криейтив Комънс - Признание - Споделяне на споделеното Лиценз за свободна документация на ГНУ Тази страница частично или изцяло представлява превод на страницата „Span and div“ в Уикипедия на английски. Оригиналният текст, както и този превод, са защитени от Лиценза „Криейтив Комънс - Признание - Споделяне на споделеното“, а за съдържание, създадено преди юни 2009 година — от Лиценза за свободна документация на ГНУ. Прегледайте историята на редакциите на оригиналната страница, както и на преводната страница. Вижте източниците на оригиналната статия, състоянието ѝ при превода, и списъка на съавторите.