HTML Head Element

HTML <head> உறுப்பைக் கற்றுக்கொள்ளுங்கள்

HTML - The Head Element

HTML <head> உறுப்பு பின்வரும் உறுப்புகளுக்கான ஒரு கொள்கலன்: <title>, <style>, <meta>, <link>, <script>, மற்றும் <base>.

📌 HTML <head> உறுப்பு:

<head> உறுப்பு மெட்டாடேட்டாவுக்கான (தரவு பற்றிய தரவு) ஒரு கொள்கலன் மற்றும் <html> குறிச்சொல் மற்றும் <body> குறிச்சொல் இடையே வைக்கப்படுகிறது.

HTML மெட்டாடேட்டா HTML ஆவணம் பற்றிய தரவு. மெட்டாடேட்டா பக்கத்தில் காட்சிப்படுத்தப்படாது.

மெட்டாடேட்டா பொதுவாக ஆவணத் தலைப்பு, எழுத்துத் தொகுப்பு, பாணிகள், ஸ்கிரிப்ட்கள் மற்றும் பிற மெட்டா தகவல்களை வரையறுக்கிறது.

The HTML <title> Element

<title> உறுப்பு ஆவணத்தின் தலைப்பை வரையறுக்கிறது. தலைப்பு உரை-மட்டுமே இருக்க வேண்டும், மேலும் அது உலாவியின் தலைப்புப் பட்டியில் அல்லது பக்கத்தின் தாவலில் காட்டப்படும்.

⚠️ முக்கியமானது:

<title> உறுப்பு HTML ஆவணங்களில் தேவைப்படுகிறது!

பக்கத் தலைப்பின் உள்ளடக்கம் தேடுபொறி தரவுத்தரவிற்கு மிகவும் முக்கியமானது! பக்கத் தலைப்பு தேடல் முடிவுகளில் பக்கங்களைப் பட்டியலிடும்போது வரிசையை முடிவு செய்ய தேடுபொறி வழிமுறைகளால் பயன்படுத்தப்படுகிறது.

<title> உறுப்பு:

எனவே, தலைப்பை முடிந்தவரை துல்லியமாகவும் அர்த்தமுள்ளதாகவும் செய்ய முயற்சிக்கவும்!

Example

<!DOCTYPE html>
<html>
<head>
  <title>A Meaningful Page Title</title>
</head>
<body>

The content of the document......

</body>
</html>

The HTML <style> Element

<style> உறுப்பு ஒரு ஒற்றை HTML பக்கத்திற்கான பாணி தகவலை வரையறுக்க பயன்படுகிறது:

Example

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

The HTML <link> Element

<link> உறுப்பு தற்போதைய ஆவணத்திற்கும் ஒரு வெளிப்புற வளத்திற்கும் இடையிலான உறவை வரையறுக்கிறது.

<link> குறிச்சொல் பெரும்பாலும் வெளிப்புற பாணித் தாள்களை இணைக்க பயன்படுகிறது:

Example

<link rel="stylesheet" href="mystyle.css">

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

CSS பற்றி அனைத்தையும் அறிய, எங்கள் CSS டுடோரியலைப் பார்வையிடவும்.

The HTML <meta> Element

<meta> உறுப்பு பொதுவாக எழுத்துத் தொகுப்பு, பக்க விளக்கம், முக்கிய வார்த்தைகள், ஆவணத்தின் ஆசிரியர் மற்றும் வியூபோர்ட் அமைப்புகளைக் குறிப்பிட பயன்படுகிறது.

மெட்டாடேட்டா பக்கத்தில் காட்சிப்படுத்தப்படாது, ஆனால் உலாவிகளால் (உள்ளடக்கத்தை எவ்வாறு காட்டுவது அல்லது பக்கத்தை மீண்டும் ஏற்றுவது), தேடுபொறிகளால் (முக்கிய வார்த்தைகள்) மற்றும் பிற வலை சேவைகளால் பயன்படுத்தப்படுகிறது.

Examples

பயன்படுத்தப்படும் எழுத்துத் தொகுப்பை வரையறுக்கவும்:

<meta charset="UTF-8">

தேடுபொறிகளுக்கான முக்கிய வார்த்தைகளை வரையறுக்கவும்:

<meta name="keywords" content="HTML, CSS, JavaScript">

உங்கள் வலைப்பக்கத்தின் விளக்கத்தை வரையறுக்கவும்:

<meta name="description" content="Free Web tutorials">

ஒரு பக்கத்தின் ஆசிரியரை வரையறுக்கவும்:

<meta name="author" content="John Doe">

ஒவ்வொரு 30 வினாடிகளுக்கும் ஆவணத்தைப் புதுப்பிக்கவும்:

