વેબ સ્ટાન્ડર્ડઝ ચળવળનું એક મહત્વનું સિદ્ધાંત, જે આપણે આજે છે તે ઉદ્યોગ માટે જવાબદાર છે, તે HTML તત્વોનો ઉપયોગ કરવાનો છે જે ડિફૉલ્ટ રૂપે તેઓ બ્રાઉઝરમાં કેવી રીતે દેખાઈ શકે તેના બદલે તેના બદલે છે. આ સિમેન્ટીક HTML નો ઉપયોગ તરીકે ઓળખાય છે.
સિમેન્ટીક HTML શું છે
સિમેન્ટીક એચટીએમએલ અથવા સિમેન્ટીક માર્કઅપ એ HTML છે જે ફક્ત પ્રસ્તુતિને બદલે વેબ પૃષ્ઠને અર્થ રજૂ કરે છે. ઉદાહરણ તરીકે,
ટેગ સૂચવે છે કે બંધ કરેલું લખાણ ફકરો છે
આ સિમેન્ટીક અને પ્રેઝન્ટેશનલ બંને છે, કારણ કે લોકો જાણે છે કે ફકરા શું છે અને બ્રાઉઝર્સને કેવી રીતે પ્રદર્શિત કરવું તે જાણે છે.
આ સમીકરણની ફ્લિપ બાજુ પર, અને જેવા ટૅગ્સ સિમેન્ટીક નથી, કારણ કે તેઓ માત્ર તે જ વ્યાખ્યાયિત કરે છે કે ટેક્સ્ટ કેવી રીતે દેખાશે (બોલ્ડ અથવા ઇટાલિક) અને માર્કઅપ માટે કોઈ વધારાના અર્થ આપશો નહીં.
સિમેન્ટીક એચટીએમએલ ટૅગ્સના ઉદાહરણોમાં હેડર ટૅગ્સ
મારફતે , , અને નો સમાવેશ થાય છે. ઘણા વધુ સિમેન્ટીક એચટીએમએલ ટેગ્સ છે જેનો ઉપયોગ તમે એક ધોરણ-સુસંગત વેબસાઈટ બનાવી શકો છો.
શા માટે તમારે સિમેન્ટિક્સ વિશે કાળજી લેવી જોઈએ
સિમેન્ટીક એચટીએમએલ લખવાનો લાભ એ છે કે કોઈ પણ વેબ પેજનું ડ્રાઇવિંગ ધ્યેય શું હોવું જોઈએ - વાતચીત કરવાની ઇચ્છા. તમારા દસ્તાવેજમાં સિમેન્ટીક ટૅગ્સ ઉમેરીને, તમે તે દસ્તાવેજ વિશે વધારાની માહિતી પ્રદાન કરો છો, જે સંચારમાં સહાય કરે છે. વિશિષ્ટ રીતે, સિમેન્ટીક ટૅગ્સ તે બ્રાઉઝરને સ્પષ્ટ કરે છે કે પૃષ્ઠનું અર્થ અને તેની સામગ્રી શું છે
તે સ્પષ્ટતાને સર્ચ એન્જિન સાથે પણ વાતચીત કરવામાં આવે છે, જેથી ખાતરી થાય કે સાચું પ્રશ્નો માટે યોગ્ય પૃષ્ઠો પહોંચાડવામાં આવે છે.
સિમેન્ટીક એચટીએમએલ ટૅગ્સ તે ટેગ્સના સમાવિષ્ટો વિશેની માહિતી પૂરી પાડે છે, જે એક પેજ પર કેવી રીતે દેખાય છે તેનાથી આગળ વધે છે. ટેક્સ્ટ કે જે ટૅગમાં બંધ છે તે બ્રાઉઝર દ્વારા અમુક પ્રકારની કોડીંગ ભાષા તરીકે ઓળખવામાં આવે છે.
તે કોડને રેન્ડર કરવાનો પ્રયાસ કરતા, બ્રાઉઝર સમજાવે છે કે તમે કોઈ લેખના હેતુઓ અથવા અમુક પ્રકારની ઑનલાઇન ટ્યુટોરીયલ માટે કોડના ઉદાહરણ તરીકે તે ટેક્સ્ટનો ઉપયોગ કરી રહ્યાં છો.
સિમેન્ટીક ટૅગ્સનો ઉપયોગ કરીને તમે તમારી સામગ્રીને સ્ટાઇલ માટે વધુ હૂક આપી શકો છો. કદાચ આજે તમે તમારા કોડ નમૂનાઓને ડિફૉલ્ટ બ્રાઉઝર શૈલીમાં પ્રદર્શિત કરવાનું પસંદ કરો છો, પરંતુ આવતીકાલે, તમે તેમને ગ્રે પૃષ્ઠભૂમિ રંગ સાથે કૉલ કરવા માગો છો, અને પછી તમે ચોક્કસ મોનો-સ્પેસ ફૉન્ટ પરિવાર અથવા ફોન્ટ્સ સ્ટેકને વ્યાખ્યાયિત કરવા માંગો છો તમારા નમૂનાઓ તમે સિમેન્ટીક માર્કઅપ અને ચપળ રીતે લાગુ કરેલ સીએસએસનો ઉપયોગ કરીને આ તમામ બાબતો સરળતાથી કરી શકો છો.
સિમેન્ટીક ટૅગ્સનો ઉપયોગ કરો
જ્યારે તમે સિમેન્ટિક ટેગનો ઉપયોગ કરવા માંગો છો, પ્રસ્તુતિ હેતુઓને બદલે અર્થ વ્યક્ત કરવા માટે, તમારે સાવચેત રહેવાની જરૂર છે કે તમે તેમની સામાન્ય ડિસ્પ્લે ગુણધર્મો માટે ખોટી રીતે તેનો ઉપયોગ કરશો નહીં. સૌથી વધુ દુરુપયોગવાળા સિમેન્ટીક ટૅગ્સમાંના કેટલાકમાં નીચેનાનો સમાવેશ થાય છે:
- બ્લોકક્વોટ - કેટલાક લોકો ટેક્સ્ટ ઇન્ડેન્ટીંગ માટે ટૅગનો ઉપયોગ કરે છે જે અવતરણ નથી. આ કારણ છે કે બ્લોકક્વોટ્સ મૂળભૂત રીતે ઇન્ડેન્ટ છે. જો તમે ખાલી ઇન્ડેન્ટેશનના લાભો કરવા માંગો છો, પરંતુ ટેક્સ્ટ બ્લોકક્વોટ નથી, તો તેના બદલે CSS માર્જિનનો ઉપયોગ કરો.
- પૃષ્ઠ - કેટલાક વેબ સંપાદકો
& nbsp; (પેરાગ્રોફમાં સમાયેલ એક બિન-બ્રેકીંગ જગ્યા) નો ઉપયોગ કરે છે, જે તે પૃષ્ઠના ટેક્સ્ટ માટે વાસ્તવિક ફકરા નક્કી કરતાં, પૃષ્ઠ ઘટકો વચ્ચે વધારાની જગ્યા ઉમેરે છે. અગાઉ ઉલ્લેખિત ઇન્ડેન્ટેડ ઉદાહરણ સાથે, તમારે જગ્યા ઉમેરવા માટે માર્જિન અથવા પેડિંગ સ્ટાઇલ પ્રોપર્ટીનો ઉપયોગ કરવો જોઈએ.
- ul - બ્લોકોક્વોટની જેમ, મોટા ભાગના બ્રાઉઝરોમાં ટેક્સ્ટને
ટેગ ઇન્ડેન્ટ્સમાં ટેક્સ્ટ બંધ કરવું. આ બંને અર્થપૂર્ણ ખોટી અને અમાન્ય HTML છે, કારણ કે - ટેગ એક
ટૅગની અંદર માન્ય છે. ફરીથી, ટેક્સ્ટને ઇન્ડેન્ટ કરવા માટે માર્જિન અથવા પેડિંગ શૈલીનો ઉપયોગ કરો.
- h1-h6 - મથાળું ટૅગ્સ ફોન્ટ્સ મોટી અને બોલ્ડર બનાવવા માટે વાપરી શકાય છે, પરંતુ જો ટેક્સ્ટ મથાળું નથી, તો તે મથાળું ટૅગની અંદર હોવું જોઈએ નહીં. જો તમે તમારા પૃષ્ઠ પર ચોક્કસ ટેક્સ્ટના કદ અથવા વજનને બદલવા માંગતા હો તો તેના બદલે ફોન્ટ-વજન અને ફોન્ટ-માપની CSS ગુણધર્મોનો ઉપયોગ કરો ..
અર્થ ધરાવતા હોય તેવા એચટીએમએલ ટેગોનો ઉપયોગ કરીને, તમે એવા પૃષ્ઠો બનાવી શકો છો કે જે
ટેગ્સ સાથેની ફક્ત આજુબાજુના તમામ વસ્તુઓ કરતાં વધુ માહિતી આપે છે
કયા HTML ટૅગ્સ અર્થપૂર્ણ છે?
જ્યારે લગભગ દરેક એચટીએમએલ 4 ટેગ અને તમામ એચટીએમએલ 5 ટૅગ્સમાં સિમેન્ટીક અર્થ હોય છે, કેટલાક ટેગ પ્રકૃતિ મુખ્યત્વે સિમેન્ટીક છે.
ઉદાહરણ તરીકે, HTML5 એ અને ટૅગ્સને સિમેન્ટીક અર્થના અર્થમાં પુનઃવ્યાખ્યાયિત કર્યા છે ટૅગ વધારાની મહત્વ નથી, પરંતુ સામાન્ય રીતે બોલ્ડમાં રેન્ડર કરેલો ટેક્સ્ટ છે. ટેગ વિશેષ મહત્ત્વ અથવા ભાર વ્યક્ત કરતું નથી, પરંતુ તે લખાણને વ્યાખ્યાયિત કરે છે જે સામાન્ય રીતે ત્રાંસા અક્ષરોમાં પ્રસ્તુત થાય છે.
અર્થપૂર્ણ એચટીએમએલ ટૅગ્સ
સંક્ષેપ સંજ્ઞા <બ્લોકક્વોટ> લાંબા અવતરણ વ્યાખ્યા દસ્તાવેજનાં લેખક (ઓ) માટેનું સરનામું પ્રશસ્તિ કોડ સંદર્ભ ટેલીટાઇપ ટેક્સ્ટ લોજિકલ ડિવિઝન સામાન્ય ઇનલાઇન શૈલી કન્ટેનર કાઢી નાખેલ ટેક્સ્ટ શામેલ કરેલ ટેક્સ્ટ ભાર મજબૂત ભાર
પ્રથમ-સ્તરનું હેડલાઇન
સેકન્ડ લેવલ હેડલાઇન
થર્ડ-લેવલ હેડલાઇન
ચોથા-સ્તરની હેડલાઇન
ફિફ્થ સ્તરની હેડલાઇન
છઠ્ઠા સ્તરનું હેડલાઇન
થિમેટિક વિરામ વપરાશકર્તા દ્વારા દાખલ કરવામાં આવેલ ટેક્સ્ટ <પૂર્વ> પ્રી-ફોર્મેટ કરેલો ટેક્સ્ટ
લઘુ ઇનલાઇન અવતરણ <સેમ્પ> નમૂના આઉટપુટ સબસ્ક્રિપ્ટ સુપરસ્ક્રિપ્ટ ચલ અથવા વપરાશકર્તા વ્યાખ્યાયિત લખાણ
, અને નો સમાવેશ થાય છે. ઘણા વધુ સિમેન્ટીક એચટીએમએલ ટેગ્સ છે જેનો ઉપયોગ તમે એક ધોરણ-સુસંગત વેબસાઈટ બનાવી શકો છો.
શા માટે તમારે સિમેન્ટિક્સ વિશે કાળજી લેવી જોઈએ
સિમેન્ટીક એચટીએમએલ લખવાનો લાભ એ છે કે કોઈ પણ વેબ પેજનું ડ્રાઇવિંગ ધ્યેય શું હોવું જોઈએ - વાતચીત કરવાની ઇચ્છા. તમારા દસ્તાવેજમાં સિમેન્ટીક ટૅગ્સ ઉમેરીને, તમે તે દસ્તાવેજ વિશે વધારાની માહિતી પ્રદાન કરો છો, જે સંચારમાં સહાય કરે છે. વિશિષ્ટ રીતે, સિમેન્ટીક ટૅગ્સ તે બ્રાઉઝરને સ્પષ્ટ કરે છે કે પૃષ્ઠનું અર્થ અને તેની સામગ્રી શું છે
તે સ્પષ્ટતાને સર્ચ એન્જિન સાથે પણ વાતચીત કરવામાં આવે છે, જેથી ખાતરી થાય કે સાચું પ્રશ્નો માટે યોગ્ય પૃષ્ઠો પહોંચાડવામાં આવે છે.
સિમેન્ટીક એચટીએમએલ ટૅગ્સ તે ટેગ્સના સમાવિષ્ટો વિશેની માહિતી પૂરી પાડે છે, જે એક પેજ પર કેવી રીતે દેખાય છે તેનાથી આગળ વધે છે. ટેક્સ્ટ કે જે ટૅગમાં બંધ છે તે બ્રાઉઝર દ્વારા અમુક પ્રકારની કોડીંગ ભાષા તરીકે ઓળખવામાં આવે છે.
તે કોડને રેન્ડર કરવાનો પ્રયાસ કરતા, બ્રાઉઝર સમજાવે છે કે તમે કોઈ લેખના હેતુઓ અથવા અમુક પ્રકારની ઑનલાઇન ટ્યુટોરીયલ માટે કોડના ઉદાહરણ તરીકે તે ટેક્સ્ટનો ઉપયોગ કરી રહ્યાં છો.
સિમેન્ટીક ટૅગ્સનો ઉપયોગ કરીને તમે તમારી સામગ્રીને સ્ટાઇલ માટે વધુ હૂક આપી શકો છો. કદાચ આજે તમે તમારા કોડ નમૂનાઓને ડિફૉલ્ટ બ્રાઉઝર શૈલીમાં પ્રદર્શિત કરવાનું પસંદ કરો છો, પરંતુ આવતીકાલે, તમે તેમને ગ્રે પૃષ્ઠભૂમિ રંગ સાથે કૉલ કરવા માગો છો, અને પછી તમે ચોક્કસ મોનો-સ્પેસ ફૉન્ટ પરિવાર અથવા ફોન્ટ્સ સ્ટેકને વ્યાખ્યાયિત કરવા માંગો છો તમારા નમૂનાઓ તમે સિમેન્ટીક માર્કઅપ અને ચપળ રીતે લાગુ કરેલ સીએસએસનો ઉપયોગ કરીને આ તમામ બાબતો સરળતાથી કરી શકો છો.
સિમેન્ટીક ટૅગ્સનો ઉપયોગ કરો
જ્યારે તમે સિમેન્ટિક ટેગનો ઉપયોગ કરવા માંગો છો, પ્રસ્તુતિ હેતુઓને બદલે અર્થ વ્યક્ત કરવા માટે, તમારે સાવચેત રહેવાની જરૂર છે કે તમે તેમની સામાન્ય ડિસ્પ્લે ગુણધર્મો માટે ખોટી રીતે તેનો ઉપયોગ કરશો નહીં. સૌથી વધુ દુરુપયોગવાળા સિમેન્ટીક ટૅગ્સમાંના કેટલાકમાં નીચેનાનો સમાવેશ થાય છે:
- બ્લોકક્વોટ - કેટલાક લોકો ટેક્સ્ટ ઇન્ડેન્ટીંગ માટે ટૅગનો ઉપયોગ કરે છે જે અવતરણ નથી. આ કારણ છે કે બ્લોકક્વોટ્સ મૂળભૂત રીતે ઇન્ડેન્ટ છે. જો તમે ખાલી ઇન્ડેન્ટેશનના લાભો કરવા માંગો છો, પરંતુ ટેક્સ્ટ બ્લોકક્વોટ નથી, તો તેના બદલે CSS માર્જિનનો ઉપયોગ કરો.
- પૃષ્ઠ - કેટલાક વેબ સંપાદકો
& nbsp; (પેરાગ્રોફમાં સમાયેલ એક બિન-બ્રેકીંગ જગ્યા) નો ઉપયોગ કરે છે, જે તે પૃષ્ઠના ટેક્સ્ટ માટે વાસ્તવિક ફકરા નક્કી કરતાં, પૃષ્ઠ ઘટકો વચ્ચે વધારાની જગ્યા ઉમેરે છે. અગાઉ ઉલ્લેખિત ઇન્ડેન્ટેડ ઉદાહરણ સાથે, તમારે જગ્યા ઉમેરવા માટે માર્જિન અથવા પેડિંગ સ્ટાઇલ પ્રોપર્ટીનો ઉપયોગ કરવો જોઈએ.
- ul - બ્લોકોક્વોટની જેમ, મોટા ભાગના બ્રાઉઝરોમાં ટેક્સ્ટને
ટેગ ઇન્ડેન્ટ્સમાં ટેક્સ્ટ બંધ કરવું. આ બંને અર્થપૂર્ણ ખોટી અને અમાન્ય HTML છે, કારણ કે - ટેગ એક
ટૅગની અંદર માન્ય છે. ફરીથી, ટેક્સ્ટને ઇન્ડેન્ટ કરવા માટે માર્જિન અથવા પેડિંગ શૈલીનો ઉપયોગ કરો.
- h1-h6 - મથાળું ટૅગ્સ ફોન્ટ્સ મોટી અને બોલ્ડર બનાવવા માટે વાપરી શકાય છે, પરંતુ જો ટેક્સ્ટ મથાળું નથી, તો તે મથાળું ટૅગની અંદર હોવું જોઈએ નહીં. જો તમે તમારા પૃષ્ઠ પર ચોક્કસ ટેક્સ્ટના કદ અથવા વજનને બદલવા માંગતા હો તો તેના બદલે ફોન્ટ-વજન અને ફોન્ટ-માપની CSS ગુણધર્મોનો ઉપયોગ કરો ..
અર્થ ધરાવતા હોય તેવા એચટીએમએલ ટેગોનો ઉપયોગ કરીને, તમે એવા પૃષ્ઠો બનાવી શકો છો કે જે
ટેગ્સ સાથેની ફક્ત આજુબાજુના તમામ વસ્તુઓ કરતાં વધુ માહિતી આપે છે
કયા HTML ટૅગ્સ અર્થપૂર્ણ છે?
જ્યારે લગભગ દરેક એચટીએમએલ 4 ટેગ અને તમામ એચટીએમએલ 5 ટૅગ્સમાં સિમેન્ટીક અર્થ હોય છે, કેટલાક ટેગ પ્રકૃતિ મુખ્યત્વે સિમેન્ટીક છે.
ઉદાહરણ તરીકે, HTML5 એ અને ટૅગ્સને સિમેન્ટીક અર્થના અર્થમાં પુનઃવ્યાખ્યાયિત કર્યા છે ટૅગ વધારાની મહત્વ નથી, પરંતુ સામાન્ય રીતે બોલ્ડમાં રેન્ડર કરેલો ટેક્સ્ટ છે. ટેગ વિશેષ મહત્ત્વ અથવા ભાર વ્યક્ત કરતું નથી, પરંતુ તે લખાણને વ્યાખ્યાયિત કરે છે જે સામાન્ય રીતે ત્રાંસા અક્ષરોમાં પ્રસ્તુત થાય છે.
અર્થપૂર્ણ એચટીએમએલ ટૅગ્સ
સંક્ષેપ સંજ્ઞા <બ્લોકક્વોટ> લાંબા અવતરણ વ્યાખ્યા દસ્તાવેજનાં લેખક (ઓ) માટેનું સરનામું પ્રશસ્તિ કોડ સંદર્ભ ટેલીટાઇપ ટેક્સ્ટ લોજિકલ ડિવિઝન સામાન્ય ઇનલાઇન શૈલી કન્ટેનર કાઢી નાખેલ ટેક્સ્ટ શામેલ કરેલ ટેક્સ્ટ ભાર મજબૂત ભાર
પ્રથમ-સ્તરનું હેડલાઇન
સેકન્ડ લેવલ હેડલાઇન
થર્ડ-લેવલ હેડલાઇન
ચોથા-સ્તરની હેડલાઇન
ફિફ્થ સ્તરની હેડલાઇન
છઠ્ઠા સ્તરનું હેડલાઇન
થિમેટિક વિરામ વપરાશકર્તા દ્વારા દાખલ કરવામાં આવેલ ટેક્સ્ટ <પૂર્વ> પ્રી-ફોર્મેટ કરેલો ટેક્સ્ટ
લઘુ ઇનલાઇન અવતરણ <સેમ્પ> નમૂના આઉટપુટ સબસ્ક્રિપ્ટ સુપરસ્ક્રિપ્ટ ચલ અથવા વપરાશકર્તા વ્યાખ્યાયિત લખાણ