• ట్యాగ్ vs ఎలిమెంట్: చాలామంది కన్‌ఫ్యూజ్ అయ్యే ఈ రెండు పదాల మధ్య ఉన్న ఖచ్చితమైన సాంకేతిక వ్యత్యాసం.
• Void Elements (స్వీయ-ముగింపు ట్యాగ్‌లు): క్లోజింగ్ ట్యాగ్ అవసరం లేని ప్రత్యేక ఎలిమెంట్స్ (br, hr, img, input, meta).
• Global Attributes నిఘంటువు: HTML లోని ప్రతి ఎలిమెంట్‌కి ఉపయోగించగల సార్వత్రిక లక్షణాలు (id, class, style, title, hidden, tabindex, contenteditable).
• id vs class సమగ్ర పోలిక: ఎప్పుడు ఏది వాడాలి? CSS మరియు JavaScript పాయింట్ ఆఫ్ వ్యూలో బెస్ట్ ప్రాక్టీసెస్.
• Custom Data Attributes (data-*): వెబ్‌పేజీలో జావాస్క్రిప్ట్ కోసం అదనపు సమాచారాన్ని భద్రపరిచే ఆధునిక పద్ధతి.
• DOM Tree ఆర్కిటెక్చర్: బ్రౌజర్ HTML కోడ్‌ను తల్లిదండ్రులు-పిల్లల (Parent-Child) చెట్టుగా ఎలా మారుస్తుంది?
• బిగినర్స్ సాధారణ పొరపాట్లు & క్విజ్: డూప్లికేట్ ఐడీలు, స్పేస్ బగ్స్ మరియు ఇంటర్వ్యూ ప్రశ్నలకు సమాధానాలు.

వెబ్ డెవలప్‌మెంట్ ఇంటర్వ్యూలలో అడిగే అత్యంత ప్రాథమిక ప్రశ్న ఇది. చాలామంది ట్యాగ్ అన్నా ఎలిమెంట్ అన్నా ఒకటే అనుకుంటారు, కానీ రెండింటికీ స్పష్టమైన తేడా ఉంది:

HTML5 లో ఎలిమెంట్స్ రెండు ప్రధాన వర్గాలుగా ఉంటాయి:

1. కంటెంట్ ఉన్న సాధారణ ఎలిమెంట్స్ (Container Elements): వీటికి తప్పనిసరిగా ఓపెనింగ్ ట్యాగ్ మరియు క్లోజింగ్ ట్యాగ్ రెండూ ఉంటాయి. వాటి మధ్యలో టెక్స్ట్ లేదా ఇతర ఎలిమెంట్స్ ఉంటాయి. ఉదాహరణకు: <h1>..</h1>, <p>..</p>, <button>..</button>, <div>..</div>.
2. Void Elements (స్వీయ-ముగింపు / ఖాళీ ఎలిమెంట్స్): వీటికి ఎలాంటి కంటెంట్ ఉండదు. కాబట్టి వీటికి ముగింపు ట్యాగ్ (Closing Tag) రాయాల్సిన అవసరమే లేదు!

HTML లో కొన్ని ఆట్రిబ్యూట్లు నిర్దిష్ట ఎలిమెంట్లకు మాత్రమే పరిమితం (ఉదాహరణకు src కేవలం <img> కి, href కేవలం <a> కి మాత్రమే ఉంటాయి). కానీ గ్లోబల్ ఆట్రిబ్యూట్స్ (Global Attributes) ను HTML లోని ఏ ఎలిమెంట్‌కైనా నిర్భయంగా ఉపయోగించవచ్చు:

ఇది వెబ్ డెవలప్‌మెంట్‌లో అత్యంత ప్రధానమైన డిజైన్ నిర్ణయం. దీనిని ఒక కాలేజీ లేదా ఆఫీస్ ఉదాహరణతో గుర్తుపెట్టుకోవచ్చు:

HTML5 రాకముందు డెవలపర్లు బటన్ లేదా డివ్ లో అదనపు సమాచారాన్ని (ఉదాహరణకు ప్రొడక్ట్ ప్రైస్, యూజర్ ఐడీ) దాచడానికి అక్రమంగా క్లాస్ పేర్లలోనో లేదా అనధికార ఆట్రిబ్యూట్లలోనో రాసేవారు. ఇది వ్యాలిడేషన్ ఎర్రర్లకు దారితీసేది.

దీన్ని శాశ్వతంగా పరిష్కరించడానికి HTML5 లో Custom Data Attributes (data-*) ని ప్రవేశపెట్టారు. data- తర్వాత మీరు మీకు నచ్చిన పేరు పెట్టుకోవచ్చు:

<!-- ఇ-కామర్స్ ప్రొడక్ట్ కార్డులో కస్టమ్ డేటా దాచడం -->
<div class="product-card" 
     data-product-id="4501" 
     data-price="1499" 
     data-category="electronics"
     data-in-stock="true">
  <h3>వైర్‌లెస్ హెడ్‌ఫోన్స్</h3>
  <p>ధర: ₹1,499</p>
  <button class="buy-btn">కార్ట్‌కు జోడించండి</button>
</div>

