Chapter 19: HTML div, span ടാഗുകൾ: പേജുകൾക്ക് പറ്റിയ രൂപം നൽകുക (Styling Pages with Div and Span Tags)

Share

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

HTML <div> (Division) ടാഗ് ഒരു ബ്ലോക്ക്-ലെവൽ എലിമെന്റാണ്, ഇത് പേജിൽ ഉള്ളടക്കം ഗ്രൂപ്പുകളായി വിഭജിക്കാനും ഫോർമാറ്റ് ചെയ്യാനും സഹായിക്കുന്നു. <div> ടാഗ് സവിശേഷതകളില്ലാത്ത, നിഷ്ക്രിയമായ ഒരു എലിമെന്റാണ്, പക്ഷേ CSS ഉപയോഗിച്ച് ഫോർമാറ്റ് ചെയ്യുന്നതിനും JavaScript ഉപയോഗിച്ച് ഇന്ററാക്റ്റിവ് ആക്കുന്നതിനും ഇത് വളരെ സഹായകരമാണ്.

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

<div>
<h2>Section Title</h2>
<p>This is a paragraph inside the div.</p>
</div>

Example:

<div>
<h2>സേവനങ്ങൾ</h2>
<p>ഞങ്ങൾ നൽകുന്ന സേവനങ്ങളുടെ വിശദവിവരണം ഇവിടെ ലഭ്യമാണ്.</p>
</div>

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

CSS ഉപയോഗിച്ച് <div> ടാഗിനെ രൂപകൽപ്പന ചെയ്യാം, ഇതിലൂടെ പേജിൽ ഭാഗങ്ങൾ വിഭജിച്ച് വ്യത്യസ്ത സ്റ്റൈലുകൾ ചേർക്കാം.

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

HTML <span> ടാഗ്:

HTML <span> ടാഗ് ഒരു ഇൻലൈൻ എലിമെന്റാണ്, ഇത് ചെറിയ ടെക്സ്റ്റ്, ചിത്രങ്ങൾ, ലിങ്കുകൾ തുടങ്ങിയവയ്ക്ക് പ്രത്യേകമായ ഫോർമാറ്റിംഗ് നൽകാൻ സഹായിക്കുന്നു. <div>-ന്റെ മികച്ച അനുബന്ധമായാണ് <span>ഉപയോഗിക്കുന്നത്, കൂടാതെ അതിന്റെ ഫോർമാറ്റിംഗ് കാരണം ഒരു എലിമെന്റിന്റെ ഭാഗങ്ങൾക്കും സ്റ്റൈലിംഗ് നൽകാനാവും.

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

<p>This is <span style="color: blue;">blue text</span> inside a paragraph.</p>

Example:

<p>ഇവിടെ <span style="color: green;">ഹരിത നിറത്തിലുള്ള ടെക്സ്റ്റ്</span> കാണാവുന്നതാണ്.</p>

Difference between <div> and <span>:

  1. <div>: ബ്ലോക്ക്-ലെവൽ എലിമെന്റാണ്, ഒരു പൂർണ ബാക്കറ്റ് ഉള്ളടക്കത്തെ ഫോർമാറ്റ് ചെയ്യാൻ ഉപയോഗിക്കുന്നു. ഒരു ഡിവിഷൻ വലുതാണ്, പൂര്ണം സ്ഥലത്തെ ഉപയോഗിക്കും.
  2. <span>: ഇൻലൈൻ എലിമെന്റാണ്, ടെക്സ്റ്റിനോടൊപ്പം ലൈനിൽ തന്നെ ഫോർമാറ്റ് ചെയ്യാൻ. ചെറിയ രൂപഭംഗികൾക്കായി ഉപയോഗിക്കുന്നു.

CSS Styling for Div and Span:

CSS ഉപയോഗിച്ച് <div> ടാഗിനും <span> ടാഗിനും വ്യത്യസ്ത സ്റ്റൈലുകൾ നൽകാം. ഉദാഹരണത്തിന്:

div {
background-color: lightgrey;
padding: 10px;
}

span {
color: red;
font-weight: bold;
}

Practical Usage of <div> and <span>:

  1. Sectioning Content:<div> ടാഗ് വലിയ വിഭജനം ആവശ്യമായപ്പോൾ (ഉദാ: പേജിന്റെ സെക്ഷനുകൾ). ഉദാഹരണത്തിന്:htmlCopy code<div class="header"> <h1>Dalal News</h1> </div> <div class="main-content"> <p>Here is the main content of the page.</p> </div> <div class="footer"> <p>© 2024 Dalal News</p> </div>
  2. Text Highlighting:<span> ടാഗ് ഒരു ടെക്സ്റ്റിനുള്ളിൽ ചെറിയ ഭാഗങ്ങൾ ഫോർമാറ്റ് ചെയ്യാൻ.htmlCopy code<p>നിങ്ങളുടെ ടെക്സ്റ്റിൽ <span class="highlight">പ്രധാനപ്പെട്ട ഭാഗം</span> ഇവിടെ കാണിക്കാം.</p>

HTML <div> and <span> Tag for Layouts:

CSS Flexbox, Grid എന്നിവ ഉപയോഗിച്ച് <div> ടാഗ് layout purposes-ൽ ഉപയോഗിക്കാം.

<div class="container">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
</div>

JavaScript-ൽ <div> & <span>:

JavaScript <div> & <span> ടാഗുകൾക്ക് ഫംഗ്ഷനാലിറ്റികൾ ചേർക്കാൻ ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, ഒരു ബട്ടൺ ക്ലിക്കുചെയ്യുമ്പോൾ <span> ടാഗിൽ ഉള്ള ടെക്സ്റ്റ് മാറ്റുക:

<button onclick="document.getElementById('text').style.color = 'blue';">Change Color</button>
<p id="text">This is <span>highlighted</span> text.</p>

Common Mistakes:

  • Overusing <div> and <span>: <div>-നെ അധികമായി ഉപയോഗിക്കുന്നത് HTML5-ലുള്ള <section><article> പോലുള്ള ടാഗുകൾ ഉപയോഗിക്കുന്നത് ശരിയാണ്.
  • Using Block-Level Elements in <span>: <span> ടാഗിനുള്ളിൽ വലിയ ബ്ലോക്ക് എലിമെന്റുകൾ (ഉദാ: <div><p>) നിഷ്പ്രയോജനമാണ്.

സങ്കലനം:

HTML <div> & <span> ടാഗുകൾ വെബ്ബ് പേജുകൾ ഫോർമാറ്റ് ചെയ്യാനും, പേജിന്റെ ഉള്ളടക്കത്തെ വിഭജിക്കാനുമുള്ള പ്രധാന ഘടകങ്ങളാണ്. <div> പേജിന്റെ വിവിധ ഭാഗങ്ങൾക്കായി, <span> ചെറിയ ടെക്സ്റ്റിനുള്ളിൽ ഫോർമാറ്റിംഗ് ആവശ്യമായപ്പോൾ ഉപയോഗിക്കുന്നു.