ഡിവിഡിയും സെക്ഷും തമ്മിലുള്ള വ്യത്യാസം എന്താണ്?

HTML5 SECTION എലമെന്റ് മനസിലാക്കുന്നു

നിരവധി വർഷങ്ങൾക്ക് മുമ്പ് HTML5 എന്തിനു ബാൻഡുണ്ടാക്കി, അതിനെ SECTION ഘടകവും ഉൾപ്പെടുത്തി, langauge യിലേക്ക് പുതിയ കൂട്ടായ ഘടകങ്ങൾ ചേർത്തു. HTML5 പരിചയപ്പെടുത്തുന്ന പുതിയ ഘടകങ്ങളിൽ മിക്കതും വ്യക്തമായ ഉപയോഗങ്ങളുള്ളവയാണ്. ഉദാഹരണമായി, ലേഖനങ്ങളും വെബ് പേജിന്റെ പ്രധാന ഭാഗങ്ങളും നിർവ്വചിക്കാൻ എന്റർപ്രൈസ് ഉപയോഗിക്കുന്നു, ബാക്കി ഭാഗം മറ്റ് ഭാഗങ്ങളിൽ നിർണ്ണായമല്ലാത്ത ഉള്ളടക്കത്തെ നിർവചിക്കുന്നതിന് ഉപയോഗിക്കും, കൂടാതെ ഹെഡ്ഡർ, നാവ്, ഫൂട്ടർ എന്നിവ വളരെ സ്വയം വിശദീകരണമാണ്. പുതിയതായി ചേർത്ത SECTION ഘടകം കുറച്ചുകൂടി വ്യക്തമാണ്.

HTML ഘടകങ്ങൾ SECTION എന്നും ഒരു വെബ് പേജിലെ ഉള്ളടക്കം അടങ്ങിയിരിക്കുന്നതിന് ഉപയോഗിക്കുന്ന സാധാരണ കണ്ടെയ്നർ ഘടകങ്ങൾ എന്ന് തന്നെയാണ് പലരും കരുതുന്നത്. വാസ്തവത്തിൽ, ഈ രണ്ടു ഘടകങ്ങളും രണ്ടും കണ്ടെയ്നർ മൂലകങ്ങളാണെങ്കിലും, പൊതുവായവയല്ല. SECTION ഘടകവും DIV ഘടകവും ഉപയോഗിക്കുന്നതിന് പ്രത്യേക കാരണങ്ങൾ ഉണ്ട് - ഈ വ്യത്യാസം ആ വ്യത്യാസങ്ങൾ വിശദീകരിക്കും.

വകുപ്പുകളും വകുപ്പുകളും

SECTION എലമെൻറ് ഒരു വെബ് പേജ് അല്ലെങ്കിൽ സൈറ്റിന്റെ സെമാന്റിക് വിഭാഗമായി നിർവചിക്കപ്പെടുന്നു. ഇത് മറ്റൊരു പ്രത്യേക തരം (ലേഖനമോ മാറ്റമോ പോലുള്ളവ) അല്ല. ഞാൻ പേജിന്റെ ഒരു പ്രത്യേക വിഭാഗത്തെ അടയാളപ്പെടുത്തുമ്പോൾ ഈ ഘടകം ഞാൻ ഉപയോഗിക്കും - മൊത്തത്തിലുള്ള ഒരു വിഭാഗം മറ്റ് പേജുകളിൽ അല്ലെങ്കിൽ സൈറ്റിന്റെ ഭാഗങ്ങളിൽ ഉപയോഗിക്കും. നിങ്ങൾ ആഗ്രഹിക്കുന്നെങ്കിൽ, ഉള്ളടക്കത്തിന്റെ ഒരു പ്രത്യേക ഭാഗം അല്ലെങ്കിൽ ഉള്ളടക്കത്തിന്റെ ഒരു "വിഭാഗം" ആണ് അത്.