JavaScript లో దీనిని ఎలా సులభంగా చదువుతారో చూడండి:

const card = document.querySelector(".product-card");

// dataset ప్రాపర్టీ ద్వారా నేరుగా వేల్యూలను పొందవచ్చు!
console.log(card.dataset.productId);  // Output: "4501"
console.log(card.dataset.price);      // Output: "1499"
console.log(card.dataset.category);   // Output: "electronics"

ఈ టెక్నిక్ ఉపయోగించి వెబ్ డెవలపర్లు బ్యాకెండ్ డేటాను ఫ్రంట్-ఎండ్ బటన్లు మరియు కార్డ్స్‌లో సురక్షితంగా అనుసంధానిస్తారు.

బ్రౌజర్ మీ HTML ఫైల్‌ను చదివినప్పుడు, అది లోపల ఒక కుటుంబ వృక్షం (Family Tree) లాంటి నెస్టెడ్ నిర్మాణాన్ని సృష్టిస్తుంది. దీనినే DOM (Document Object Model) Tree అంటారు.

ఇందులో ప్రతి ఎలిమెంట్‌కు కుటుంబ సంబంధాలు ఉంటాయి:

• Parent (తల్లి లేదా తండ్రి): మరొక ఎలిమెంట్‌ను నేరుగా తన కడుపులో ఉంచుకున్నది. పైన చిత్రంలో <body> అనేది <header> మరియు <main> లకు Parent.
• Child (బిడ్డ / సంతానం): Parent లోపల నేరుగా ఉన్న ఎలిమెంట్. <h1> అనేది <header> కు Child.
• Siblings (తోబుట్టువులు): ఒకే Parent ను పంచుకునే పక్కపక్క ఎలిమెంట్స్. <head> మరియు <body> తోబుట్టువులు.
• Ancestor (పూర్వీకులు): ఒక ఎలిమెంట్‌కి పైన ఉండే Parents, Grandparents అందరూ పూర్వీకులే. <html> అందరికీ Ancestor.
• Descendants (వంశజులు): ఒక ఎలిమెంట్ లోపల ఎన్ని తరాలైనా కింద ఉన్న అన్ని ఎలిమెంట్స్ దాని Descendants అవుతాయి.

ఇప్పటివరకు మనం నేర్చుకున్న గ్లోబల్ ఆట్రిబ్యూట్స్, కస్టమ్ డేటా, మరియు నెస్టెడ్ DOM సంబంధాలను కలిపి ఒక లైవ్ ప్రాక్టికల్ కోడ్‌ను పరిశీలిద్దాం:

<!DOCTYPE html>
<html lang="te">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML5 ఎలిమెంట్స్ & గ్లోబల్ ఆట్రిబ్యూట్స్</title>
  </head>
  <body>
    <!-- id మరియు class వాడకం -->
    <header id="site-header" class="header-box">
      <h1 title="మా వెబ్‌సైట్ శీర్షిక">తెలుగు టెక్ లెర్నింగ్ హబ్</h1>
      <p class="subtitle">ఎలిమెంట్స్, ట్యాగ్స్ మరియు ఆట్రిబ్యూట్స్ డెమో</p>
    </header>

    <hr />

    <main>
      <!-- contenteditable తో యూజర్ డైరెక్ట్‌గా ఎడిట్ చేయవచ్చు -->
      <section class="card">
        <h2>ఇంటరాక్టివ్ నోట్స్ (మీరే ఎడిట్ చేసి చూడండి)</h2>
        <p contenteditable="true" style="padding:10px; background:#f1f5f9; border-radius:6px;">
          ఈ లైన్‌పై క్లిక్ చేసి మీ పేరు టైప్ చేయండి! ఇది contenteditable ఫీచర్.
        </p>
      </section>

      <!-- Custom data-* ఆట్రిబ్యూట్లతో కూడిన బటన్ -->
      <section class="card" style="margin-top:20px;">
        <button class="btn btn-primary" 
                data-course="html5" 
                data-level="advanced"
                title="కోర్సులో చేరండి">
          HTML5 నేర్చుకోండి
        </button>
      </section>
    </main>
  </body>
</html>

బ్రౌజర్‌లో లైవ్ ప్రివ్యూ ఎలా కనిపిస్తుంది? (Visual Preview):

ఎలిమెంట్స్ మరియు ఆట్రిబ్యూట్లతో పనిచేసేటప్పుడు బిగినర్స్ తరచుగా చేసే 5 తీవ్రమైన తప్పులు:

❌ తప్పు 1: పేజీలో ఒకే ID ని రెండు వేర్వేరు ఎలిమెంట్లకు ఇవ్వడం (Duplicate ID)

<!-- తీవ్రమైన తప్పు: ఇద్దరికీ ఒకే id ఇచ్చారు -->
<button id="submit-btn">మొదటి బటన్</button>
<button id="submit-btn">రెండవ బటన్</button>

సమస్య: JavaScript లో document.getElementById("submit-btn") అని రాసినప్పుడు బ్రౌజర్ ఎల్లప్పుడూ మొదటి బటన్‌ను మాత్రమే తీసుకుంటుంది. రెండవ బటన్‌ను పట్టించుకోదు! ఒకే రకమైన స్టైల్స్ కావాలంటే class="submit-btn" వాడాలి.

