Разлика между DIV и SPAN

и са HTML тагове, които определят елементи в HTML код.

HTML (Hypertext Markup Language) е структуриран код, използван за изграждане и показване на уеб страниците, които посещаваме онлайн, всеки ден, на всяко устройство.

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

Разбиране на HTML

Език за маркиране на хипертекст (HTML) е широко използван език за маркиране и се отнася до структурата и кода „зад“ уеб страница, показвана в уеб браузър.

HTML е текстов файл, използващ специфичен код (синтаксис), за да определи стила, съдържанието, подредбата и формата на страницата. Най- Markup терминът показва, че текстът / кодът се подготвя за обработка и представяне, т.е. на уеб страница, в уеб браузър.

World Wide Web Consortium (W3C) [i] разпознава HTML като официален език за маркиране в разработването на уеб страници и следователно HTML се поддържа от повечето браузъри. Така уеб страниците могат да бъдат разработени на разпознат език, лесно се интерпретират от различни браузъри, за да визуализират страницата по предназначение на дизайнера.

Текущата версия, която все още се използва, е HTML4, но бавно се прекратява, тъй като HTML5 печели повече поддръжка и приемане на динамични и отзивчиви уеб страници.

Отзивчивостта се превръща в основен компонент в уеб разработката, за да осигури по-лесно, по-динамично потребителско изживяване, което трябва да се настани на множество устройства, като смартфони, таблети и лаптопи.

Каскадни таблици за стилове (CSS) се превръща в неразделна част от изграждането на динамични и отзивчиви страници. Това е отделен файл, определящ атрибути за всеки елемент като шрифт, цвят, подравняване - така че програмистът да не посочва стила на елемента всеки път, когато се използва в HTML кода.

Основна структура на HTML

За да извлечете максимума от всеки език за разработка, спазването на стандартната файлова структура и обмислянето на най-доброто използване на синтаксиса са от ключово значение за осигуряването на стабилно, целенасочено и визуално привлекателно уеб съдържание.

Една HTML страница има структура, дефинирана от елементи (също наричани тагове). Когато пишете HTML код, тези елементи се показват по двойки - това означава, че всеки маркер се нуждае от отваряне и затваряне. Начало и край.

Елементът се отваря със синтаксиса: и затворен с.  Най- / наклонена линия показва края на дефиницията на този елемент.

Атрибутите и съдържанието на елементите се определят между тези две точки.

Най- минимални елементи необходими за HTML файл са определението,, (само HTML4) и таговете.

• DOCTYPE Определение

Определението (DTD) първо трябва да бъде декларирано като първи маркер в HTML файл, така че когато страницата се обработва, уеб браузърът знае какъв тип файл е и следователно може правилно да интерпретира и показва страницата.

В HTML4 има варианти на DTD (в зависимост от атрибутите и елементите на страницата), но по-типичните изрази ще бъдат включени като:

или

DTD в HTML5 е много по-опростен:

· HTML, HEAD и BODY

• Маркерът показва, че това е HTML файл и това е коренът на HTML елемента, който съдържа всички други следващи елементи, дефинирани в него; и включването на езиков атрибут се препоръчва като най-добра практика; например:

• Изискването се изисква в HTML4, но не е задължително в HTML5. Това е елемент, който съдържа други елементи, свързани с тази част от документа, като заглавието, препратките на скриптове, определяне на стилове и метаданни. Затвореният маркер трябва да се използва, преди да се дефинира 
• Елементът съдържа основното съдържание за страницата, включително таблици, текст на изображенията, списъци и т.н. След като маркерът е затворен, елементът вече може да приключи. Използването на новия HTML5 елемент не е задължително за страницата или в друга част от съдържанието.

HTML елементи

HTML5 създаде нови елементи за по-лесно разработване и дизайн, а също така премахна елементи, използвани в HTML4. Списъкът на разликите между HTML4 и HTML5 е публикуван от World Wide Web Consortium (W3C) [ii].

HTML DIV TAG

Наред с подобренията и новите елементи, комбинирани с напредъка на CSS, определени елементи могат да се използват по различни, по-добри начини от преди, а уеб страниците стават по-бързи, по-богати на функции и красиви за гледане! с CSS, използван с HTML5, може да замени определени елементи, които са били прекалено използвани, като .

Маркерът е популярен, когато сегрегира съдържание на страница. При създаването на този елемент той автоматично вмъква почивка
за да запазите текста или съдържанието заедно, вместо да прехвърляте текст през цялата страница.

С достъпността на уебсайтове и оптимизирането на търсачките техниките стават доста наука и се препоръчват от WC3 да не се връща винаги към използване в HTML5.

Като пример за добре структуриран, но прост формат на блога, помислете за новите HTML5 елементи с CSS, вместо да използвате елемента; използвайте елемента за основно съдържание, елементът да подчертае или отдели всяко съдържание на страницата, заглавката или долния колонтитул (навсякъде!) и елементът може да се използва за задържане на връзки към меню или група, за да преглеждате от страницата.

Тези нови елементи лесно идентифицират типа съдържание с помощта на HTML5. Въпреки това, маркерът се използва и с CSS за създаване на отзивчиви уебсайтове.

Създавайки всеки елемент (със собствения си идентификатор или клас), CSS файлът може да бъде определен за манипулиране на всеки елемент.

Примерът по-долу в HTML показва пример за използване на множество елементи:

Моите примери

Елементите могат да имат различни атрибути, по-специално различни размери за отзивчиво взаимодействие в зависимост от размера на екрана на използваното устройство.

Ето пример за това как всеки елемент може да бъде оформен в съответния CSS файл на HTML - чрез препратка към всеки маркер.

#Header

ширина: 800px;

височина: автоматичен

марж-наляво: автоматичен;

марж-наляво: автоматичен;

#Featured

височина: 150px;

Предшестващо цвят: #CCC;

HTML SPAN TAG

Елементът е вграден елемент и не се разпада на линии, освен ако прекъсне
се използва етикет и дефинираният текст (съдържание) между отворените и затворените маркери се показва като ред (по подразбиране без използване на други елементи).

Вградените елементи са текстови елементи в HTML файла и могат да бъдат определени в реда на друг елемент.

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

В примера по-долу синият текст подчертава как елементът span може да бъде вложен като вграден елемент с различни атрибути от неговия родителски елемент - параграф p>:

За да отворите примера, кликнете върху иконата в долната част на страницата.

Когато се гледа в уеб браузър, текстът в елемента по-горе ще бъде показан с различен шрифт към абзаца, за да се подчертае къде потребителят трябва да кликне, за да получи достъп до примера.

Имайте предвид, че няма разлика между HTML4 и HTML5.