Span અને Div HTML ઘટકોનો ઉપયોગ કેવી રીતે કરવો

વધુ શૈલી અને લેઆઉટ નિયંત્રણ માટે સ્પેન અને સીએસએસ સાથે DIV નો ઉપયોગ કરો.

ઘણાં લોકો જે વેબ ડિઝાઇન અને એચટીએમએલ / સીએસએસ માટે નવા છે તેઓ અને

એલિમેન્ટ્સમાં એકબીજાના બદલે ઉપયોગ કરે છે કારણ કે તે વેબપૃષ્ઠો બનાવે છે. વાસ્તવમાં, જોકે, એ છે કે આ દરેક HTML ઘટકો વિવિધ હેતુઓ પ્રદાન કરે છે. તેના ઉદ્દેશિત હેતુઓ માટે દરેકનો ઉપયોગ કરવાનું શીખવાથી તમે ક્લીનર વેબ પેજ વિકસાવશો જે કોડને એકંદરે મેનેજ કરવાનું સરળ છે.

એલિમેન્ટનો ઉપયોગ કરવો

DIV તત્વ તમારા વેબ પૃષ્ઠ પર લોજિકલ વિભાગોને વ્યાખ્યાયિત કરે છે.

તે મૂળભૂત રીતે એક બૉક્સ છે જેમાં તમે અન્ય એચટીએમએલ ઘટકો મૂકી શકો છો જે તાર્કિક રીતે એકસાથે જાય છે. ફાળકો, હેડિંગ, લિસ્ટ્સ, લિંક્સ, ઈમેજો, વગેરે જેવા વિભાગોમાં ઘણાં અન્ય ઘટકો હોઈ શકે છે. તે તમારા HTML દસ્તાવેજમાં વધારાના માળખું અને સંગઠન પૂરું પાડવા માટે તેના અંદરના અન્ય વિભાગો પણ હોઈ શકે છે.

DIV ઘટકનો ઉપયોગ કરવા માટે, તમારા પૃષ્ઠના વિસ્તાર પહેલાં એક ખુલ્લું

ટેગ મૂકો જે તમે અલગ ડિવિઝન તરીકે ઇચ્છો છો, અને પછી બંધ ટેગ કરો:

DIV ની સમાવિષ્ટો

જો તમારા પૃષ્ઠના વિસ્તારને કેટલીક વધારાની માહિતીની જરૂર છે જે તમે CSS સાથે શૈલીમાં ઉપયોગ કરશો, તો તમે ID પસંદગીકાર ઉમેરી શકો છો (દા.ત.,

id = "myDiv">), અથવા વર્ગ પસંદગીકાર (દા.ત., વર્ગ = "મોટા ડીવીવ">). આ બંને લક્ષણો પછી CSS નો ઉપયોગ કરીને અથવા JavaScript નો ઉપયોગ કરીને સંશોધિત થઈ શકે છે. વર્તમાન શ્રેષ્ઠ પ્રયાસો ID ને બદલે વર્ગ પસંદગીકારોનો ઉપયોગ કરવા તરફ દુર્બળ છે, કેમકે ચોક્કસ ID પસંદગીકારો કેટલા છે સત્યમાં, જો કે, તમે ક્યાં તો ઉપયોગ કરી શકો છો અને ID ને અને વર્ગ પસંદગીકાર બંનેને વિભાજન પણ આપી શકો છો.

ક્યારે

વર્સિસ <વિભાગ> નો ઉપયોગ કરવો

DIV એલિમેન્ટ HTML5 વિભાગ ઘટકથી અલગ છે કારણ કે તે બંધ કરેલ સામગ્રીને કોઈપણ સિમેન્ટીક અર્થ આપતું નથી. જો તમને ખાતરી ન હોય કે સામગ્રીનો બ્લોક કોઈ વિભાગ અથવા વિભાગ હોવો જોઈએ, તો તત્વ અને સામગ્રીનો હેતુ શું છે તે નક્કી કરવામાં તમારી સહાય કરવા છે તે વિશે વિચારો:

  • જો તમને પેજના તે વિસ્તાર પર શૈલીઓ ઉમેરવા માટે તત્વની જરૂર હોય, તો તમારે div ઘટકનો ઉપયોગ કરવો જોઈએ.
  • જો સમાવિષ્ટ થતી સામગ્રીમાં વિશિષ્ટ ધ્યાન હોય અને તેના પોતાના પર ઊભા હોય, તો તમે તેના બદલે વિભાગ ઘટકનો ઉપયોગ કરવા માગી શકો છો.