നിങ്ങൾ ഡിവിഐ ഉപയോഗിക്കാം പേജിന്റെ ഭാഗങ്ങൾ നിങ്ങൾ വിഭജിക്കാൻ ആഗ്രഹിക്കുന്നു, എന്നാൽ സെമാന്റിക്സ് ഒഴികെയുള്ള ആവശ്യങ്ങൾക്ക്. ഞാൻ സിഎസൊ ഉപയോഗിച്ചു് ഒരു "ഹുക്ക്" കൊടുക്കുവാനായി ഞാൻ ചെയ്തുകൊണ്ടിരിക്കുന്ന ഒരു ഭാഗത്ത് ഞാൻ ഒരു വിഭജനത്തിൽ പൊതിഞ്ഞു നിൽക്കും. സെമാന്റിക്സിനെ അടിസ്ഥാനമാക്കിയുള്ള ഒരു പ്രത്യേക ഭാഗമാകണമെന്നില്ല, പക്ഷെ എൻറെ പേജിൽ നിന്ന് എനിക്ക് ആവശ്യമുള്ള ലേഔട്ട് നേടാൻ ഞാൻ നിർദ്ദേശിക്കുന്നു.

ഇതിനെല്ലാം സെമന്റിക്കുകളെ കുറിച്ച്

ഇത് മനസ്സിലാക്കാൻ ബുദ്ധിമുട്ടുള്ള ഒരു ആശയമാണ്, പക്ഷെ DIV ഘടകവും SECTION ഘടകവും തമ്മിലുള്ള ഒരേയൊരു വ്യത്യാസം സെമാന്റിക്സാണ്. മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, നിങ്ങൾ വിഭജിക്കുന്ന കോഡിന്റെ വിഭാഗത്തിന്റെ അർത്ഥമാണ് .

ഒരു DIV ഘടകത്തിൽ അടങ്ങിയിരിക്കുന്ന ഏതൊരു ഉള്ളടക്കത്തിനും സഹജമായ അർത്ഥം ഇല്ല. ഇതുപോലുള്ള കാര്യങ്ങൾക്കായി ഏറ്റവും നന്നായി ഉപയോഗിക്കുന്നത്:

• സി.എസ്.എസ് ശൈലികൾക്കുള്ള CSS ശൈലികളും കൊളുപ്പും
• ലേഔട്ട് കണ്ടെയ്നറുകൾ
• JavaScript കൊളുത്തുകൾ
• വായിക്കാൻ എളുപ്പം എളുപ്പമാക്കുന്നതിന് HTML- നായുള്ള വിഭാഗങ്ങൾ

നമ്മുടെ പ്രമാണങ്ങൾ സ്വീകാര്യമാക്കുന്നതിനും ഹാൻഡുകളുടെയും ഫാൻസി ലേഔട്ടുകളും സൃഷ്ടിക്കുന്നതിനും ഹുക്ക് ചേർക്കുന്നതിനുള്ള ഏക ഘടകമാണ് DIV ഘടകം. അതിനാലാണ്, ഞങ്ങൾ ഡിവിഐ ഘടകങ്ങളാൽ വലിച്ചിഴച്ച എച്ച്ടിഎംഎല്ലുമായി ചേർന്നു-വെബ് ഡിസൈനർമാർക്ക് "ഡിവിറ്റിസ്" എന്ന് വിളിക്കാം. ഡിവിഐ മൂലകം മാത്രം ഉപയോഗിച്ചിരുന്ന WYSIWYG എഡിറ്റർമാർ പോലും ഉണ്ടായിരുന്നു. ഖണ്ഡികയ്ക്കായി പകരം DIV ഘടകം ഉപയോഗിക്കുന്ന HTML- ൽ ഞാൻ ശരിക്കും പ്രവർത്തിക്കുന്നു!

HTML5 ഉപയോഗിച്ച്, കൂടുതൽ സെമാന്റിക് വിവരണാത്മക പ്രമാണങ്ങൾ (നാവിഗേഷനും ഡെസ്ടിക്കറിക് സ്റ്റിയേജും മറ്റും ഉപയോഗിച്ച്) സൃഷ്ടിക്കുന്നതിനും ആ ഘടകങ്ങളിൽ സ്റ്റൈലുകൾ നിർവചിക്കുന്നതിനും സെക്ഷൻ ഘടകങ്ങൾ ഉപയോഗിച്ചു തുടങ്ങാം.

SPAN എലമെന്റിനെക്കുറിച്ച് എന്ത്?

