Chapter 17: HTML Article ടാഗ് ഉപയോഗിച്ച് ഉള്ളടക്കം ഫോർമാറ്റ് ചെയ്യൽ (Formatting Content with the Article Tag)

Share

HTML <article> ടാഗ് എന്താണ്?

HTML <article> ടാഗ് ഒരു സ്വതന്ത്രമായ, സ്വയംപര്യാപ്തമായ ഉള്ളടക്കത്തെ സൂചിപ്പിക്കുന്നു, ഒരു വ്യക്തമായ ആശയത്തെ അവതരിപ്പിക്കുന്ന ഒരൊറ്റ ബ്ലോക്കായി ഉപയോഗിക്കുന്നു. ഒരു പേജിൽ നിരവധി <article>സൃഷ്ടിക്കാവുന്നതാണ്, ഓരോന്നും പ്രത്യേക തലക്കെട്ടുകളായും ഉപവിഭാഗങ്ങളായും പ്രവർത്തിക്കും.

HTML <article> ടാഗിന്റെ ഘടന:

<article>
<h2>Article Title</h2>
<p>This is the content of the article.</p>
</article>

Example:

<article>
<h2>വീണ്ടും വരുന്ന ഡിജിറ്റൽ വിപ്ലവം</h2>
<p>ഡിജിറ്റൽ മാർക്കറ്റിംഗ് ലോകം വളരെയധികം മാറ്റങ്ങളിലൂടെ കടന്നുപോകുകയാണ്.</p>
</article>

പ്രയോഗങ്ങൾ:

  • ബ്ലോഗ് പോസ്റ്റുകൾ: ഓരോ ബ്ലോഗ് പോസ്റ്റും ഒരു <article> ആയി ഉപയോഗിക്കാം.htmlCopy code<article> <h2>HTML പഠിക്കാൻ മികച്ച മാർഗങ്ങൾ</h2> <p>HTML പഠനം എങ്ങനെ ആരംഭിക്കാം എന്നതിനെക്കുറിച്ചുള്ള മാർഗങ്ങൾ.</p> </article>
  • ന്യൂസ് സ്റ്റോറികൾ: ന്യൂസ് വെബ്സൈറ്റുകളിൽ ഓരോ വാർത്താ ആർട്ടിക്കിളിനും <article>ഉപയോഗിക്കാം.htmlCopy code<article> <h2>ഇന്നത്തെ പ്രധാന വാർത്തകൾ</h2> <p>ഇന്നത്തെ ലോകത്തെ പ്രധാന വാർത്തകൾ.</p> </article>
  • ഫോറം പോസ്റ്റുകൾ: ഒറ്റ പോസ്റ്റുകൾ, ഉപയോക്തൃ അഭിപ്രായങ്ങൾ എന്നിവ <article> ടാഗിനകത്ത് സൃഷ്ടിക്കാവുന്നതാണ്.htmlCopy code<article> <h2>ഉപയോക്തൃ അഭിപ്രായം</h2> <p>ഈ ഉൽപ്പന്നം വളരെ നല്ലതാണ്.</p> </article>

HTML5-ൽ <article> ടാഗിന്റെ പ്രാധാന്യം:

HTML5-ൽ <article> ടാഗ്, സ്വതന്ത്രമായ ഉള്ളടക്ക സൃഷ്ടികൾക്ക് പ്രധാനമാണ്. ഇത് ഒരു ബ്ലോഗ് പോസ്റ്റ്, ന്യൂസ് സ്റ്റോറി, ഉപയോക്തൃ അഭിപ്രായം, അല്ലെങ്കിൽ മറ്റേതെങ്കിലും സ്വതന്ത്ര ഉള്ളടക്കം അടങ്ങിയ ബോക്സ് ആകാം.

CSS ഉപയോഗിച്ച് <article> ടാഗ് ഫോർമാറ്റ് ചെയ്യുക:

CSS ഉപയോഗിച്ച് <article> ടാഗിനെ രൂപകൽപ്പന ചെയ്യാം, ഇതിലൂടെ ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്താൻ കഴിയുന്നു.