આખરે, બંને વિભાગો અને વિભાગો તે જ રીતે વર્તન કરે છે અને તમે તેમને ક્યાંતો મૂલ્યોનું વિશિષ્ટતા આપી શકો છો અને તમારી સાઇટની દેખાવ મેળવવા માટે CSS સાથે તેમને શૈલી બનાવી શકો છો. આ બંને બ્લોક સ્તર તત્વો છે.

એલિમેન્ટનો ઉપયોગ કરવો

સ્પાન ઘટક એ મૂળભૂત રીતે એક ઇનલાઇન તત્વ છે. આ તે div અને વિભાગ ઘટકો સિવાય સુયોજિત કરે છે. સ્પૅન તત્વનો ઉપયોગ અવારનવાર સામગ્રીના ચોક્કસ ભાગને લપેટી કરવા માટે થાય છે, સામાન્ય રીતે ટેક્સ્ટ, તેને વધારાના "હૂક" આપવા માટે કે જે પાછળથી શૈલીને બનાવી શકાય છે. સીએસએસ સાથે વપરાય છે, તે તેમાં જોડાયેલ લખાણની શૈલીને બદલી શકે છે; તેમ છતાં, કોઈપણ શૈલીના લક્ષણો વિના, સ્પાન ઘટકનો એકમાત્ર ટેક્સ્ટ પર કોઈ અસર થતી નથી.

આ સ્પાન અને ડીવી તત્વો વચ્ચે મુખ્ય તફાવત છે. ઉપર સૂચવ્યા મુજબ, DIV ઘટકમાં ફકરા બ્રેકનો સમાવેશ થાય છે, જ્યારે કે સ્પાન તત્વ માત્ર બ્રાઉઝરને સંબંધિત સીએસએસ સ્ટાઇલ નિયમોને ટૅગ્સ દ્વારા જોડાયેલા છે તે લાગુ કરવા માટે કહે છે:


હાઈલાઇટ કરેલ લખાણ અને બિન હાયલાઇટ કરેલ ટેક્સ્ટ.

વર્ગ = "હાઇલાઇટ" અથવા અન્ય વર્ગને CSS સાથે ટેક્સ્ટ શૈલીમાં સ્પૅન ઘટકમાં ઉમેરો (દા.ત., class = "highlight">).

સ્પાન તત્વમાં કોઈ આવશ્યક વિશેષતાઓ નથી, પરંતુ તે ત્રણ જે સૌથી વધુ ઉપયોગી છે તે DIV ઘટકની જેમ જ છે:

  • શૈલી
  • વર્ગ
  • id

જ્યારે તમે દસ્તાવેજની નવી બ્લોક-સ્તર ઘટક તરીકે તે સામગ્રીને વ્યાખ્યાયિત કર્યા વગર સામગ્રીની શૈલીને બદલવા માંગતા હો ત્યારે સ્પાનનો ઉપયોગ કરો.

ઉદાહરણ તરીકે, જો તમે લાલ રંગના એચ 3 મથાળાનો બીજો શબ્દ માંગતા હો, તો તમે તે શબ્દને સ્પૅન તત્વથી ઘેરી શકો છો, જે તે શબ્દને લાલ ટેક્સ્ટ તરીકે શૈલી આપશે. શબ્દ હજુ પણ h3 તત્વનો એક ભાગ રહ્યો છે, પણ હવે તે લાલમાં પણ દર્શાવે છે:

આ મારી અદ્ભુત હેડલાઇન છે

2/2/17 ના રોજ જેરેમી ગીરર્ડ દ્વારા સંપાદિત