HTML સામગ્રી માળખું: નક્કર પૃષ્ઠો બનાવવા માટે સંપૂર્ણ માર્ગદર્શિકા

મુખ્ય પૃષ્ઠ » પાયથોન » HTML સામગ્રી માળખું: નક્કર પૃષ્ઠો બનાવવા માટે સંપૂર્ણ માર્ગદર્શિકા

HTML માં સામગ્રીનું માળખું કેવી રીતે બનાવવું તે શીખવું એ એક પૃષ્ઠ વચ્ચેનો તફાવત છે જે ફક્ત "સ્ક્રીન પર કંઈક બતાવે છે" અને એક પૃષ્ઠ જે નેવિગેટ કરવા માટે સરળ, સુલભ અને SEO-ફ્રેન્ડલી છે. જ્યારે તમારું HTML સ્પષ્ટ વંશવેલો સાથે ગોઠવાય છે, ત્યારે બ્રાઉઝર્સ, સર્ચ એન્જિન અને સહાયક તકનીકો તરત જ સમજી જાય છે કે દરેક વિભાગનો અર્થ શું છે અને તે બધા કેવી રીતે એકસાથે બંધબેસે છે.

HTML ને ફક્ત પેજ પર ટૅગ્સ નાખવાની એક રીત તરીકે વિચારવાને બદલે, તેને તમારા દસ્તાવેજના બ્લુપ્રિન્ટ તરીકે જોવામાં મદદ મળે છે. એક નક્કર રચના સાથે તમે વ્યાખ્યાયિત કરો છો કે તમારી મુખ્ય સામગ્રી ક્યાં રહે છે, શીર્ષકો કેવી રીતે સંબંધિત છે, નેવિગેશન શું છે, ગૌણ માહિતી શું છે, અને કયા ભાગો હેડમાં દસ્તાવેજનું વર્ણન કરે છે. આ માર્ગદર્શિકામાં આપણે HTML માં સામગ્રી માળખામાં ઊંડાણપૂર્વક જઈશું: પૃષ્ઠના વૈશ્વિક હાડપિંજરથી, શીર્ષકો, અર્થશાસ્ત્ર, સુલભતા અને વાસ્તવિક દુનિયાના પૃષ્ઠો માટે કેટલાક કોંક્રિટ લેઆઉટ પેટર્ન.

૧. HTML દસ્તાવેજનું વૈશ્વિક માળખું

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

પહેલી જ લાઇન ડોકટાઇપ ઘોષણા છે, જે આ રીતે લખાયેલી છે HTML5 માં. આ સૂચના દૃશ્યમાન આઉટપુટ ઉત્પન્ન કરતી નથી; તે બ્રાઉઝરને ક્વિર્ક્સ મોડને બદલે સ્ટાન્ડર્ડ્સ મોડનો ઉપયોગ કરવાનું કહે છે, જે લેગસી રેન્ડરિંગ વર્તણૂકોને ટાળે છે જે તમારા લેઆઉટ અથવા CSS ને સંપૂર્ણપણે તોડી શકે છે.

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

સુલભતા, SEO અને અનુવાદ સાધનો માટે ભાષાને લેંગ સાથે જાહેર કરવી જરૂરી છે. સ્ક્રીન રીડર્સ તેનો ઉપયોગ સાચા ઉચ્ચારણ નિયમો પસંદ કરવા માટે કરે છે, સર્ચ એન્જિન અને ઓટોમેટિક અનુવાદકો તેનો ઉપયોગ પ્રાથમિક ભાષાને સમજવા માટે કરે છે, અને CSS [lang|=”fr”] અથવા :lang(en) જેવા પસંદગીકારોનો ઉપયોગ કરીને ભાષા-વિશિષ્ટ શૈલીને પણ લક્ષ્ય બનાવી શકે છે.

રુટ html એલિમેન્ટની અંદર હંમેશા બે ડાયરેક્ટ ચાઇલ્ડ હોય છે: અને . હેડમાં પેજનું અર્થઘટન અને પ્રસ્તુતિ કરવા માટે જરૂરી બધા મેટાડેટા અને સંસાધનો (એન્કોડિંગ, શીર્ષક, CSS, ચિહ્નો, કેનોનિકલ URL, વગેરે) હોય છે, જ્યારે બોડીમાં તે સામગ્રી હોય છે જે વપરાશકર્તાઓ ખરેખર બ્રાઉઝર વિન્ડોમાં જુએ છે અને તેની સાથે ક્રિયાપ્રતિક્રિયા કરે છે.