മിക്ക ആളുകളും ഡിഐവി എലമെന്റിനെക്കുറിച്ച് ചിന്തിക്കുമ്പോൾ അവയൊക്കെ ചിന്തിക്കുന്ന ഘടകമാണ്. DIV പോലുളള ഈ ഘടകം ഒരു സെമാന്റിക് എലമെന്റല്ല. ഉള്ളടക്കത്തിന്റെ ഇൻലൈൻ ബ്ലോക്കുകൾക്ക് ചുറ്റുമുള്ള ശൈലികൾക്കും സ്ക്രിപ്റ്റുകൾക്കും നിങ്ങൾക്ക് ഹൂക്കുകൾ ചേർക്കാൻ കഴിയുന്ന ഒരു ഇൻലൈൻ ഘടകം ആണ് ഇത് (സാധാരണ ടെക്സ്റ്റ്). അർത്ഥത്തിൽ ഇത് ഡിഐവി എലമെന്റ് പോലെയാണ്, ഒരു ബ്ലോക്ക് ഘടകത്തേക്കാൾ ഇൻലൈൻ മാത്രം. ചില രീതികളിൽ, ഡിവിവിനെ ഒരു ബ്ളോക്ക്-ലെവൽ SPAN ഘടകം പോലെ എളുപ്പമാക്കുകയും നിങ്ങൾ HTML ഉള്ളടക്കം മുഴുവനായുള്ള സ്പാൻ മാത്രമായി ഉപയോഗിക്കുകയും ചെയ്യാം.

HTML5 ൽ താരതമ്യപ്പെടുത്തുമ്പോൾ ഇൻലൈൻ സെക്ഷനിങ് എല്യൂമെന്റ് ഇല്ല.

Internet Explorer- ന്റെ പഴയ പതിപ്പുകൾക്കായി

ഐ.ഒ. 8 ന്റെയും പഴയ പതിപ്പിന്റെയും പഴയ പതിപ്പുകളെയും നിങ്ങൾ പിന്തുണയ്ക്കുന്നുണ്ടെങ്കിൽ പോലും വിശ്വസനീയമായി HTML5 തിരിച്ചറിഞ്ഞില്ലെങ്കിൽ, നിങ്ങൾക്ക് ശരിയായ സിമ്പിൾ ശരിയായ HTML ടാഗുകൾ ഉപയോഗിക്കാൻ ഭയപ്പെടേണ്ടതില്ല. ഭാവിയിൽ പേജ് കൈകാര്യം ചെയ്യാൻ സെമന്റിക്കുകൾ നിങ്ങളെ സഹായിക്കും (ആ വിഭാഗമാണ് ARTICLE ഘടകം ചുറ്റപ്പെട്ടാൽ ആ ലേഖനം എന്ന് നിങ്ങൾക്ക് അറിയാം). ഒപ്പം, ആ ടാഗുകൾ തിരിച്ചറിയുന്ന ബ്രൌസറുകൾക്ക് കൂടുതൽ മെച്ചപ്പെട്ട പിന്തുണ നൽകും.

നിങ്ങൾക്ക് തുടർന്നും HTML5 സെമാന്റിക് സെറിംഗിങ് ഇൻറർനെറ്റ് എക്സ്പ്ലോററിനൊപ്പം ഉപയോഗിക്കാൻ കഴിയും, നിങ്ങൾ HTML ആയി ടാഗുകളെ തിരിച്ചറിയുന്നതിന് സ്ക്രിപ്റ്റിങ്ങും കുറച്ച് DIV ഘടകങ്ങളും ചേർക്കേണ്ടതായി വരും.

DIV, SECTION ഘടകങ്ങൾ ഉപയോഗിക്കൽ

നിങ്ങൾ അവ ശരിയായി ഉപയോഗിക്കുകയാണെങ്കിൽ, നിങ്ങൾക്ക് സാധുവായ ഒരു HTML5 പ്രമാണത്തിൽ ഒന്നിച്ചു DIV, SECTION ഘടകങ്ങൾ ഉപയോഗിക്കാം. ഈ ലേഖനത്തിൽ നിങ്ങൾ കണ്ടതുപോലെ, നിങ്ങൾ ഉള്ളടക്കത്തിൻറെ സെമാന്റിക് ഡിസ്കറ്റ് ഭാഗങ്ങൾ നിർവ്വചിക്കുന്നതിന് SECTION എലമെൻറ് ഉപയോഗിക്കുകയും CSS, ജാവാസ്ക്രിപ്റ്റുകൾക്കുള്ള ഹുക്കുകൾ പോലെ DIV എലമെന്റ് ഉപയോഗിക്കുകയും ഒരു സെമാന്റിക് അർത്ഥം ഇല്ലാത്ത ലേഔട്ട് നിർവചിക്കുകയും ചെയ്യുന്നു.

ജെന്നിഫർ ക്രിയിൻ എഴുതിയ ലേഖനം എഡിറ്റു ചെയ്തത് ജെറമി ഗിർാർഡ് 3/15/17 ന്