സെമാന്റിക് HTML ഉപയോഗിക്കേണ്ടത് എന്തുകൊണ്ട്?

ഞങ്ങൾ ഇന്ന് വ്യവസായത്തിന് ഉത്തരവാദികളായ വെബ് സ്റ്റാൻഡേർഡ്സ് പ്രസ്ഥാനത്തിന്റെ ഒരു സുപ്രധാന തത്വം ആണ് HTML ഘടകങ്ങൾ അവ സ്ഥിരസ്ഥിതിയായി ബ്രൗസറിൽ എങ്ങനെ ദൃശ്യമാകാമെന്നതിനേക്കാൾ അർത്ഥമാക്കുന്നത്. ഇത് സെമെന്റിക് എച്ടിഎംഎൽ എന്നറിയപ്പെടുന്നു.

സെമാന്റിക്ക് HTML എന്താണ്?

സെമാന്റിക് HTML അല്ലെങ്കിൽ സെമാന്റിക് മാർക്കപ്പ് HTML ആണ്, അത് അവതരണമെന്നതിനു പകരം വെബ് പേജിലേക്ക് അർത്ഥം അവതരിപ്പിക്കുന്നു. ഉദാഹരണമായി, ഒരു

ടാഗ് സൂചിപ്പിക്കപ്പെട്ടിരിക്കുന്നത്, ടെക്സ്റ്റ് ഒരു ഖണ്ഡികയാണ്.

ഇത് സെമാന്റിക്, അവതരണങ്ങൾ ആണ്. കാരണം ആളുകൾ എന്തൊക്കെ ഖണ്ഡികകളാണെന്നും ബ്രൗസറുകൾ എങ്ങനെ പ്രദർശിപ്പിക്കാമെന്നും അവർക്കറിയാം.

ഈ സമവാക്യത്തിന്റെ ഫ്ലിപ് സൈഡിൽ, ഉം ഉം പോലെയുള്ള ടാഗുകൾ സെമാന്റിക് അല്ല, കാരണം അവ വാചകം (ധൈര്യശാലിനി അല്ലെങ്കിൽ ഇറ്റാലിക്ക്) എങ്ങനെ നോക്കണം, മാർക്ക്അപ്പിനുള്ള കൂടുതൽ അർത്ഥങ്ങൾ നൽകരുത്.

സിമാറ്റിക് HTML ടാഗുകളുടെ ഉദാഹരണങ്ങൾ

,
, കൂടാതെ എന്നിവയിലൂടെ തലക്കെട്ട് ടാഗുകൾ ഉൾക്കൊള്ളുന്നു. നിങ്ങൾ ഒരു സ്റ്റാൻഡേർഡ്-കംപ്ലൈന്റ് വെബ് സൈറ്റ് നിർമ്മിക്കുന്പോൾ ഉപയോഗിക്കുന്ന പല സിമാറ്റിക് HTML ടാഗുകളും ഉണ്ട്.

എന്തുകൊണ്ട് സെമാന്റിക്സിനെക്കുറിച്ച് നിങ്ങൾ ശ്രദ്ധിക്കണം

സെമാന്റിക്ക് എച്.ടി.യുടെ പ്രയോജനം ആശയവിനിമയത്തിനുള്ള ആഗ്രഹം ഏത് വെബ് പേജിന്റെയും ഡ്രൈവിംഗ് ലക്ഷ്യം ആയിരിക്കണം. നിങ്ങളുടെ പ്രമാണത്തിൽ സെമാന്റിക് ടാഗുകൾ ചേർക്കുന്നതിലൂടെ, ആശയവിനിമയത്തിൽ സഹായിക്കുന്ന ആ പ്രമാണത്തെക്കുറിച്ചുള്ള അധിക വിവരങ്ങൾ നിങ്ങൾ നൽകുന്നു. പ്രത്യേകമായി, ഒരു പേജിന്റെയും അതിന്റെ ഉള്ളടക്കത്തിന്റെയും അർത്ഥം എന്താണ് എന്ന് ബ്രൗസറിന് സെമാന്റിക് ടാഗുകൾ വ്യക്തമാക്കുന്നു.

ഉചിതമായ ചോദ്യങ്ങൾക്കായി ശരിയായ പേജുകൾ ഡെലിവർ ചെയ്യപ്പെടുന്നുണ്ടെന്ന് ഉറപ്പുവരുത്തുന്നതിന് തിരയൽ എഞ്ചിനുകളുമായി ഈ വ്യക്തത കൂടി ആശയവിനിമയം നടത്തുന്നു.

സെമാന്റിക് HTML ടാഗുകൾ ഒരു ടാഗിൽ അവർ നോക്കുന്ന തരത്തിൽ മാത്രം വരുന്ന ടാഗുകളുടെ ഉള്ളടക്കത്തെക്കുറിച്ചുള്ള വിവരങ്ങൾ നൽകുന്നു. ചില കോഡ് കോഡിംഗ് ഭാഷയായി ബ്രൗസറിൽ ടാഗ് വച്ചിരിക്കുന്ന ടെക്സ്റ്റ് ഉടൻ തിരിച്ചറിഞ്ഞു.

