webdevlinux - logo Web Dev Linux

මාතෘකා (Headings)

HTML වල භාවිතා කල හැකි මාතෘකා වර්ග 6ක් ඇත. HTML ගොනුවක මාතෘකා හා අනුමාතෘකා යොදන ආකාරය පිළිබදව මෙම පරිච්ජේදයෙන් ඉගෙනගනිමු.

HTML Headings HTML headings elements

පහළ උදාහරණය මගින් HTML මාතෘකා වර්ග 6හි වෙනස්කම් ඔබට බලාගත හැකිය.

FILE : headings.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Headings</title>
</head>
<body>
<h1>Heading 01</h1>
<h2>Heading 02</h2>
<h3>Heading 03</h3>
<h4>Heading 04</h4>
<h5>Heading 05</h5>
<h6>Heading 06</h6>
</body>
</html>

HTML ගොනුවක පැවතිය හැක්කේ එක් ප්‍රධාන මතෘකාවක් පමණි. මෙය h1 මගින් නිරූපණය කෙරේ. අනුමාතෘකා ඕනෑම ප්‍රමාණයක් පැවතිය හැකිය.

එක් එක් මාතෘකා වර්ගයට අනුරූප අකුරු ප්‍රමාණ (font sizes) ඇත. CSS භාවිතා කර ඒවා අපට අවශ්‍ය පරිදි වෙනස් කර ගත හැකිය. CSS ගැන පසුව වෙනත් පාඩමකින් ඉගෙනගනිමු.

HTML මාතෘකා නිවැරදිව භාවිතා කළ යුතු ආකාරය

මාතෘකා භාවිතා කල යුතු වන්නේ අකුරු වල ප්‍රමාණය අනුව නොවෙයි, අදාලතාවය අනුවයි. h1 වර්ගයේ මාතෘකාවකට පසු කෙලින්ම h3 වර්ගයේ මාතෘකාවක් භාවිතා නොකල යුතුය. h1මාතෘකාවකට පසුව භාවිතා කල යුත්තේ h2 වර්ගයේ මාතෘකාවකි. h3 යනු h2 වල උප මාතෘකාවකි. h2 යනු h1 වල උප මාතෘකාවක්.

පහත උදාහරණයෙන් දැක්වෙන්නේ වැරදි ලෙස HTML මාතෘකා භාවිතා කර ඇති ආකාරයකි.

<h1>Vehicles</h1>

<h4>Cars</h4>
<p>some contents</p>

නිවැරදි ලෙස HTML මාතෘකා භාවිතා කර ඇති ආකාරය.

<h1>Vehicles</h1> <!-- main heading -->

<h2>Cars</h2> <!-- sub heading -->
<p>some contents</p>

<h3>Hybrid Cars</h3> <!-- sub heading of sub heading -->
<p>some contents</p>