HTML Headings

HTML தலைப்புகள்

HTML தலைப்புகள்

HTML தலைப்புகள் என்பது வலைப்பக்கத்தில் காட்சிப்படுத்த விரும்பும் தலைப்புகள் அல்லது உபதலைப்புகள் ஆகும்.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

HTML தலைப்புகள்

HTML தலைப்புகள் <h1> முதல் <h6> வரையிலான குறிச்சொற்களால் வரையறுக்கப்படுகின்றன.

<h1> மிக முக்கியமான தலைப்பை வரையறுக்கிறது. <h6> குறைந்த முக்கியத்துவம் வாய்ந்த தலைப்பை வரையறுக்கிறது.

எடுத்துக்காட்டு

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

📝 குறிப்பு:

உலாவிகள் தலைப்புக்கு முன்னும் பின்னும் சில வெள்ளை இடத்தை (ஒரு விளிம்பு) தானாகவே சேர்க்கின்றன.

தலைப்புகள் முக்கியமானவை

தேடுபொறிகள் உங்கள் வலைப்பக்கங்களின் கட்டமைப்பு மற்றும் உள்ளடக்கத்தை அட்டவணைப்படுத்த தலைப்புகளைப் பயன்படுத்துகின்றன.

பயனர்கள் பெரும்பாலும் ஒரு பக்கத்தை அதன் தலைப்புகளால் விரைவாகப் பார்க்கிறார்கள். ஆவண கட்டமைப்பைக் காண்பிக்க தலைப்புகளைப் பயன்படுத்துவது முக்கியமானது.

<h1> தலைப்புகள் முக்கிய தலைப்புகளுக்குப் பயன்படுத்தப்பட வேண்டும், அதைத் தொடர்ந்து <h2> தலைப்புகள், பின்னர் குறைந்த முக்கியத்துவம் வாய்ந்த <h3>, மற்றும் பல.

எடுத்துக்காட்டு

<h1>Travel Guide</h1>

<h2>Europe</h2>
<h3>France</h3>
<h3>Italy</h3>

<h2>Asia</h2>
<h3>India</h3>
<h3>Thailand</h3>

<h1> - பக்கத் தலைப்பு

முக்கிய பக்கத் தலைப்பு. ஒரு பக்கத்தில் ஒரே ஒரு <h1> இருக்க வேண்டும்.

<h2> - பிரிவுத் தலைப்புகள்

முக்கிய பிரிவுத் தலைப்புகள். ஒரு பக்கத்தில் பல <h2> இருக்கலாம்.

<h3> - உபபிரிவுத் தலைப்புகள்

துணைப் பிரிவுத் தலைப்புகள். <h2> பிரிவுகளுக்குள் பயன்படுத்தப்படுகிறது.

💡 உதவிக்குறிப்பு:

ஒரு பக்கத்திற்கு ஒரே ஒரு <h1> ஐ மட்டுமே பயன்படுத்தவும் - இது முக்கிய தலைப்பு அல்லது பெயரைக் குறிக்கிறது.

⚠️ கவனிக்க:

தலைப்புகளுக்காக மட்டுமே HTML தலைப்புகளைப் பயன்படுத்தவும். உரையை பெரியதாக அல்லது தடிமனாக ஆக்க தலைப்புகளைப் பயன்படுத்தாதீர்கள்.

பெரிய தலைப்புகள்

ஒவ்வொரு HTML தலைப்புக்கும் ஒரு இயல்புநிலை அளவு உள்ளது. இருப்பினும், CSS font-size பண்புடன் style பண்புக்கூறைப் பயன்படுத்தி எந்த தலைப்புக்கும் அளவைக் குறிப்பிடலாம்:

எடுத்துக்காட்டு

<h1 style="font-size:60px;">Heading 1</h1>

இயல்புநிலை அளவுகள்

h1: 2em, h2: 1.5em, h3: 1.17em, h4: 1em, h5: 0.83em, h6: 0.67em

CSS ஸ்டைலிங்

style பண்புக்கூறு மூலம் தனிப்பயன் அளவுகள்

வெளிப்புற CSS

வெளிப்புற ஸ்டைல் ஷீட்டுகள் மூலம் அனைத்து தலைப்புகளையும் ஸ்டைல் செய்யலாம்

தலைப்பு படிநிலை எடுத்துக்காட்டு

சரியான HTML தலைப்பு படிநிலையைப் பயன்படுத்துவது எப்படி என்பதற்கான எடுத்துக்காட்டு:

<!DOCTYPE html>
<html>
<head>
<title>Book Store</title>
</head>
<body>

<h1>Welcome to Our Book Store</h1>

<h2>Fiction Books</h2>
<h3>Science Fiction</h3>
<p>Description of science fiction books...</p>

<h3>Fantasy</h3>
<p>Description of fantasy books...</p>

<h2>Non-Fiction Books</h2>
<h3>Biographies</h3>
<p>Description of biography books...</p>

<h3>Self-Help</h3>
<p>Description of self-help books...</p>

</body>
</html>

🏗️ கட்டமைப்பு நிலைத்தன்மை:

தலைப்பு நிலைகளைத் தவிர்க்காதீர்கள் (எ.கா., h1 இலிருந்து h3 க்கு நேரடியாகச் செல்லாதீர்கள்). ஒழுங்கான படிநிலை கட்டமைப்பு SEO மற்றும் அணுகல்தன்மைக்கு சிறந்தது.

பயிற்சிகள் மூலம் கற்றல்

❓ பின்வரும் தலைப்புகளில் எது மிகப்பெரியது மற்றும் மிக முக்கியமானது?

<h1>
✓ சரி! <h1> மிக முக்கியமான மற்றும் மிகப்பெரிய தலைப்பு
<h2>
✗ தவறு! <h2> <h1> க்குப் பிறகு இரண்டாவது முக்கியமானது
<h3>
✗ தவறு! <h3> மூன்றாவது முக்கியத்துவம் வாய்ந்த தலைப்பு
<h4>
✗ தவறு! <h4> நான்காவது முக்கியத்துவம் வாய்ந்த தலைப்பு
<h5>
✗ தவறு! <h5> ஐந்தாவது முக்கியத்துவம் வாய்ந்த தலைப்பு
<h6>
✗ தவறு! <h6> குறைந்த முக்கியத்துவம் வாய்ந்த தலைப்பு

HTML குறிச்சொல் குறிப்பு

Jassif Team இன் குறிச்சொல் குறிப்பு இந்த குறிச்சொற்கள் மற்றும் அவற்றின் பண்புக்கூறுகள் பற்றிய கூடுதல் தகவல்களைக் கொண்டுள்ளது.

குறிச்சொல் விளக்கம்
<html> ஒரு HTML ஆவணத்தின் மூலத்தை வரையறுக்கிறது
<body> ஆவணத்தின் உடலை வரையறுக்கிறது
<h1> முதல் <h6> வரை HTML தலைப்புகளை வரையறுக்கிறது

கிடைக்கக்கூடிய அனைத்து HTML குறிச்சொற்களின் முழுமையான பட்டியலுக்கு, எங்கள் HTML குறிச்சொல் குறிப்பைப் பார்க்கவும்.