૨. શું છે (અને તે શા માટે મહત્વનું છે)

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

અંદરની પહેલી વસ્તુઓમાંથી એક નો ઉપયોગ કરીને અક્ષર એન્કોડિંગ ઘોષણા હોવી જોઈએ . UTF‑8 એ HTML5 માટે માનક છે, જે લગભગ દરેક પાત્ર અને ઇમોજીને સપોર્ટ કરે છે, અને ખાતરી કરે છે કે તમારા શીર્ષકો, ટેક્સ્ટ, CSS અને JavaScript નું અર્થઘટન યોગ્ય રીતે થાય છે, પછી ભલે તમે કોઈપણ ભાષા અથવા પ્રતીકોનો ઉપયોગ કરો છો.

દરેક પૃષ્ઠે એક અનન્ય અને વર્ણનાત્મક પણ વ્યાખ્યાયિત કરવું જોઈએ તત્વ. અંદરની સામગ્રી … બ્રાઉઝર ટેબ, બુકમાર્ક્સ, બ્રાઉઝર ઇતિહાસ અને સૌથી અગત્યનું, શોધ એન્જિન પરિણામ પૃષ્ઠોમાં પ્રાથમિક ક્લિક કરી શકાય તેવા હેડલાઇન તરીકે દેખાય છે સિવાય કે ચોક્કસ મેટા ટેગ દ્વારા ઓવરરાઇટ કરવામાં આવે. SEO ના દૃષ્ટિકોણથી, આ તમારા દસ્તાવેજમાં સૌથી વધુ મૂલ્યવાન ટેક્સ્ટના ટુકડાઓમાંનો એક છે.

આધુનિક લેઆઉટમાં બીજું લગભગ ફરજિયાત મેટા તત્વ વ્યૂપોર્ટ ડિક્લેરેશન છે. ઉપયોગ કરીને તમે મોબાઇલ બ્રાઉઝર્સને ડેસ્કટોપ ડિઝાઇનને નાની સ્ક્રીનમાં સંકોચવાને બદલે ડિવાઇસ પહોળાઈ પ્રમાણે લેઆઉટનું કદ નક્કી કરવાનું કહો છો, જે રિસ્પોન્સિવ ડિઝાઇન અને મૂળભૂત મોબાઇલ અને ઍક્સેસિબિલિટી ઓડિટ પાસ કરવા માટે મહત્વપૂર્ણ છે.

અક્ષરસેટ, શીર્ષક અને વ્યૂપોર્ટ ઉપરાંત, હેડ એ જગ્યા છે જ્યાં તમે તમારા મોટાભાગના મેટાડેટા, શૈલીઓ અને મુખ્ય લિંક્સને વ્યાખ્યાયિત કરો છો. આમાં SEO-લક્ષી મેટા વર્ણનો, CSS ફાઇલો, સાઇટ આઇકોન્સ, વૈકલ્પિક ભાષા સંસ્કરણો, કેનોનિકલ URL, વેબ મેનિફેસ્ટ, પ્રીકનેક્ટ્સ અને ઘણું બધું શામેલ છે. આ બધા ભાગો તમારી સામગ્રી રચનાને કેવી રીતે સમજવામાં આવે છે અને તમારી સાઇટ કેટલી ઉપયોગી લાગે છે તેમાં પરોક્ષ રીતે ફાળો આપે છે.

આવશ્યક મેટાડેટા અને માળખાકીય સંસાધનો

CSS સામાન્ય રીતે અંદર જોડાયેલ હોય છે ઉપયોગ કરીને . બાહ્ય સ્ટાઇલશીટ્સ પ્રેઝન્ટેશનને સ્ટ્રક્ચરથી અલગ રાખે છે, વધુ સારા પ્રદર્શન માટે પૃષ્ઠો પર કેશ કરી શકાય છે, અને તમારી ડિઝાઇન સિસ્ટમ માટે સત્યનો એક જ સ્ત્રોત જાળવવામાં મદદ કરે છે.

