Chapter 18: HTML Header, Footer ടാഗുകൾ ഉപയോഗിച്ച് സംഗ്രഹം നൽകുക (Summarizing with Header and Footer Tags)

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

HTML <header> ടാഗ് ഒരു പേജിന്റെ അല്ലെങ്കിൽ ഒരു വിഭാഗത്തിന്റെ ആദ്യഭാഗം നിശ്ചയിക്കുന്നു. ഇത് സാധാരണയായി തലക്കെട്ടുകൾ, ലോഗോ, നാവിഗേഷൻ ലിങ്കുകൾ, അല്ലെങ്കിൽ പരിചയപ്പെടുത്തലുകൾ അടങ്ങിയിരിക്കും. പേജിന്റെ പ്രധാനമേഖലയും സൈഡ് സെക്ഷനും <header> ടാഗ് ഉപയോഗിച്ച് സജ്ജീകരിക്കാവുന്നതാണ്.

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

<header>
  <h1>Website Title</h1>
  <nav>
    <a href="#home">Home</a>
    <a href="#services">Services</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

Example:

<header>
  <h1>ഞങ്ങളുടെ കമ്പനി</h1>
  <p>ലോകത്തിലെ മികച്ച സേവനങ്ങൾ.</p>
</header>

ഇവിടെ, <header> ടാഗ് വെബ്ബ് പേജിന്റെ തലക്കെട്ടിനായുള്ള മേഖലയായി ഉപയോഗിക്കുന്നു, അത് വെബ്ബ് സൈറ്റിന്റെ പേര്, വെബ്ബ് സൈറ്റിന്റെ തലക്കെട്ട്, എന്നിവ ഫോർമാറ്റ് ചെയ്യുന്നു.

HTML <footer> ടാഗ്:

HTML <footer> ടാഗ് ഒരു പേജിന്റെ അവസാന ഭാഗം, അതായത് ഫോർമാറ്റിംഗ്, എഴുത്തുകാർ, കോപ്പിറൈറ്റ് വിവരങ്ങൾ, ഡാറ്റ ലിങ്കുകൾ എന്നിവ ഉൾപ്പെടുന്നു. പേജിന്റെ പ്രധാനതലത്തിന്റേയും വിഭാഗങ്ങളുടെയും അവസാന ഭാഗം ഇതിൽ കാണിച്ചിരിക്കും.

<footer>
  <p>© 2024 MyWebsite. All rights reserved.</p>
</footer>

Example:

<footer>
  <p>© 2024 Dalal News. All rights reserved.</p>
  <p>Contact us: <a href="mailto:info@example.com">info@example.com</a></p>
</footer>

HTML <header>-ലും <footer>-ലും പ്രധാന പ്രയോഗങ്ങൾ:

1. ഹോംപേജ് അല്ലെങ്കിൽ വെബ്ബ് പേജ് തലക്കെട്ടുകൾ:ഒരു <header> ടാഗ് വെബ്ബ് പേജിന്റെ പ്രധാന ശീർഷകത്തിനും നാവിഗേഷൻ ലിങ്കുകൾക്കും ഉപയോഗിക്കുന്നു.htmlCopy code<header> <h1>Dalal News</h1> <nav> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> </nav> </header>
2. അവസാന ഭാഗം സൃഷ്ടിക്കാനായി:<footer> ടാഗ് താഴത്തെ ഭാഗത്താണ്, കോപ്പിറൈറ്റ്, കോൺടാക്ട് വിവരങ്ങൾ, അല്ലെങ്കിൽ മറ്റ് താഴെവകെയുള്ള വിവരങ്ങൾ സൂചിപ്പിക്കുന്നു.htmlCopy code<footer> <p>© 2024 Dalal News. Created by Arjun PV.</p> </footer>

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

CSS ഉപയോഗിച്ച് <header> ടാഗിന്റെയും <footer> ടാഗിന്റെയും രൂപം ഫോർമാറ്റ് ചെയ്യാം, ഇതിലൂടെ മികച്ച താഴ്ചയും ദൃശ്യാനുഭവവും നൽകാൻ കഴിയും.

header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

footer {
  background-color: #f1f1f1;
  text-align: center;
  padding: 10px;
}

ഹോംപേജിൽ വിവിധ <header> <footer>-നുകളുടെ ഉപയോഗം:

ഒരു പേജിനകത്ത് പല ഭാഗങ്ങളിലും <header> , <footer> ടാഗുകൾ ഉപയോക്തൃ-മിത്രമായി ആവിഷ്കരിക്കാം.

<article>
  <header>
    <h2>Article Title</h2>
  </header>
  <p>This is the content of the article.</p>
  <footer>
    <p>Author: Arjun PV</p>
  </footer>
</article>

Header-നുള്ള പ്രധാന ഉപാധികൾ:

1. Primary Header: വെബ്ബ് പേജിന്റെ പ്രധാനവിവരങ്ങൾ കൈകാര്യം ചെയ്യുന്നു.
2. Section Header: പേജിനുള്ളിലെ മറ്റു വിഭാഗങ്ങൾക്ക് വ്യത്യസ്ത തലക്കെട്ടുകൾ നൽകുന്നു.

Footer-നുള്ള പ്രധാന ഉപാധികൾ:

1. Copyright Information: താഴെയുള്ള കോപ്പിറൈറ്റ് അല്ലെങ്കിൽ വിവരണങ്ങൾ നൽകുന്നു.
2. Contact Details: ഇമെയിൽ, ഫോണിന്റെ വിവരങ്ങൾ കാണിക്കാനായി.

Accessibility and SEO:

HTML <header> ടാഗുകളും <footer> ടാഗുകളും വെബ് പേജുകൾക്ക് SEO മെച്ചപ്പെടുത്തുന്നു. പേജിന്റെ വിവിധ വിഭാഗങ്ങൾ നിശ്ചയിച്ച് സേർച്ച് എഞ്ചിനുകൾക്ക് വ്യക്തമായി തിരിച്ചറിയാൻ കഴിയും.

---

സങ്കലനം:

HTML <header> & <footer> ടാഗുകൾ വെബ് പേജുകളുടെ ഘടന മെച്ചപ്പെടുത്തുന്നതിനും, വിവരങ്ങൾ അർത്ഥപൂർണ്ണമായ തലത്തിലുള്ള ഭാഗങ്ങളിൽ ക്രമീകരിക്കുന്നതിനും സഹായിക്കുന്നു. SEO-യിലും യൂസർ എക്സ്പീരിയൻസിലും പ്രധാന പങ്കുവഹിക്കുന്നു.