article {
border: 1px solid #ccc;
padding: 15px;
margin-bottom: 20px;
background-color: #f9f9f9;
}

ഉപവിഭാഗങ്ങൾ <section>-ൽ:

ഒരു Article ടാഗിനുള്ളിൽ <section> ടാഗുകൾ ഉപയോഗിച്ച് ഉപവിഭാഗങ്ങൾ സൃഷ്ടിക്കാം.

<article>
<h2>Web Development</h2>
<section>
<h3>Front-end Development</h3>
<p>Front-end development focuses on the user interface.</p>
</section>
<section>
<h3>Back-end Development</h3>
<p>Back-end development focuses on server-side logic.</p>
</section>
</article>

Article-നുള്ള Inline Elements:

<article> ടാഗിന് എന്തും ഉൾപ്പെടുത്താം, അതായത് ടൈറ്റിലുകൾ, ടെക്സ്റ്റ്, ചിത്രങ്ങൾ, ലിങ്കുകൾ, ലിസ്റ്റുകൾ തുടങ്ങിയവ.

<article>
<h2>HTML പഠനം എങ്ങനെ തുടങ്ങാം</h2>
<p>HTML ഒരു പ്രധാന വാക്കാണ്, ഇത് വെബ് പേജുകൾ സൃഷ്ടിക്കാൻ സഹായിക്കുന്നു. നിങ്ങൾക്ക് കൂടുതൽ വായിക്കാൻ <a href="https://example.com">ഇവിടെ ക്ലിക്ക് ചെയ്യുക.</a></p>
</article>

Search Engine Optimization (SEO) ഉപയോഗത്തിൽ <article> ടാഗിന്റെ പ്രാധാന്യം:

<article> ടാഗ് പേജിന്റെ ഡോക്യുമെന്റിന്റെ വിവരണാത്മകത വളരെയധികം മെച്ചപ്പെടുത്തുന്നു. ഇതിന് വേണ്ടി സെർച്ച് എഞ്ചിനുകൾക്ക് ഓരോ ബ്ലോക്കുകളും ഓട്ടോമാറ്റിക് ആയി തിരിച്ചറിയാൻ കഴിയും, പ്രത്യേകിച്ച് ബ്ലോഗ് പോസ്റ്റുകൾക്കായും വാർത്താ ലേഖനങ്ങൾക്കായും.

<article> ടാഗും <section> ടാഗും തമ്മിലുള്ള വ്യത്യാസം:

  • <article> ടാഗ്: ഒരു സ്വതന്ത്രപ്പെട്ട ഉള്ളടക്കം, സ്വയം ഒറ്റപ്പെട്ട ഒരു വിഭാഗം.
  • <section> ടാഗ്: പല പേജുകളും ഉപവിഭാഗങ്ങളും തീമുകളുടെ അടിസ്ഥാനത്തിൽ വിഭജിക്കാൻ ഉപയോഗിക്കുന്നു.

Accessibility and Semantic Web:

HTML <article> ടാഗ് വെബ് സൈറ്റിന്റെ മെയിൻ ഉള്ളടക്കം സ്വതന്ത്രമായി അവതരിപ്പിക്കുമ്പോൾ സേർച്ച് എഞ്ചിനുകൾക്കും സ്ക്രീൻ റീഡർമുകൾക്കും അനുയോജ്യമായ ഒരു ചെറിയ സ്ട്രക്ചറൽ ഫലവും നൽകുന്നു.


സങ്കലനം:

HTML <article> ടാഗ് ഒരു സ്വതന്ത്ര, സ്വയംപര്യാപ്തമായ ഉള്ളടക്കം ഫോർമാറ്റ് ചെയ്യാനും സെമാന്റിക് വെബ് അടിസ്ഥാനത്തിൽ പേജുകൾ ക്രമീകരിക്കാനും സഹായിക്കുന്നു. ന്യൂസ്, ബ്ലോഗ് പോസ്റ്റുകൾ, അല്ലെങ്കിൽ യഥാർത്ഥ സവിശേഷതകളുള്ള മറ്റു ഉള്ളടക്കങ്ങൾ <article> ടാഗിന്റെ അടിസ്ഥാന ഘടകമായിരിക്കും.