તમે CSS ને a માં પણ સમાવી શકો છો block within , or even import additional stylesheets from there. ઉદાહરણ તરીકે, ડેવલપર્સ ક્યારેક સ્ટાઇલશીટને ચોક્કસ કેસ્કેડ લેયરમાં મૂકવા માટે સ્ટાઇલ ટેગની અંદર @import નો ઉપયોગ કરે છે, અથવા સમગ્ર સાઇટ પર તેનો સંદર્ભ આપતા પહેલા :root લેવલ પર CSS કસ્ટમ પ્રોપર્ટીઝ (ચલો) જાહેર કરે છે.

આ element ફક્ત સ્ટાઇલશીટ્સ કરતાં વધુ હેતુઓ પૂરા પાડે છે. rel એટ્રીબ્યુટ બદલીને તમે rel=”icon” સાથે ફેવિકોન તરફ નિર્દેશ કરી શકો છો, rel=”alternate” અને hreflang સાથે વૈકલ્પિક ભાષાના સંસ્કરણોને વ્યાખ્યાયિત કરી શકો છો, rel=”canonical” સાથે કેનોનિકલ URL, અથવા સંદર્ભ એપ્લિકેશન મેનિફેસ્ટ અને બ્રાઉઝર્સ અને ક્રોલર્સને જાણતા હોવા જોઈએ તેવા અન્ય સંબંધોનો ઉલ્લેખ કરી શકો છો.

ચિહ્નોને વ્યાખ્યાયિત કરીને ખાતરી કરે છે કે તમારી બ્રાન્ડ બ્રાઉઝર ટેબ અને બુકમાર્ક્સમાં ઓળખી શકાય તેવી છે. તમે વિવિધ કદ અથવા પ્રકારો (જેમ કે PNG અથવા SVG) સ્પષ્ટ કરી શકો છો, અને iOS જેવા પ્લેટફોર્મ માટે rel=”apple-touch-icon” સાથે ખાસ ચિહ્નો અથવા Safari માં પિન કરેલા ટેબ્સ માટે માસ્ક ચિહ્નો પણ પ્રદાન કરી શકો છો.

બહુભાષી અથવા સામગ્રી-સિંડિકેશન સેટઅપ માટે વૈકલ્પિક લિંક્સ મહત્વપૂર્ણ છે. જ્યારે તમે ઉપયોગ કરો છો , ઉદાહરણ તરીકે, તમે સર્ચ એન્જિનને કહી રહ્યા છો કે તે જ પૃષ્ઠનું ફ્રેન્ચ સંસ્કરણ અસ્તિત્વમાં છે અને તે કઈ ભાષા/પ્રદેશ સંયોજનને લક્ષ્ય બનાવે છે. તેવી જ રીતે, જો તમે યોગ્ય પ્રકારનો ઉલ્લેખ કરો છો, તો વૈકલ્પિક લિંક્સ RSS ફીડ્સ અથવા PDF પ્રકારો તરફ નિર્દેશ કરી શકે છે.

કેનોનિકલ URL, સ્ક્રિપ્ટો અને ભાગ્યે જ ઉપયોગમાં લેવાતા

rel="canonical" સાથેની કેનોનિકલ લિંક્સ કયો URL અધિકૃત સ્ત્રોત છે તે દર્શાવીને ડુપ્લિકેટ સામગ્રીની પરિસ્થિતિઓને ઉકેલવામાં મદદ કરે છે. જો એક જ લેખ બહુવિધ પાથ પર અસ્તિત્વમાં હોય, અથવા અન્ય ડોમેન પર ક્રોસ-પોસ્ટ કરવામાં આવે, તો કેનોનિકલ URL રેન્કિંગ સિગ્નલોને એકીકૃત કરે છે અને શોધ એન્જિનને કયા સંસ્કરણને અનુક્રમિત કરવું તે અનુમાન કરવાનું ટાળે છે.

જાવાસ્ક્રિપ્ટ આનો ઉપયોગ કરીને જોડાયેલ છે element, which can either embed inline code or reference an external file through the src attribute. જાવાસ્ક્રિપ્ટ ડિફોલ્ટ રૂપે રેન્ડર-બ્લોકિંગ હોવાથી, ઘણા ડેવલપર્સ બોડીના અંતે સ્ક્રિપ્ટ ટૅગ્સ મૂકે છે અથવા ડિફર અથવા એસિંક એટ્રિબ્યુટ્સનો ઉપયોગ કરે છે જેથી સ્ક્રિપ્ટ્સ એક્ઝિક્યુટ થાય તે પહેલાં HTML સામગ્રી રેન્ડર થઈ શકે.

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

