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>
ചെറിയ ടെക്സ്റ്റിനുള്ളിൽ ഫോർമാറ്റിംഗ് ആവശ്യമായപ്പോൾ ഉപയോഗിക്കുന്നു.