<meta http-equiv="refresh" content="30">

Example of <meta> tags:

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">

Setting The Viewport

வியூபோர்ட் என்பது ஒரு வலைப்பக்கத்தின் பயனர் காணக்கூடிய பகுதியாகும். இது சாதனத்துடன் மாறுபடும் - இது மொபைல் போனில் கணினி திரையை விட சிறியதாக இருக்கும்.

உங்கள் அனைத்து வலைப்பக்கங்களிலும் பின்வரும் <meta> உறுப்பைச் சேர்க்க வேண்டும்:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

இது பக்கத்தின் பரிமாணங்கள் மற்றும் அளவிடுதலை எவ்வாறு கட்டுப்படுத்துவது என்பது குறித்த வழிமுறைகளை உலாவிக்கு வழங்குகிறது.

📱 வியூபோர்ட் ஒப்பீடு:

வியூபோர்ட் மெட்டா குறிச்சொல் இல்லாமல் ஒரு வலைப்பக்கத்தின் எடுத்துக்காட்டு மற்றும் வியூபோர்ட் மெட்டா குறிச்சொல்லுடன் அதே வலைப்பக்கம்:

Without the viewport meta tag

Without viewport meta tag

மொபைல் சாதனங்களில் சரியாகக் காட்டப்படாது

With the viewport meta tag

With viewport meta tag

அனைத்து சாதனங்களிலும் சரியாகக் காட்டப்படும்

உதவிக்குறிப்பு: நீங்கள் இந்தப் பக்கத்தை தொலைபேசி அல்லது டேப்லெட் மூலம் உலாவுகிறீர்கள் என்றால், வித்தியாசத்தைக் காண கீழே உள்ள இரண்டு இணைப்புகளையும் கிளிக் செய்யலாம்.

The HTML <script> Element

<script> உறுப்பு கிளையன்ட்-சைட் JavaScriptகளை வரையறுக்க பயன்படுகிறது.

பின்வரும் JavaScript "Hello JavaScript!" என்று id="demo" உடன் ஒரு HTML உறுப்பில் எழுதுகிறது:

Example

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

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

JavaScript பற்றி அனைத்தையும் அறிய, எங்கள் JavaScript டுடோரியலைப் பார்வையிடவும்.

The HTML <base> Element

<base> உறுப்பு ஒரு பக்கத்தில் உள்ள அனைத்து சார்பு URLகளுக்கும் அடிப்படை URL மற்றும்/அல்லது இலக்கைக் குறிப்பிடுகிறது.

⚠️ முக்கியமானது:

<base> குறிச்சொல் ஒரு href அல்லது target பண்புக்கூறு அல்லது இரண்டும் இருக்க வேண்டும்.

ஒரு ஆவணத்தில் ஒரே ஒரு <base> உறுப்பு மட்டுமே இருக்க முடியும்!

Example

<head>
<base href="https://www.jassifteam.com/" target="_blank">
</head>

<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>

அத்தியாய சுருக்கம்

Exercise

❓ பின்வரும் எந்த உறுப்பு தலைப்புப் பிரிவில் வைக்கப்படக்கூடாது?

<title>
✗ தவறு! <title> உறுப்பு தலைப்புப் பிரிவில் வைக்கப்பட வேண்டும்.
<link>
✗ தவறு! <link> உறுப்பு வெளி CSS கோப்புகளை இணைக்க தலைப்புப் பிரிவில் வைக்கப்படுகிறது.
<body>
✓ சரி! <body> உறுப்பு தலைப்புப் பிரிவில் வைக்கப்படக்கூடாது. இது தனி உறுப்பாக <head> க்குப் பிறகு வைக்கப்படுகிறது.

HTML head Elements

குறிச்சொல் விளக்கம்
<head> ஆவணத்தைப் பற்றிய தகவலை வரையறுக்கிறது
<title> ஒரு ஆவணத்தின் தலைப்பை வரையறுக்கிறது
<base> ஒரு பக்கத்தில் உள்ள அனைத்து இணைப்புகளுக்கும் ஒரு இயல்புநிலை முகவரி அல்லது இயல்புநிலை இலக்கை வரையறுக்கிறது
<link> ஒரு ஆவணத்திற்கும் ஒரு வெளிப்புற வளத்திற்கும் இடையிலான உறவை வரையறுக்கிறது
<meta> ஒரு HTML ஆவணத்தைப் பற்றிய மெட்டாடேட்டாவை வரையறுக்கிறது
<script> ஒரு கிளையன்ட்-சைட் ஸ்கிரிப்ட்டை வரையறுக்கிறது
<style> ஒரு ஆவணத்திற்கான பாணி தகவலை வரையறுக்கிறது

📚 குறிப்பு:

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