આ એલિમેન્ટ, જે ફક્ત હેડમાં દેખાય છે, તે બધી સંબંધિત લિંક્સ માટે બેઝ URL અને ડિફોલ્ટ લક્ષ્ય વ્યાખ્યાયિત કરે છે. સેટ કરીને તમે બ્રાઉઝરને અસરકારક રીતે કહો છો કે પૃષ્ઠ પરના દરેક સંબંધિત URL ને તે રૂટમાંથી ઉકેલવા જોઈએ અને, વૈકલ્પિક રીતે, નવી વિંડો અથવા ટોચના સ્તરની ફ્રેમ જેવા ચોક્કસ બ્રાઉઝિંગ સંદર્ભમાં ખોલવા જોઈએ.

જોકે શક્તિશાળી હોઈ શકે છે, તેની આડઅસરો છે, ખાસ કરીને ઇન-પેજ એન્કર અને સંબંધિત સંસાધન પાથ માટે. દરેક દસ્તાવેજ માટે ફક્ત એક જ બેઝ એલિમેન્ટની મંજૂરી છે, તે કોઈપણ સંબંધિત URL પહેલાં દેખાવું જોઈએ, અને તે સરળ એન્કરને સંપૂર્ણ URL વિનંતીઓમાં રૂપાંતરિત કરે છે જેમાં બેઝ href સાથે જોડાયેલા ટુકડાઓ હોય છે.

૩. દૃશ્યમાન સામગ્રી સ્તર: અને સિમેન્ટીક લેઆઉટ

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

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

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

નેવિગેશન બ્લોક્સ માટે સમર્પિત છે અને સામાન્ય રીતે મુખ્ય મેનુઓ અથવા મહત્વપૂર્ણ લિંક્સના જૂથો માટે વપરાય છે. તમે મુખ્ય નેવિગેશનને હેડરની અંદર મૂકી શકો છો, પરંતુ nav અન્યત્ર પણ દેખાઈ શકે છે, ઉદાહરણ તરીકે સાઇડબાર અથવા ફૂટરમાં, જ્યાં સુધી તેનો ઉપયોગ નેવિગેશન માટે થાય છે અને અસંબંધિત લિંક્સના સામાન્ય સંગ્રહ માટે નહીં.

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

વિભાગો, લેખો, બાજુઓ અને ફૂટર

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

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

મુખ્ય પ્રવાહ સાથે સ્પર્શક રીતે સંબંધિત સામગ્રી માટે આરક્ષિત છે, જેમ કે સાઇડબાર, પુલ ક્વોટ્સ, સંબંધિત લિંક્સ અથવા જાહેરાત બ્લોક્સ. કારણ કે તેનો હેતુ પૂરક છે, સ્ક્રીન રીડર્સ અને અન્ય સાધનો તેને તે મુજબ સારવાર આપી શકે છે, અને વપરાશકર્તાઓ મુખ્ય કથાને ગૌણ વધારાની વાર્તાઓથી વધુ સરળતાથી અલગ કરી શકે છે.

વિભાગના અંતે અથવા આખા પૃષ્ઠના તળિયે દેખાય છે. પેજ-લેવલ ફૂટરમાં સામાન્ય રીતે કૉપિરાઇટ સૂચનાઓ, સંપર્ક માહિતી, ગૌણ નેવિગેશન, કાનૂની લિંક્સ અથવા સાઇટ ક્રેડિટ્સ હોય છે, જ્યારે લેખ-લેવલ ફૂટરમાં લેખકના બાયો, શ્રેણીઓ, અપડેટ તારીખો અથવા સંબંધિત પોસ્ટ્સ હોઈ શકે છે.

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

૪. મથાળાનો વંશવેલો અને લખાણ રચના

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

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

