ડીવી અને સેક્શન વચ્ચેનો તફાવત શું છે?

HTML5 SECTION ઘટકને સમજવું

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

ઘણા લોકો માને છે કે એચટીએમએલ તત્વો સેક્શન અને વેબ પેજ પર સમાવિષ્ટ કરવા માટે ઉપયોગમાં લેવાતા તે જ વસ્તુ-જિનેરિક કન્ટેનર તત્વો છે. વાસ્તવમાં, જોકે, એ છે કે આ બે ઘટકો, જ્યારે બંને કન્ટેનર તત્વો હોવા છતાં, જેનરિક છે. SECTION ઘટક અને DIV ઘટક બંનેનો ઉપયોગ કરવાના ચોક્કસ કારણો છે - અને આ લેખ તે તફાવતોને સમજાવશે.

વિભાગો અને વિભાગો

સેક્શન તત્વને વેબ પૃષ્ઠ અથવા સાઇટનું અર્થનિર્ધારણ વિભાગ તરીકે વ્યાખ્યાયિત કરવામાં આવે છે જે કોઈ વધુ વિશિષ્ટ પ્રકારની નથી (જેમ કે લેખ અથવા બાજુ). હું આ ઘટકનો ઉપયોગ કરું છું જ્યારે હું પૃષ્ઠના વિશિષ્ટ વિભાગને ચિહ્નિત કરું છું - એક વિભાગ જે હોલસેલને ખસેડવામાં અને અન્ય પૃષ્ઠો અથવા સાઇટના ભાગો પર ઉપયોગમાં લેવાતા હતા. જો તમે ઇચ્છો તો તે સામગ્રીનો એક અલગ ભાગ છે, અથવા સામગ્રીનો "વિભાગ" છે.

તેનાથી વિપરીત, તમે પૃષ્ઠના ભાગો માટે DIV તત્વનો ઉપયોગ કરો છો કે જેને તમે વિભાજન કરવા માંગો છો, પરંતુ સિમેન્ટિક સિવાયના હેતુઓ માટે. હું એક વિભાગમાં સમાવિષ્ટ ક્ષેત્રને લપેટીશ તો જો હું સી.એસ.એસ. સાથે ઉપયોગ કરવા માટે "hook" આપવા માટે આમ કરી રહ્યો છું. તે સીમેન્ટિક્સના આધારે સામગ્રીનો એક અલગ વિભાગ હોઈ શકતો નથી, પરંતુ તે લેઆઉટ મેળવવા માટે હું જે નિર્ધારિત છું તે મારા પૃષ્ઠ માટે જોઈતું નથી.

તે સિમેન્ટિક્સ વિશે બધું છે

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

કોઈ પણ સામગ્રી કે જે DIV ઘટકની અંદર સમાયેલ છે તેનો કોઈ અંતર્ગત અર્થ નથી. આ વસ્તુઓ માટે શ્રેષ્ઠ ઉપયોગ થાય છે:

• CSS શૈલીઓ માટે CSS શૈલીઓ અને હુક્સ
• લેઆઉટ કન્ટેનર
• જાવાસ્ક્રિપ્ટ હૂક
• HTML માટે વિભાગો તેને વાંચવા માટે સરળ બનાવે છે

DIV ઘટક અમારા દસ્તાવેજોને શૈલીમાં હૂક ઉમેરવા અને કૉલમ્સ અને ફેન્સી લેઆઉટ બનાવવા માટે અમારો એકમાત્ર તત્વ છે. તે કારણે, અમે HTML સાથે અંત કર્યો હતો જે DIV ઘટકો સાથે છળકપટ થઈ ગયા હતા - વેબ ડીઝાઇનર્સ શું "ડિવિટિસ" કહી શકે છે. ત્યાં પણ એવા WYSIWYG સંપાદકો હતા કે જે DIV તત્વનો સંપૂર્ણપણે ઉપયોગ કરે છે મેં વાસ્તવમાં એચટીએમએલમાં ચાલ્યું છે જે ફકરોને બદલે ડીવીવી તત્વનો ઉપયોગ કરે છે!

HTML5 સાથે, અમે સેટેન્ટીંગ એલિમેન્ટ્સનો ઉપયોગ કરીને વધુ અર્થપૂર્ણ વર્ણનાત્મક દસ્તાવેજો (નેવિગેશન માટે અને વર્ણનાત્મક આંકડાઓ અને તેથી વધુ) માટે અને તે ઘટકો પર શૈલીઓ પણ નિર્ધારિત કરવા માટે શરૂ કરી શકીએ છીએ.

સ્પાન એલિમેન્ટ વિશે શું?

અન્ય ઘટક જે મોટાભાગના લોકો જ્યારે ડીવી (DIV) તત્વ વિશે વિચારે છે ત્યારે તે તત્વ છે. આ તત્વ, ડીવી જેવા, સિમેન્ટિક તત્વ નથી. તે એક ઇનલાઇન ઘટક છે કે જેનો ઉપયોગ તમે સામગ્રીની ઇનલાઇન બ્લોક્સ (સામાન્ય રીતે ટેક્સ્ટ) આસપાસ શૈલીઓ અને સ્ક્રિપ્ટ્સ માટે હૂક ઉમેરવા માટે કરી શકો છો. તે અર્થમાં તે DIV ઘટકની જેમ બરાબર છે, બ્લોક એલિમેન્ટની જગ્યાએ ફક્ત ઇનલાઇન. કેટલીક રીતે, ડીવીવીને બ્લોક લેવલ સ્પાન ઘટક તરીકે વિચારવું સહેલું હોઈ શકે છે અને તે જ રીતે તમે એચટીએમએલ સમાવિષ્ટોના આખા બ્લોકો માટે જ સ્પાન કરી શકો છો.

HTML5 માં કોઈ તુલનાત્મક ઇનલાઇન વિભાગ ઘટક નથી.

ઈન્ટરનેટ એક્સપ્લોરરના જૂના વર્ઝન માટે

જો તમે IE ના નાટ્યાત્મક જૂની આવૃત્તિઓ (IE 8 અને નીચલા જેવા) ને સહાય કરતા હો, જે વિશ્વસનીયતાને ઓળખતા નથી, તો તમારે અર્થનિર્ધારણાત્મક યોગ્ય HTML ટૅગ્સનો ઉપયોગ કરવાથી ડરવું જોઈએ નહીં. સિમેન્ટિક્સ તમને અને તમારી ટીમને પૃષ્ઠને ભવિષ્યમાં સંચાલિત કરવામાં સહાય કરશે (કારણ કે તમે જાણો છો કે તે વિભાગ લેખ છે જો તે લેખિત ઘટક દ્વારા ઘેરાયેલો છે). ઉપરાંત, બ્રાઉઝર્સ જે તે ટેગને ઓળખી શકે છે તે તેમને વધુ સારી રીતે સહાય કરશે.

તમે હજી પણ ઇન્ટરનેટ એક્સપ્લોરર સાથે HTML5 સિમેન્ટીક સેટેલિંગ તત્વોનો ઉપયોગ કરી શકો છો, તમારે ફક્ત એચટીએમએલ તરીકે ટેગ ઓળખવા માટે સ્ક્રિપ્ટિંગ અને કદાચ કેટલાક આસપાસના ડીવી તત્વોને ઉમેરવાની જરૂર છે.

DIV અને SECTION ઘટકોનો ઉપયોગ કરીને

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

જેનિફર કિનાન દ્વારા મૂળ લેખ. 3/15/17 ના રોજ જેરેમી ગીરર્ડ દ્વારા સંપાદિત