ആ കോഡ് റെൻഡർ ചെയ്യാൻ ശ്രമിക്കുന്നതിന് പകരം, നിങ്ങൾ ആ വാചകം കോഡ് ഒരു ഉദാഹരണമായി അല്ലെങ്കിൽ ഒരു തരത്തിലുള്ള ഒരു ഓൺലൈൻ ട്യൂട്ടോറിയലിന്റെ ആവശ്യകതയാണ് ഉപയോഗിക്കുന്നതെന്ന് ബ്രൌസർ മനസ്സിലാക്കുന്നു.

സെമാന്റിക് ടാഗുകൾ ഉപയോഗിക്കുന്നത് നിങ്ങളുടെ ഉള്ളടക്കം സ്റൈൽ ചെയ്യുന്നതിനായി നിങ്ങൾക്ക് ധാരാളം കൊളുത്തുകൾ നൽകുന്നു. ഒരുപക്ഷേ നിങ്ങളുടെ കോഡ് സാമ്പിളുകൾ സ്ഥിരസ്ഥിതി ബ്രൌസർ ശൈലിയിൽ പ്രദർശിപ്പിക്കാനാണ് ഇഷ്ടപ്പെടുന്നത്, പക്ഷെ നാളെ, അവരെ ഗ്രേ പശ്ചാത്തല വർണത്തോടെ വിളിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു, പിന്നീട് നിങ്ങൾക്ക് ആവശ്യമുള്ള കൃത്യമായ മോണോ-സ്പെയിസ്ഡ് ഫോണ്ട് ഫാമിലി അല്ലെങ്കിൽ ഫോണ്ട് സ്റ്റാക്ക് നിർവചിക്കണം നിങ്ങളുടെ സാമ്പിളുകൾ. സിമാറ്റിക് മാർക്കപ്പ് ഉപയോഗിച്ച് നിങ്ങൾ ഈ കാര്യങ്ങളെല്ലാം എളുപ്പത്തിൽ ചെയ്യാൻ കഴിയും.

ശരിയായ ടാഗുകൾ ഉപയോഗിക്കുക

അവതരണ ആവശ്യകതയ്ക്കുപകരം അർത്ഥമാക്കുന്നത് കൊണ്ട് അർത്ഥമാക്കുന്നത് സെമാന്റിക് ടാഗുകൾ ഉപയോഗിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുമ്പോൾ, അവരുടെ പൊതു പ്രദർശന പ്രോപ്പർട്ടികൾക്കായി നിങ്ങൾ തെറ്റായി ലളിതമായി ഉപയോഗിക്കുന്നില്ല എന്നത് ശ്രദ്ധാലുക്കളാണ്. ഏറ്റവും സാധാരണയായി ദുരുപയോഗപ്പെടുത്തിയ സെമാന്റിക് ടാഗുകളിൽ ചിലത് ഉൾപ്പെടുന്നു:

  • ബ്ലോക്ക്ക്വോട്ട് - ചില ആൾക്കാർ വാചകം ഇൻഡെന്റ് ചെയ്യുന്നതിനായി
    ടാഗ് ഉപയോഗിയ്ക്കുന്നു. കാരണം ബ്ലോക്ക്ക്വോട്ടുകൾ ഡീഫോൾട്ടായി ഇൻഡന്റ് ചെയ്തിരിയ്ക്കുന്നു. നിങ്ങൾക്ക് ഇൻഡെൻറേഷൻ പ്രയോജനപ്പെടുത്താൻ താൽപ്പര്യമുണ്ടെങ്കിൽ, എന്നാൽ ടെക്സ്റ്റ് ഒരു ബ്ലോക്ക്ക്വോട്ട് അല്ല, പകരം CSS മാർജിനുകൾ ഉപയോഗിക്കുക.
  • p - ചില വെബ് എഡിറ്റർമാർ ഈ പേജിന്റെ യഥാർത്ഥ ഖണ്ഡികകൾ നിർവചിക്കുന്നതിനു പകരം പേജിന്റെ ഘടകങ്ങൾ തമ്മിലുള്ള അധിക ഇടം ചേർക്കുന്നതിന് ഒരു പാരഗ്രാഫ് ഉപയോഗിച്ച് ഒരു പായ്ക്കറ്റില്ലാത്ത സ്പെയ്സ് ഉപയോഗിക്കുന്നു മുമ്പ് സൂചിപ്പിച്ച ഇൻഡെൻഡിംഗ് ഉദാഹരണം പോലെ, സ്ഥലം ചേർക്കാൻ മാർജിൻ അല്ലെങ്കിൽ പാഡിംഗ് ശൈലി പ്രോപ്പർട്ടി ഉപയോഗിക്കണം.