મથાળા પછી આવતા ફકરા અને અન્ય સામગ્રી તે મથાળા દ્વારા વ્યાખ્યાયિત વિભાગની છે. જ્યારે સમાન સ્તરનું નવું મથાળું દેખાય છે, ત્યારે પાછલો વિભાગ બંધ માનવામાં આવે છે અને એક નવો શરૂ થાય છે. આ ગર્ભિત માળખું એ સહાયક તકનીકોનો ઉપયોગ એક રૂપરેખા બનાવવા માટે કરે છે જે વપરાશકર્તાઓ ઝડપથી પસાર થઈ શકે છે.

મનસ્વી રીતે સ્તરો છોડવાથી - જેમ કે h1 થી સીધા h4 પર કૂદકો મારવાથી - ઓટોમેટેડ ટૂલ્સ અને રીડર્સ બંનેને મૂંઝવણમાં મૂકી શકાય છે. સામાન્ય ભલામણ એ છે કે પદાનુક્રમમાં તબક્કાવાર આગળ વધો: પેટાવિભાગો માટે h1 થી h2 સુધી, પછી વૈકલ્પિક રીતે h3 સુધી, અને તેથી આગળ, સામગ્રીને વધુ ઊંડાણમાં ગોઠવતી વખતે એક સમયે ફક્ત એક સ્તર નીચે ઉતરવું.

બ્રાઉઝર્સ સામાન્ય રીતે હેડિંગ પર ડિફોલ્ટ શૈલીઓ લાગુ કરે છે: મોટા ફોન્ટ કદ, બોલ્ડ વજન અને વધારાનું વર્ટિકલ અંતર. આ બિલ્ટ-ઇન શૈલીઓ પહેલાથી જ માળખાને દૃષ્ટિની રીતે સ્પષ્ટ બનાવે છે, પરંતુ તમે અંતર્ગત સિમેન્ટીક વંશવેલોને અકબંધ રાખીને CSS વડે પ્રસ્તુતિને સુધારી શકો છો.

ફકરા, યાદીઓ અને ઇનલાઇન સિમેન્ટિક્સ

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

ક્રમબદ્ધ યાદીઓ ( ) અને ક્રમબદ્ધ યાદીઓ ( ) સાથે વસ્તુઓ પગલાં, સુવિધાઓ અથવા વારંવાર પૂછાતા પ્રશ્નો જેવી જૂથબદ્ધ માહિતી માટે આદર્શ છે. ક્રમબદ્ધ યાદીઓ ક્રમ અથવા પ્રાથમિકતા દર્શાવે છે, જ્યારે ક્રમબદ્ધ યાદીઓ ક્રમ સૂચવ્યા વિના ફક્ત સંબંધિત વસ્તુઓનું જૂથ બનાવે છે; બંને જટિલ સમજૂતીઓની રચના માટે અત્યંત મદદરૂપ છે.

, , , અને અન્ય જેવા ઇનલાઇન તત્વો ફકરાના પ્રવાહને તોડ્યા વિના સામગ્રીને સમૃદ્ધ બનાવે છે. મજબૂત મહત્વ જણાવે છે (અને સામાન્ય રીતે બોલ્ડ દેખાય છે), ટેક્સ્ટ પર ભાર મૂકે છે (ઘણીવાર ઇટાલિક), અને હાઇપરલિંક્સ બનાવે છે જે તમારી સાઇટ પર અથવા બાહ્ય સંસાધનો સાથે દસ્તાવેજોને જોડે છે.

છબીઓ સાથે બદલાયેલા તત્વો ગણવામાં આવે છે અને સામગ્રીને લપેટતા નથી, પરંતુ તેઓ હજુ પણ alt જેવા લક્ષણો દ્વારા સિમેન્ટીક માળખામાં ભાગ લે છે. ઍક્સેસિબિલિટી અને SEO માટે alt એટ્રિબ્યુટ ખાસ કરીને મહત્વપૂર્ણ છે, કારણ કે તે એવા વપરાશકર્તાઓને છબીનું વર્ણન કરે છે જેઓ તેને જોઈ શકતા નથી અને સર્ચ એન્જિન જે ફક્ત ટેક્સ્ટનું વિશ્લેષણ કરે છે.