❌ తప్పు 2: క్లాస్ పేర్లలో పొరపాటున స్పేస్‌లు ఇవ్వడం

<!-- డెవలపర్ అనుకున్నది ఒకే క్లాస్, కానీ బ్రౌజర్ 2 క్లాసులుగా భావిస్తుంది! -->
<div class="card header">...</div>

నియమం: క్లాస్ పేర్లలో స్పేస్ ఇస్తే అది రెండు వేర్వేరు క్లాసులు (card మరియు header) అవుతాయి. ఒకే క్లాస్ కోసం హైఫన్ వాడాలి: class="card-header".

❌ తప్పు 3: Void Elements కి క్లోజింగ్ ట్యాగ్ రాయడం

<!-- తప్పు: img మరియు br కి క్లోజింగ్ ట్యాగ్స్ ఉండవు -->
<img src="logo.png"></img>
<br></br>

సరైన రూపం: కేవలం <img src="logo.png" alt="లోగో"> మరియు <br> అని రాస్తే చాలు.

❌ తప్పు 4: ఆట్రిబ్యూట్ విలువలకు కొటేషన్స్ (Quotes) మర్చిపోవడం

<h1 title=నా మొదటి పేజీ> అని రాస్తే స్పేస్ వల్ల మొదటి పదం మాత్రమే టైటిల్‌గా మారుతుంది. ఎల్లప్పుడూ కొటేషన్స్ వాడాలి: <h1 title="నా మొదటి పేజీ">.

❌ తప్పు 5: నెస్టెడ్ ట్యాగ్స్ ఓవర్‌ల్యాప్ చేయడం (Cross-Nesting Bug)

<p><span>హలో</p></span> అని పొరపాటున రాస్తే DOM ట్రీ బ్రేక్ అవుతుంది. లోపల ఓపెన్ చేసిన ట్యాగ్‌ను లోపలే క్లోజ్ చేయాలి: <p><span>హలో</span></p>.

ఈ క్రింది ప్రశ్నలకు స్వయంగా సమాధానాలు రాసి చూడండి, ఆపై డ్రాప్‌డౌన్ తెరిచి పరిశీలించండి:

1. ట్యాగ్ (Tag) మరియు ఎలిమెంట్ (Element) మధ్య ప్రాథమిక వ్యత్యాసం ఏమిటి? ఒక ఉదాహరణతో వివరించండి.
2. ఒక వెబ్‌పేజీలో ఒకే id ని రెండు ఎలిమెంట్లకు ఇస్తే ఏం జరుగుతుంది? బ్రౌజర్ ఎర్రర్ చూపిస్తుందా?
3. Void Elements అంటే ఏమిటి? కనీసం 4 Void Elements పేర్లు చెప్పండి.
4. data-* ఆట్రిబ్యూట్లను ఎందుకు వాడతారు? JavaScript లో వాటిని ఏ ప్రాపర్టీ ద్వారా యాక్సెస్ చేస్తారు?
5. DOM Tree లో Parent, Child మరియు Siblings అనగా ఏమిటి?

• Element: Opening tag + Attributes + Content + Closing tag ల సంపూర్ణ సమాహారం.
• Void Elements: క్లోజింగ్ ట్యాగ్ లేని ఖాళీ ఎలిమెంట్స్ (<br>, <hr>, <img>, <input>).
• id vs class: id పేజీలో ఒక్కసారే ఉండే ఆధార్ నంబర్ లాంటిది; class ఎన్నిసార్లయినా పునర్వినియోగించగల గ్రూప్ పేరు.
• Global Attributes: ప్రతి ఎలిమెంట్‌కీ ఉపయోగించగల లక్షణాలు (id, class, style, title, hidden, tabindex).
• Custom Data: data-* ద్వారా బ్యాకెండ్ సమాచారాన్ని HTML లో భద్రపరిచి JS లో dataset ద్వారా చదవడం.
• DOM Tree: HTML లోని పేరెంట్, చైల్డ్, సిబ్లింగ్స్ క్రమానుగత కుటుంబ వృక్షం.

ఇప్పటివరకు మీరు HTML యొక్క ఎముకల గూడు, DOCTYPE, వ్యూపోర్ట్ మరియు ఎలిమెంట్స్ యొక్క సూత్రాలను పక్కాగా అర్థం చేసుకున్నారు. తర్వాతి Chapter 4 (హెడ్డింగ్స్ h1-h6, పేరాగ్రాఫ్స్ & టెక్స్ట్ ఫార్మాటింగ్) లో మనం వెబ్‌పేజీలోని సమాచారాన్ని అందంగా తీర్చిదిద్దే హెడ్డింగ్ హైరార్కీ, పేరాగ్రాఫ్‌లు, బోల్డ్ (strong vs b), ఇటాలిక్ (em vs i), హైలైటింగ్ (mark), మరియు గణిత ఫార్ములాల కోసం <sup>, <sub> ట్యాగ్స్ గురించి లోతుగా నేర్చుకుందాం!