HTML Semantic Elements

அர்த்தப்பூர்வ உறுப்புகள் = அர்த்தத்தைக் கொண்ட உறுப்புகள்.

அர்த்தப்பூர்வ உறுப்புகள் என்றால் என்ன?

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

HTML இல் அர்த்தப்பூர்வ உறுப்புகள்

பல வலைத்தளங்கள் வழிசெலுத்தல், தலைப்பு மற்றும் அடிக்குறிப்பைக் குறிக்க <div id="nav">, <div class="header">, <div id="footer"> போன்ற HTML குறியீட்டைக் கொண்டிருக்கின்றன.

HTML இல் ஒரு வலைப்பக்கத்தின் வெவ்வேறு பகுதிகளை வரையறுக்கப் பயன்படுத்தக்கூடிய பல அர்த்தப்பூர்வ உறுப்புகள் உள்ளன:

அர்த்தப்பூர்வ உறுப்புகள் பயன்பாடு

HTML <section> உறுப்பு

<section> உறுப்பு ஒரு ஆவணத்தில் ஒரு பிரிவை வரையறுக்கிறது.

Jassif Team இன் HTML ஆவணத்தின் படி: "ஒரு பிரிவு என்பது ஒரு கருப்பொருள் உள்ளடக்கத்தின் தொகுப்பாகும், பொதுவாக ஒரு தலைப்புடன்."

எங்கே <section> உறுப்பைப் பயன்படுத்தலாம்:

• அத்தியாயங்கள்
• அறிமுகம்
• செய்தி உருப்படிகள்
• தொடர்பு தகவல்

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

ஒரு ஆவணத்தில் இரண்டு பிரிவுகள்:

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

HTML <article> உறுப்பு

<article> உறுப்பு சுயாதீனமான, சுய-பொருத்தப்பட்ட உள்ளடக்கத்தைக் குறிப்பிடுகிறது.

ஒரு கட்டுரை தனியாக அர்த்தமுள்ளதாக இருக்க வேண்டும், மற்றும் அதை வலைத்தளத்தின் பிற பகுதிகளிலிருந்து சுயாதீனமாக விநியோகிக்க முடியும்.

எங்கே <article> உறுப்பைப் பயன்படுத்தலாம்:

• மன்ற இடுகைகள்
• வலைப்பதிவு இடுகைகள்
• பயனர் கருத்துகள்
• தயாரிப்பு அட்டைகள்
• செய்தித்தாள் கட்டுரைகள்

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

சுயாதீனமான, சுய-பொருத்தப்பட்ட உள்ளடக்கத்துடன் மூன்று கட்டுரைகள்:

HTML <header> உறுப்பு

<header> உறுப்பு அறிமுக உள்ளடக்கத்திற்கான கொள்கலன் அல்லது வழிசெலுத்தல் இணைப்புகளின் தொகுப்பைக் குறிக்கிறது.

ஒரு <header> உறுப்பு பொதுவாக கொண்டுள்ளது:

• ஒன்று அல்லது அதற்கு மேற்பட்ட தலைப்பு உறுப்புகள் (<h1> - <h6>)
• லோகோ அல்லது ஐகான்
• ஆசிரியர் தகவல்

HTML <footer> உறுப்பு

<footer> உறுப்பு ஒரு ஆவணம் அல்லது பிரிவுக்கான அடிக்குறிப்பை வரையறுக்கிறது.

ஒரு <footer> உறுப்பு பொதுவாக கொண்டுள்ளது:

• ஆசிரியர் தகவல்
• பதிப்புரிமை தகவல்
• தொடர்பு தகவல்
• தள வரைபடம்
• மேலே செல்லும் இணைப்புகள்
• தொடர்புடைய ஆவணங்கள்

ஒரு ஆவணத்தில் பல <footer> உறுப்புகள் இருக்கலாம்.

HTML <nav> உறுப்பு

<nav> உறுப்பு வழிசெலுத்தல் இணைப்புகளின் தொகுப்பை வரையறுக்கிறது.

ஒரு ஆவணத்தின் அனைத்து இணைப்புகளும் <nav> உறுப்புக்குள் இருக்க வேண்டும் என்பதில்லை. <nav> உறுப்பு முக்கிய வழிசெலுத்தல் இணைப்புகளுக்கு மட்டுமே.

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

HTML <aside> உறுப்பு

<aside> உறுப்பு அது வைக்கப்பட்டுள்ள உள்ளடக்கத்திலிருந்து சில உள்ளடக்கத்தை வரையறுக்கிறது (ஒரு பக்கப்பட்டியைப் போல).

<aside> உள்ளடக்கம் சுற்றியுள்ள உள்ளடக்கத்துடன் மறைமுகமாக தொடர்புடையதாக இருக்க வேண்டும்.

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

HTML <figure> மற்றும் <figcaption> உறுப்புகள்

<figure> குறிச்சொல் சுய-பொருத்தப்பட்ட உள்ளடக்கத்தைக் குறிப்பிடுகிறது, உதாரணமாக விளக்கப்படங்கள், வரைபடங்கள், புகைப்படங்கள், குறியீட்டுப் பட்டியல்கள், முதலியன.

<figcaption> குறிச்சொல் ஒரு <figure> உறுப்புக்கான தலைப்பை வரையறுக்கிறது. <figcaption> உறுப்பை <figure> உறுப்பின் முதல் குழந்தையாக அல்லது கடைசி குழந்தையாக வைக்கலாம்.

ஃபிகர் எடுத்துக்காட்டு

படம் 1 - <figure> உறுப்பை விளக்கும் எடுத்துக்காட்டு படம்

ஏன் அர்த்தப்பூர்வ உறுப்புகள்?

Jassif Team இன் படி: "ஒரு அர்த்தப்பூர்வ வலை பயன்பாடுகள், நிறுவனங்கள் மற்றும் சமூகங்கள் முழுவதும் தரவைப் பகிர்ந்து மீண்டும் பயன்படுத்த அனுமதிக்கிறது."

பயிற்சி

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

சிறந்த நடைமுறைகள்