બ્લોક-લેવલ અને ઇનલાઇન તત્વોને વિચારપૂર્વક જોડવાથી તમે HTML દ્વારા વંશવેલો, સંબંધો અને ભારને સંપૂર્ણપણે વ્યક્ત કરી શકો છો, જેમાં રંગો, ફોન્ટ્સ અને અંતર જેવી દ્રશ્ય વિગતો CSS પર છોડી દેવામાં આવે છે. ચિંતાઓનું આ વિભાજન તમારા માર્કઅપને સ્વચ્છ રાખે છે અને પછીથી ડિઝાઇનમાં ફેરફાર કરવાનું સરળ બનાવે છે.

૫. સામગ્રી માળખામાં સુલભતા અને ભાષા

સુવ્યવસ્થિત HTML દસ્તાવેજ ફક્ત વ્યવસ્થિત દેખાવા વિશે નથી; તે સુલભતા માટે એક પૂર્વશરત છે. જે લોકો સ્ક્રીન રીડર્સ, કીબોર્ડ નેવિગેશન અથવા અન્ય સહાયક તકનીકો પર આધાર રાખે છે તેઓ સામગ્રીને અસરકારક રીતે સમજવા અને આગળ વધવા માટે તમારા HTML સિમેન્ટિક્સ પર આધાર રાખે છે.

દસ્તાવેજ ભાષાને lang સાથે જાહેર કરવી element એ પ્રથમ સુલભતા પગલાંઓમાંનું એક છે. જ્યારે ભાષા સ્પષ્ટ હોય છે, ત્યારે સ્ક્રીન રીડર્સ સાચા ઉચ્ચાર અને શબ્દકોશો પસંદ કરે છે, અને સ્વચાલિત અનુવાદ સાધનો પ્રદેશો અને બોલીઓમાં તમારી સામગ્રીને વધુ સચોટ રીતે હેન્ડલ કરે છે.

તમે અથવા જેવા તત્વો પર lang નો ઉપયોગ કરીને શરીરની અંદર ભાષાના ફેરફારોને પણ ચિહ્નિત કરી શકો છો . જ્યારે કોઈ ટુકડો અલગ ભાષામાં સ્વિચ કરે છે, ત્યારે તે સ્નિપેટ પર lang=”fr-CA” અથવા lang=”pt-BR” સેટ કરવાથી સહાયક સાધનોને સંકેત મળે છે કે ઉચ્ચારણ અને વાંચન નિયમો ફક્ત તે ભાગ માટે જ બદલાવા જોઈએ.

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

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

તમારા HTML ને માન્ય કરવા અને ઓટોમેટેડ ટૂલ્સ અને મેન્યુઅલ પરીક્ષણોનો ઉપયોગ કરીને ઍક્સેસિબિલિટી ચેક ચલાવવાથી માળખાકીય સમસ્યાઓને વહેલા ઉકેલવામાં મદદ મળે છે. ટૂલ્સ ગુમ થયેલ Alt વિશેષતાઓ, અમાન્ય નેસ્ટિંગ, તૂટેલા મથાળાના ક્રમ અથવા ખોટા લેન્ડમાર્ક ઉપયોગને શોધી શકે છે, જે બધા વાસ્તવિક વપરાશકર્તાઓને અસર કરે તે પહેલાં તમારા માર્કઅપમાં સીધા જ સુધારી શકાય છે.

૬. વેબસાઇટની સામગ્રી રચનાનું આયોજન કરવું

એક જ ટૅગ લખતા પહેલા, તમારી સાઇટ અને પૃષ્ઠોની તાર્કિક રચનાનું આયોજન કરવું યોગ્ય છે. વિભાગો, માહિતી પ્રાથમિકતાઓ અને નેવિગેશન પ્રવાહોના સંદર્ભમાં વિચાર કરવાથી HTML બને છે જે સર્ચ એન્જિન માટે જાળવવા, વિસ્તૃત કરવા અને ઑપ્ટિમાઇઝ કરવા માટે સરળ છે.

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

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

શરૂઆતમાં જ તે બ્લોક્સને હેડિંગ સોંપવાથી તમારા h1-h6 વંશવેલો સુસંગત રહે છે. તમે અગાઉથી નક્કી કરો કે સિંગલ h1 શું હશે, કયા વિભાગો h2 શીર્ષકોને પાત્ર છે, અને વાચકને દબાવ્યા વિના જટિલ વિષયો સમજાવવા માટે h3 અથવા h4 જેવા ઊંડા ઉપશીર્ષકો ક્યાં જરૂરી છે.

