• యాంకర్ ట్యాగ్ అనాటమీ: <a> మరియు href (Hypertext Reference) ఆట్రిబ్యూట్ పనిచేసే విధానం.
• ఫైల్ పాత్‌ల సైన్స్: Absolute URLs (పూర్తి డొమైన్ చిరునామా) vs Relative URLs (అంతర్గత సాపేక్ష పాత్స్) సమగ్ర విశ్లేషణ.
• లింక్ టార్గెట్స్: _self, _blank, _parent, _top ల వ్యత్యాసాలు మరియు ఎప్పుడు ఏది వాడాలి.
• సైబర్ సెక్యూరిటీ షీల్డ్: target="_blank" తో పాటు rel="noopener noreferrer" ఎందుకు తప్పనిసరిగా వాడాలి?
• ఇంటర్నల్ బుక్‌మార్క్స్ (#id): ఒకే పేజీలో నిర్దిష్ట విభాగానికి జంప్ చేయడం మరియు "Back to Top" లింక్స్ నిర్మాణం.
• స్పెషల్ ప్రోటోకాల్స్: mailto: (ఈమెయిల్), tel: (ఫోన్ కాల్), sms:, మరియు download ఆట్రిబ్యూట్.
• SEO Anchor Text గైడ్‌లైన్స్: "Click Here" రాయడం ఎందుకు పెద్ద తప్పు? బిగినర్స్ పొరపాట్లు & ప్రాక్టీస్ క్విజ్.

సముద్రంలో ఓడ ఒకే చోట స్థిరంగా ఉండటానికి నావికులు పెద్ద ఇనుప లంగరు (Anchor) ను నీటిలోకి విసురుతారు. అదేవిధంగా వెబ్‌పేజీలోని ఒక పదాన్ని లేదా బొమ్మను వేరొక గమ్యస్థాన వెబ్ చిరునామాకు కట్టిపడేసే సాధనమే Anchor Tag (<a>).

• href (Hypertext Reference): యూజర్ ఆ టెక్స్ట్‌పై క్లిక్ చేసినప్పుడు బ్రౌజర్ ఏ URL లేదా ఫైల్ వద్దకు వెళ్ళాలో చెప్పే గమ్యస్థాన చిరునామా.
• Anchor Text (యాంకర్ టెక్స్ట్): ప్రారంభ మరియు ముగింపు ట్యాగ్‌ల మధ్య మనం రాసే అక్షరాలు. వినియోగదారుడి కంటికి నీలిరంగు అండర్‌లైన్ తో కనిపించేది ఇదే.

బ్రౌజర్ లో లింకుల డిఫాల్ట్ రంగుల ప్రవర్తన:

వెబ్ డెవలప్‌మెంట్‌లో లింక్ చిరునామాలు (Paths) రెండు రకాలుగా ఉంటాయి. ఈ రెండింటి మధ్య తేడా తెలియకపోతే ప్రాజెక్ట్ లైవ్ చేసినప్పుడు లింకులు విరిగిపోయి 404 Not Found ఎర్రర్లు వస్తాయి:

సాపేక్ష పాత్‌లు (Relative Paths) ఎలా పనిచేస్తాయి? (The Folder Navigation Rules):

యూజర్ ఒక లింక్‌పై క్లిక్ చేసినప్పుడు ఆ గమ్యస్థాన పేజీ ఎక్కడ ఓపెన్ కావాలి? ప్రస్తుత ట్యాబ్‌లోనేనా, లేక కొత్త ట్యాబ్‌లోనా? దీనిని నిర్ణయించేది target ఆట్రిబ్యూట్:

ఇది సీనియర్ వెబ్ డెవలపర్లు మరియు సైబర్ సెక్యూరిటీ ఇంజనీర్లు మాత్రమే గమనించే అత్యంత కీలకమైన అంశం. మీరు కేవలం target="_blank" అని రాసి వదిలేస్తే, మీ వెబ్‌సైట్‌కు తీవ్రమైన ప్రమాదం పొంచి ఉంటుంది!

ఈ దాడిని తిప్పికొట్టే భద్రతా కవచం (Security Shield):

<!-- సురక్షితమైన ఆధునిక లింక్ కోడింగ్ -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  సురక్షితమైన బాహ్య వెబ్‌సైట్ సందర్శించండి
</a>

• rel="noopener": కొత్తగా తెరిచిన పేజీకి మీ పేజీతో ఉన్న window.opener కనెక్షన్‌ను శాశ్వతంగా తెంచేస్తుంది. కొత్త పేజీ స్వతంత్రమైన వేరే ప్రాసెస్‌లో రన్ అవుతుంది.
• rel="noreferrer": మీ వెబ్‌సైట్ అడ్రస్ వివరాలను ఆ అవతలి సర్వర్‌కు HTTP Referer హెడర్ ద్వారా పంపకుండా దాచి ఉంచుతుంది. యూజర్ ప్రైవసీకి ఇది రక్షణ.

వికీపీడియా ఆర్టికల్స్‌లో పైభాగంలో 'విషయ సూచిక' (Table of Contents) ఉంటుంది. అందులోని 3వ పాయింట్‌పై క్లిక్ చేయగానే పేజీ ఆటోమేటిక్‌గా కిందకు స్క్రోల్ అయి ఆ విభాగాన్ని చూపిస్తుంది కదా! దీనినే ఇంటర్నల్ బుక్‌మార్కింగ్ (Internal Jump Links) అంటారు.

ఇది ఎలా పని చేస్తుంది? (2 సరళమైన స్టెప్స్):

1. గమ్యస్థాన ఎలిమెంట్‌కు ఒక యూనిక్ ID ఇవ్వండి:
   <section id="contact-us">...మమ్మల్ని సంప్రదించండి...</section>
2. యాంకర్ ట్యాగ్ లో హ్యాష్ గుర్తు (#) తో ఆ ID ని లింక్ చేయండి:
   <a href="#contact-us">సంప్రదింపుల విభాగానికి వెళ్ళండి ⬇</a>

<!-- నావిగేషన్ మెనూ -->
<nav>
  <a href="#features">ఫీచర్లు</a> |
  <a href="#pricing">ధరల వివరాలు</a> |
  <a href="#faq">ప్రశ్నోత్తరాలు</a>
</nav>

<!-- పేజీలోని విభాగాలు -->
<section id="features" style="margin-top:400px;">
  <h2>మా సాఫ్ట్‌వేర్ ఫీచర్లు</h2>
  <p>అద్భుతమైన ఫీచర్ల వివరాలు ఇక్కడ ఉన్నాయి.</p>
  <a href="#top">⬆ పైకి వెళ్ళండి (Back to Top)</a>
</section>

కేవలం వెబ్ పేజీలకే కాకుండా, మొబైల్ ఫోన్లలో మరియు కంప్యూటర్లలో స్థానిక యాప్‌లను నేరుగా ట్రిగ్గర్ చేయడానికి ప్రత్యేక ప్రోటోకాల్ లింకులు ఉన్నాయి:

ఈ అధ్యాయంలో మనం నేర్చుకున్న అబ్సల్యూట్, రిలేటివ్, బుక్‌మార్క్, ఈమెయిల్ మరియు ఫోన్ లింకులన్నింటినీ ఒకే చోట కలిపిన ఒక రియలిస్టిక్ నావిగేషన్ పోర్ట్‌ఫోలియో కోడ్‌ను పరిశీలిద్దాం:

<!DOCTYPE html>
<html lang="te" style="scroll-behavior: smooth;">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>నావిగేషన్ & లింక్స్ మాస్టర్ డెమో</title>
  </head>
  <body id="top">
    <!-- ప్రధాన హెడర్ నావిగేషన్ -->
    <header style="padding:16px; background:#f8fafc; border-bottom:1px solid #e2e8f0;">
      <h1 style="font-size:22px; margin:0 0 10px 0;">రవి కుమార్ - వెబ్ డెవలపర్</h1>
      <nav style="display:flex; gap:14px; flex-wrap:wrap;">
        <a href="#about">గురించి (About)</a>
        <a href="#skills">నైపుణ్యాలు (Skills)</a>
        <a href="#contact">సంప్రదించండి (Contact)</a>
        <a href="https://github.com" target="_blank" rel="noopener noreferrer" style="color:#059669; font-weight:700;">
          GitHub ప్రొఫైల్ &nearr;
        </a>
      </nav>
    </header>

    <main style="padding:20px;">
      <!-- సెక్షన్ 1: About -->
      <section id="about" style="margin-bottom:60px;">
        <h2>నా గురించి (About Me)</h2>
        <p>నేను HTML5, CSS3 మరియు JavaScript లో ఆధునిక వెబ్‌సైట్లను నిర్మిస్తాను.</p>
        <p>
          పూర్తి కోర్సు గైడ్ కోసం <a href="/blog-html.html">HTML5 మాస్టర్‌క్లాస్ తెలుగు రోడ్‌మ్యాప్</a> చూడండి.
        </p>
      </section>

      <!-- సెక్షన్ 2: Skills -->
      <section id="skills" style="margin-bottom:60px;">
        <h2>సాంకేతిక నైపుణ్యాలు (Technical Skills)</h2>
        <p>ఫ్రంట్-ఎండ్ ఆర్కిటెక్చర్, రెస్పాన్సివ్ డిజైన్, వెబ్ యాక్సెసిబిలిటీ.</p>
        <a href="#top" style="font-size:13px; color:#64748b;">&uarr; పేజీ పైకి వెళ్ళండి (Back to Top)</a>
      </section>

      <!-- సెక్షన్ 3: Contact & Protocols -->
      <section id="contact" style="background:#f1f5f9; padding:20px; border-radius:10px;">
        <h2>నన్ను సంప్రదించండి (Get In Touch)</h2>
        <p>
          &bull; ఈమెయిల్: <a href="mailto:ravi@example.com">ravi@example.com</a><br />
          &bull; ఫోన్ కాల్: <a href="tel:+919876543210">+91 98765 43210</a>
        </p>
        <a href="#top" style="font-size:13px; color:#64748b;">&uarr; Back to Top</a>
      </section>
    </main>
  </body>
</html>

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

లింకులతో పనిచేసేటప్పుడు బిగినర్స్ తరచుగా చేసే 5 పెద్ద తప్పులు మరియు వాటి నివారణలు:

❌ తప్పు 1: Anchor Text గా కేవలం "Click Here" లేదా "ఇక్కడ నొక్కండి" అని రాయడం

<!-- చెత్త పద్ధతి (SEO & Accessibility Disaster) -->
మా కోర్సు వివరాల కోసం <a href="course.html">ఇక్కడ క్లిక్ చేయండి</a>.

<!-- సరైన పద్ధతి (Descriptive Anchor Text) -->
పూర్తి సమాచారం కోసం మా <a href="course.html">HTML5 పూర్తి కోర్సు వివరాలు</a> చూడండి.

కారణం: అంధులు స్క్రీన్ రీడర్స్ వాడేటప్పుడు కేవలం లింకుల లిస్ట్ మాత్రమే చూస్తారు. స్క్రీన్ మీద పదిసార్లు "Click Here" అని వస్తే ఏ లింక్ దేనికో అర్థం కాదు! గూగుల్ ర్యాంకింగ్స్‌కు కూడా డిస్క్రిప్టివ్ యాంకర్ టెక్స్ట్ అవసరం.

❌ తప్పు 2: target="_blank" వాడి rel="noopener" మర్చిపోవడం

ఇది హ్యాకర్లకు రివర్స్ ట్యాబ్‌నాబింగ్ దాడి చేసే అవకాశం ఇస్తుంది. ఎల్లప్పుడూ rel="noopener noreferrer" జత చేయాలి.

❌ తప్పు 3: ఖాళీ లింక్ కోసం href="#" వాడటం

<!-- తప్పు: ఇది క్లిక్ చేయగానే పేజీ పైభాగం (Top) కి జంప్ అయిపోతుంది -->
<a href="#" onclick="doSomething()">యాక్షన్</a>

నివారణ: కేవలం క్లిక్ ఈవెంట్ కోసం అయితే <button> ట్యాగ్ వాడాలి, లింక్ వాడకూడదు!

❌ తప్పు 4: Relative పాత్‌లలో స్లాష్ (/) తప్పుగా వాడటం

href="/about.html" అంటే డొమైన్ రూట్‌కి వెళుతుంది. href="about.html" అంటే ప్రస్తుత ఫోల్డర్ లోని ఫైల్ కి వెళుతుంది. గిట్‌హబ్ పేజీలు లేదా సబ్‌ఫోల్డర్ ప్రాజెక్టులలో రూట్ స్లాష్ / ఇస్తే 404 ఎర్రర్ వస్తుంది!

❌ తప్పు 5: ప్రోటోకాల్ ప్రిఫిక్స్ మర్చిపోవడం

ఫోన్ నంబర్ కోసం href="9876543210" అని ఇస్తే బ్రౌజర్ దానిని ఒక వెబ్ ఫైల్ అనుకుని వెతుకుతుంది. ఖచ్చితంగా href="tel:+919876543210" అని tel: ప్రిఫిక్స్ ఇవ్వాలి!

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

1. Absolute URL మరియు Relative URL ల మధ్య తేడా ఏమిటి? ఉదాహరణలతో వివరించండి.
2. target="_blank" వాడినప్పుడు rel="noopener noreferrer" ఎందుకు తప్పనిసరిగా వాడాలి?
3. ఒక వెబ్‌పేజీలో నిర్దిష్ట విభాగానికి (Section) జంప్ చేయడానికి ఇంటర్నల్ బుక్‌మార్క్‌ను ఎలా నిర్మిస్తారు?
4. మొబైల్ ఫోన్లలో యూజర్ నేరుగా కాల్ చేయడానికి లేదా ఈమెయిల్ పంపడానికి ఏ ప్రోటోకాల్స్ వాడతారు?
5. "Click Here" అని యాంకర్ టెక్స్ట్ రాయడం ఎందుకు సరైన పద్ధతి కాదు?

• యాంకర్ ట్యాగ్ (<a>): వెబ్‌పేజీలను ఒకదానితో ఒకటి అనుసంధానించే హైపర్‌లింక్ సృష్టికర్త.
• href ఆట్రిబ్యూట్: లింక్ నొక్కితే ఎక్కడికి వెళ్ళాలో నిర్దేశించే గమ్యస్థాన చిరునామా.
• Absolute vs Relative: బయటి సైట్లకు పూర్తి URL, సొంత సైట్ పేజీలకు సాపేక్ష పాత్స్ (./, ../).
• Security: target="_blank" వాడినప్పుడు ఎల్లప్పుడూ rel="noopener noreferrer" జతచేయాలి.
• Internal Bookmarks: href="#section-id" తో ఒకే పేజీలో స్మూత్‌గా పైకి కిందకు జంప్ చేయడం.
• Special Protocols: mailto: ద్వారా మెయిల్స్, tel: ద్వారా ఫోన్ కాల్స్, download ద్వారా ఫైల్స్ డౌన్‌లోడ్.

వెబ్‌సైట్లలో సమాచారాన్ని క్రమపద్ధతిలో అమర్చడానికి లిస్టులు ఎంతగానో ఉపయోగపడతాయి. తర్వాతి Chapter 6 (లిస్టులు: Unordered <ul>, Ordered <ol> & Description Lists <dl>) లో మనం బుల్లెట్ పాయింట్లు, నంబర్డ్ లిస్టులు, నెస్టెడ్ లిస్టులు మరియు డిస్క్రిప్షన్ లిస్టుల ద్వారా ఆధునిక నావిగేషన్ మెనూ బార్లను ఎలా నిర్మించాలో పూర్తి తెలుగులో నేర్చుకుందాం!