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>:
<div>: ബ്ലോക്ക്-ലെവൽ എലിമെന്റാണ്, ഒരു പൂർണ ബാക്കറ്റ് ഉള്ളടക്കത്തെ ഫോർമാറ്റ് ചെയ്യാൻ ഉപയോഗിക്കുന്നു. ഒരു ഡിവിഷൻ വലുതാണ്, പൂര്ണം സ്ഥലത്തെ ഉപയോഗിക്കും.<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>:
- 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> - 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> ചെറിയ ടെക്സ്റ്റിനുള്ളിൽ ഫോർമാറ്റിംഗ് ആവശ്യമായപ്പോൾ ഉപയോഗിക്കുന്നു.