SEO અને UX ના દ્રષ્ટિકોણથી, DOM માં મુખ્ય સામગ્રી અને મહત્વપૂર્ણ વિભાગો વહેલા મૂકવા એ સમજદારીભર્યું છે. સર્ચ એન્જિન સામાન્ય રીતે દસ્તાવેજની ટોચની નજીકની સામગ્રી પર વધુ ધ્યાન આપે છે, અને વપરાશકર્તાઓ લાંબા પ્રસ્તાવનાઓ અથવા સુશોભન તત્વોને સ્ક્રોલ કરવાને બદલે પ્રાથમિક માહિતી ઝડપથી શોધવાનું પસંદ કરે છે.

જાળવણીયોગ્ય HTML માળખાં માટે શ્રેષ્ઠ પ્રથાઓ

જ્યારે જરૂરી હોય ત્યારે માળખાકીય તત્વોને લેબલ કરવા માટે વર્ણનાત્મક વર્ગ નામો અને ID નો ઉપયોગ કરો, પરંતુ વધુ પડતા વિભાગોને ટાળો. .main-nav, .site-header અથવા .sidebar જેવા વર્ગો તમને એક નજરમાં જણાવે છે કે ઘટક શું કરે છે, જેનાથી મહિનાઓ પછી તમારા HTML અને CSS વાંચવામાં ખૂબ સરળ બને છે.

તમારા HTML ને શક્ય તેટલું સપાટ રાખો અને સાથે સાથે વાસ્તવિક વંશવેલો પણ વ્યક્ત કરો. ઊંડા નેસ્ટેડ કન્ટેનર જે ફક્ત સ્ટાઇલ માટે અસ્તિત્વમાં છે તેને ઘણીવાર વધુ વિચારશીલ CSS દ્વારા બદલી શકાય છે, જેના પરિણામે સ્વચ્છ અને હળવા માર્કઅપ મળે છે જેની સાથે દરેક માટે કામ કરવું સરળ બને છે.

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

જ્યારે પણ તમે કોઈ પૃષ્ઠ વિસ્તૃત કરો છો અથવા કોઈ વિભાગ ફરીથી ડિઝાઇન કરો છો ત્યારે તમારા માળખાની ફરી મુલાકાત લો. HTML દસ્તાવેજો માટે સમય જતાં એક વખતના રેપર્સ અને એડહોક તત્વો એકઠા કરવાનું સરળ બને છે, તેથી સમયાંતરે તેમને સુસંગત સિમેન્ટીક આકારમાં ફરીથી રિફેક્ટર કરવાથી જાળવણી, કામગીરી અને સુલભતામાં ફાયદો થાય છે.

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

7. સામાન્ય પૃષ્ઠ પ્રકારો માટે વ્યવહારુ રચના પેટર્ન

વિવિધ પ્રકારના પૃષ્ઠો માળખાકીય પેટર્ન શેર કરે છે જેનો તમે ફરીથી ઉપયોગ કરી શકો છો અને પ્રોજેક્ટ્સમાં અનુકૂલન કરી શકો છો. આ પેટર્નને ઓળખવાથી તમને એવી સામગ્રી રચનાઓ ડિઝાઇન કરવામાં મદદ મળશે જે વપરાશકર્તાઓને સ્વાભાવિક લાગે અને HTML માં અમલમાં મૂકવા માટે સરળ હોય.

એક લાક્ષણિક હોમપેજ વૈશ્વિકથી શરૂ થઈ શકે છે લોગો અને પ્રાથમિક ધરાવતો . આ ઘણીવાર અનુસરવામાં આવે છે બહુવિધ સાથે બ્લોક્સ: h1 અને કોલ-ટુ-એક્શન સાથેનો હીરો વિભાગ, ફીચર્સ વિભાગ, કદાચ પ્રશંસાપત્રો માટેનો વિભાગ, અને વપરાશકર્તાઓને સંપર્ક કરવા અથવા સાઇન અપ કરવા માટે આમંત્રિત કરતો અંતિમ વિભાગ.

મુખ્ય સામગ્રી નીચે, a સામાન્ય રીતે વૈશ્વિક માહિતી અને પૂરક નેવિગેશન પૂરું પાડે છે. ગોપનીયતા નીતિઓ, સેવાની શરતો, સંપર્ક વિકલ્પો, સામાજિક નેટવર્ક્સ અને ગૌણ મેનુઓની લિંક્સ અહીં લાઇવ છે, જે ઉપરોક્ત પ્રાથમિક સામગ્રીથી વિચલિત થયા વિના તેમને શોધવાનું સરળ બનાવે છે.

બ્લોગ પોસ્ટ પેજ એ માટે એક સંપૂર્ણ ઉમેદવાર છે તત્વ. લેખમાં સામાન્ય રીતે પોસ્ટ શીર્ષક (ઘણીવાર પૃષ્ઠનું h1), પ્રકાશન તારીખ અને લેખકની વિગતો સાથે તેનું પોતાનું હેડર હશે, ત્યારબાદ પોસ્ટનો મુખ્ય ભાગ, h2/h3 શીર્ષકોવાળા વિભાગોમાં વિભાજિત, અને અંતે ટૅગ્સ, શેર બટનો અથવા સંબંધિત સામગ્રી લિંક્સ ધરાવતો લેખ ફૂટર હશે.

સાઇડબાર અથવા ગૌણ પેનલ કુદરતી રીતે રજૂ થાય છે તત્વો. તેમાં તાજેતરની પોસ્ટ્સની યાદી, શ્રેણી ફિલ્ટર્સ, ન્યૂઝલેટર સાઇન-અપ ફોર્મ્સ અથવા સંદર્ભિત મદદ શામેલ હોઈ શકે છે. કારણ કે aside ને અર્થપૂર્ણ રીતે પૂરક સામગ્રી તરીકે ચિહ્નિત કરવામાં આવે છે, સહાયક તકનીકો તેને વપરાશકર્તાઓ સમક્ષ આ રીતે રજૂ કરી શકે છે.

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

8. HTML તત્વો, વિશેષતાઓ અને બંધારણમાં તેમની ભૂમિકા

આ બધા પેટર્નની નીચે, HTML માં બધું જ તત્વો, ટૅગ્સ અને વિશેષતાઓ સુધી ઉકળે છે. તેઓ એકસાથે કેવી રીતે કાર્ય કરે છે તે સમજવાથી તમને તમારી સામગ્રી રચના, પ્રસ્તુતિ હુક્સ અને વર્તન પર સૂક્ષ્મ નિયંત્રણ મળે છે.

HTML એલિમેન્ટ એક ઓપનિંગ ટેગ, વૈકલ્પિક એટ્રીબ્યુટ્સ, કેટલીક સામગ્રી અને મોટાભાગના કિસ્સાઓમાં, ક્લોઝિંગ ટેગથી બનેલું હોય છે. દાખ્લા તરીકે, આ એક ફકરો છે. શરૂઆત ટૅગ શામેલ છે , ટેક્સ્ટ નોડ, અને એન્ડ ટેગ , જે બધા મળીને ફકરા તત્વનું પ્રતિનિધિત્વ કરે છે.

શરૂઆતના ટેગની અંદર વિશેષતાઓ દેખાય છે અને તત્વ વિશે વધારાની માહિતી પૂરી પાડે છે. તે name=”value” જોડીઓ તરીકે આવે છે, જેમ કે class=”highlight”, id=”intro” અથવા href=”/contact”. કેટલાક લક્ષણો વૈશ્વિક હોય છે અને કોઈપણ ઘટક (જેમ કે class, id, lang) પર દેખાઈ શકે છે, જ્યારે અન્ય ચોક્કસ ટૅગ્સ માટે વિશિષ્ટ હોય છે (જેમ કે img માટે src અથવા ઇનપુટ માટે type).

મોટા દસ્તાવેજોની રચના અને સ્ટાઇલ માટે વર્ગો ખાસ કરીને મહત્વપૂર્ણ છે. એક જ વર્ગને બહુવિધ ઘટકોને સોંપીને - જેમ કે, class="important" - તમે સામાન્ય CSS નિયમો લાગુ કરી શકો છો અથવા તેમને JavaScript માં લક્ષ્ય બનાવી શકો છો, તમારા માળખાને લવચીક રાખીને હજુ પણ વ્યવસ્થાપિત કરી શકાય છે.

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

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

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