• HTML5 డాక్యుమెంట్ అనాటమీ: ఒక ప్రామాణిక వెబ్ పేజీ యొక్క 4 మూల స్తంభాలు (DOCTYPE, html, head, body).
• DOCTYPE రహస్యం: Standards Mode vs Quirks Mode మధ్య తేడా ఏమిటి? బ్రౌజర్ ఎందుకు క్రాష్ కాకుండా రక్షిస్తుంది?
• రూట్ ఎలిమెంట్ & lang ఆట్రిబ్యూట్: <html lang="te"> స్క్రీన్ రీడర్స్ మరియు SEO కి ఎందుకు ప్రాణవాయువు లాంటిదో తెలుసుకోవడం.
• <head> విభాగం (The Invisible Brain): కంటికి కనిపించకుండా వెబ్‌సైట్‌ను నడిపించే మెటాడేటా శక్తులు.
• UTF-8 క్యారెక్టర్ ఎన్‌కోడింగ్: తెలుగు అక్షరాలు మరియు ఎమోజీలు విరిగిపోకుండా బ్రౌజర్‌లో సరిగ్గా రెండర్ కావడం వెనుక ఉన్న సైన్స్.
• Mobile Viewport Meta Tag: మొబైల్ స్క్రీన్‌లలో రెస్పాన్సివ్ వెబ్ డిజైన్ ఎలా సాధ్యమవుతుందో లైవ్ విశ్లేషణ.
• Title, Favicon & Social Meta Tags: బ్రౌజర్ ట్యాబ్‌లు, గూగుల్ సెర్చ్ మరియు వాట్సాప్ లింక్ ప్రివ్యూల కోసం కోడింగ్.

ఒక వెబ్ పేజీ నిర్మాణాన్ని మానవ శరీరంతో పోల్చవచ్చు. ప్రతి డాక్యుమెంట్‌లో ఖచ్చితమైన క్రమానుగత నిర్మాణం (Hierarchy) ఉంటుంది:

ఈ నాలుగింటిలో ఏ ఒక్కటి లోపించినా లేదా క్రమం మారినా డాక్యుమెంట్ స్టాండర్డ్స్ ఉల్లంఘనకు గురవుతుంది. ఇప్పుడు ఒక్కొక్క భాగాన్ని మైక్రోస్కోపిక్ లెవెల్లో పరిశీలిద్దాం.

HTML ఫైల్ లో మొట్టమొదటి లైన్ ఎల్లప్పుడూ <!DOCTYPE html> తోనే ప్రారంభం కావాలి. దీనికంటే ముందు ఎలాంటి స్పేస్ లేదా కామెంట్ కూడా ఉండకూడదు.

పాతకాలపు భయానక DOCTYPE vs ఆధునిక HTML5:

HTML 4.01 రోజుల్లో DOCTYPE రాయడం ఒక పెద్ద పీడకల. డెవలపర్లు ఇంత పెద్ద లైన్ గుర్తుపెట్టుకోవాల్సి వచ్చేది:

<!-- పాత కాలపు HTML 4.01 DOCTYPE (ఎంత సంక్లిష్టంగా ఉందో చూడండి) -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

కానీ ఆధునిక HTML5 లో WHATWG మరియు W3C లు దీనిని కేవలం 15 అక్షరాల సరళమైన ప్రకటనగా మార్చేశాయి:

<!-- ఆధునిక HTML5 DOCTYPE -->
<!DOCTYPE html>

బ్రౌజర్ లోని 2 మోడ్‌లు (Modes):

<html> అనేది వెబ్‌పేజీలోని సమస్త ఎలిమెంట్స్‌కు తల్లి లాంటి రూట్ ఎలిమెంట్ (Root Element). ఇందులో మనం ఉపయోగించే lang ఆట్రిబ్యూట్ చాలామంది అనుకున్నట్లు సాధారణమైనది కాదు. దీనికి 3 భారీ ప్రయోజనాలు ఉన్నాయి:

1. Accessibility (దృష్టి లోపం ఉన్నవారి కోసం): అంధులు కంప్యూటర్ వాడేటప్పుడు JAWS, NVDA లాంటి స్క్రీన్ రీడర్స్ సాఫ్ట్‌వేర్లను ఉపయోగిస్తారు. మీరు lang="te" అని ఇస్తే స్క్రీన్ రీడర్ తెలుగు ఉచ్చారణ (Telugu Phonetics engine) తో చదివి వినిపిస్తుంది. అదే మీరు పొరపాటున lang="en" అని ఉంచితే, తెలుగు మాటలను ఇంగ్లీష్ స్పెల్లింగ్ లాగా నత్తిగా, వికారంగా పలుకుతుంది!
2. Search Engine Optimization (SEO): గూగుల్ సెర్చ్ ఇంజన్లకు మీ కంటెంట్ ప్రధానంగా ఏ ప్రాంతీయ భాషా వినియోగదారులకు ఉపయోగపడుతుందో అర్థం కావడానికి ఇది సహాయపడుతుంది.
3. బ్రౌజర్ ఆటోమేటిక్ ట్రాన్స్‌లేషన్: గూగుల్ క్రోమ్ బ్రౌజర్ మీ పేజీని గుర్తించి ఇతర భాషల యూజర్లకు "ఈ పేజీని ఇంగ్లీష్‌లోకి అనువదించాలా?" అని అడిగే పాపప్ చూపించడానికి ఇది మూలాధారం.

తెలుగు భాష కోసం lang="te", ఇంగ్లీష్ కోసం lang="en", హిందీ కోసం lang="hi" వాడతారు.

<head> ట్యాగ్ లోపల రాసే సమాచారం వెబ్‌సైట్ బాడీ స్క్రీన్ మీద కంటికి నేరుగా కనిపించదు. కానీ పేజీ ఎలా పని చేయాలో, బ్రౌజర్ ఎలా ప్రవర్తించాలో నియంత్రించేది ఇదే:

కంప్యూటర్లకు కేవలం 0 మరియు 1 (బైనరీ నంబర్లు) మాత్రమే అర్థమవుతాయి. మనం టైప్ చేసే "అ", "ఆ", "A", "B" లను కంప్యూటర్ సంఖ్యలుగా మార్చుకోవాలి. దీనినే Character Encoding అంటారు.

గతంలో ఉపయోగించిన ASCII (అమెరికన్ స్టాండర్డ్ కోడ్) లో కేవలం 128 ఇంగ్లీష్ అక్షరాలు మాత్రమే ఉండేవి. ప్రపంచంలో ఉన్న వేలాది భాషలను, భారతీయ లిపులను చూపించలేకపోయింది. ఈ సమస్యకు పరిష్కారంగా ప్రపంచ నిపుణులు Unicode (UTF-8) ను కనిపెట్టారు.

UTF-8 ప్రపంచంలోని ప్రతి భాషను, గణిత గుర్తులను (∑, π), మరియు ఆధునిక ఎమోజీలను (🚀, 🔥, ❤️, 💡) పక్కాగా సపోర్ట్ చేస్తుంది. కాబట్టి <head> లో మొట్టమొదటి మెటా ట్యాగ్‌గా ఎల్లప్పుడూ <meta charset="UTF-8"> ఉండాలి!

నేడు ఇంటర్నెట్ ట్రాఫిక్‌లో 70% కంటే ఎక్కువ మంది స్మార్ట్‌ఫోన్ల ద్వారానే వెబ్‌సైట్లను సందర్శిస్తున్నారు. మీ వెబ్‌సైట్ మొబైల్‌లో అందంగా కనిపించడానికి క్రింది లైన్ అత్యంత కీలకమైనది:

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

ఈ ట్యాగ్‌లోని ప్రతి భాగాన్ని విడమరిచి అర్థం చేసుకుందాం:

• name="viewport": వినియోగదారుడు స్క్రీన్ మీద వెబ్‌పేజీని చూసే విండో (కనిపించే ప్రాంతం) ను వ్యూపోర్ట్ అంటారు.
• width=device-width: పేజీ యొక్క వెడల్పును మొబైల్ స్క్రీన్ యొక్క వాస్తవ వెడల్పుకు (Device Width: 390px, 412px etc.) సరిగ్గా సరిపోయేలా చేయమని బ్రౌజర్‌కి ఆదేశిస్తుంది.
• initial-scale=1.0: పేజీ మొదటిసారి లోడ్ అయినప్పుడు జూమ్ ఇన్ లేదా జూమ్ అవుట్ కాకుండా 100% అసలు స్కేల్ (1:1 నిష్పత్తి) లో ఓపెన్ చేయమని నిర్దేశిస్తుంది.

ఈ ట్యాగ్ ఉన్నప్పుడు మరియు లేనప్పుడు తేడా:

మీరు ఎప్పుడైనా WhatsApp లేదా LinkedIn లో YouTube లింక్ లేదా న్యూస్ ఆర్టికల్ లింక్ పేస్ట్ చేసినప్పుడు, వెంటనే ఆటోమేటిక్‌గా పెద్ద ఫోటో, టైటిల్ మరియు చిన్న సారాంశం (Rich Card Preview) రావడం గమనించారా? ఆ మాయ వెనుక ఉన్నది <head> లో ఉండే Open Graph (OG) మెటా ట్యాగ్స్:

<!-- Facebook, WhatsApp & LinkedIn Open Graph Tags -->
<meta property="og:title" content="HTML5 మాస్టర్‌క్లాస్ తెలుగులో | Our Compiler">
<meta property="og:description" content="సున్నా నుండి ప్రొఫెషనల్ వెబ్ డెవలపర్ స్థాయికి చేర్చే పూర్తి తెలుగు కోర్సు.">
<meta property="og:image" content="https://www.ourcompiler.com/images/html5-cover.png">
<meta property="og:url" content="https://www.ourcompiler.com/blog-html.html">

<!-- Twitter / X Card Tags -->
<meta name="twitter:card" content="summary_large_image">

మీరు వీటిని అమర్చితే, మీ వెబ్‌సైట్ లింక్‌ను ఎవరు సోషల్ మీడియాలో షేర్ చేసినా ప్రొఫెషనల్ యాప్ లాంటి రిచ్ ప్రివ్యూ కనిపిస్తుంది. దీనివల్ల వెబ్‌సైట్ క్లిక్స్ 3 రెట్లు పెరుగుతాయి!

పై అన్ని నియమాలను మేళవించి రూపొందించిన పూర్తి స్థాయి, ప్రొడక్షన్-రెడీ HTML5 డాక్యుమెంట్ టెంప్లేట్ ఇది. ప్రతి కొత్త ప్రాజెక్ట్‌ను మీరు ఈ స్ట్రక్చర్‌తోనే ప్రారంభించాలి:

<!DOCTYPE html>
<html lang="te">
  <head>
    <!-- 1. Character Encoding -->
    <meta charset="UTF-8" />

    <!-- 2. Mobile Responsive Viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 3. Page Title & Meta Description for SEO -->
    <title>నా మొదటి రెస్పాన్సివ్ వెబ్‌సైట్ | My Awesome Site</title>
    <meta name="description" content="తెలుగులో ఆధునిక HTML5 మరియు వెబ్ డెవలప్‌మెంట్ నేర్చుకోండి." />

    <!-- 4. Favicon Icon -->
    <link rel="icon" type="image/png" href="/logo.png" />

    <!-- 5. External Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- ఇక్కడ కనిపించే కంటెంట్ స్క్రీన్ మీద రెండర్ అవుతుంది -->
    <header>
      <h1>స్వాగతం! Welcome to My Website</h1>
      <p>ఈ వెబ్‌పేజీ సంపూర్ణమైన HTML5 స్టాండర్డ్స్‌తో నిర్మించబడింది.</p>
    </header>

    <main>
      <article>
        <h2>HTML5 Boilerplate ఎందుకు ముఖ్యం?</h2>
        <p>ఇది బ్రౌజర్‌కు సరైన భాషను, UTF-8 ఎన్‌కోడింగ్‌ను మరియు మొబైల్ వ్యూపోర్ట్‌ను నిర్దేశిస్తుంది.</p>
      </article>
    </main>

    <footer>
      <p>&copy; 2026 Our Compiler. All rights reserved.</p>
    </footer>
  </body>
</html>

ఈ కోడ్ స్క్రీన్ మీద ఎలా కనిపిస్తుంది? (Visual Preview):

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

❌ తప్పు 1: <head> లోపల దృశ్య కంటెంట్ (h1, p, img) రాయడం

<!-- తీవ్రమైన తప్పు: head లో h1 పెట్టారు -->
<head>
  <title>నా పేజీ</title>
  <h1>ఇది నా హెడ్డింగ్</h1>
</head>

నియమం: <head> లో కేవలం మెటాడేటా మాత్రమే ఉండాలి. స్క్రీన్ మీద కనిపించే హెడ్డింగ్స్, ఇమేజెస్ ఎల్లప్పుడూ <body> లోపల మాత్రమే ఉండాలి!

❌ తప్పు 2: Viewport Meta Tag మిస్ చేయడం

ఈ ట్యాగ్ లేకపోతే మొబైల్ ఫోన్లలో వెబ్‌సైట్ ఫాంట్ సైజు మైక్రోస్కోపిక్ చిన్నదిగా కుంచించుకుపోతుంది. Google Search Console లో "Mobile Usability" ఎర్రర్ వస్తుంది.

❌ తప్పు 3: ఒకే పేజీలో మల్టిపుల్ <body> లేదా <html> ట్యాగ్‌లు వాడటం

ఒక HTML డాక్యుమెంట్‌లో ఖచ్చితంగా ఒకే ఒక <html>, ఒకే ఒక <head>, మరియు ఒకే ఒక <body> ఉండాలి. రెండు శరీరాలు, రెండు తలలు మనుషులకు ఎలా ఉండవో, డాక్యుమెంట్‌కు కూడా అంతే!

❌ తప్పు 4: <title> ట్యాగ్ రాయకపోవడం

టైటిల్ లేకపోతే బ్రౌజర్ ట్యాబ్‌పై ఫైల్ పాత్ (ఉదా: file:///C:/Users/Balaji/index.html) కనిపిస్తుంది. ఇది యూజర్ అనుభవాన్ని మరియు సెర్చ్ ర్యాంకింగ్స్‌ను దెబ్బతీస్తుంది.

❌ తప్పు 5: UTF-8 స్పెల్లింగ్ లోపం

<meta charset="UTF8"> (హైఫన్ లేకుండా) లేదా charset="utf 8" (స్పేస్ తో) రాస్తే కొన్ని బ్రౌజర్లు ఎన్‌కోడింగ్‌ను గుర్తించలేవు. ఎల్లప్పుడూ ఖచ్చితంగా UTF-8 అని హైఫన్‌తో రాయాలి.

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

1. Standards Mode మరియు Quirks Mode ల మధ్య గల సాంకేతిక తేడా ఏమిటి? బ్రౌజర్ మోడ్‌ను ఏది నిర్ణయిస్తుంది?
2. <meta name="viewport" content="width=device-width, initial-scale=1.0"> లోని రెండు ప్రాపర్టీల (width మరియు initial-scale) విధి ఏమిటి?
3. <html lang="te"> ఎందుకు రాయాలి? స్క్రీన్ రీడర్స్ దృక్కోణంలో దీని ప్రాముఖ్యత ఏమిటి?
4. UTF-8 లేకపోతే తెలుగు అక్షరాలు ఎందుకు పాడవుతాయి? ఆ పరిస్థితిని ఏమని పిలుస్తారు?
5. <head> లో మరియు <body> లో ఉండే కంటెంట్ మధ్య ప్రాథమిక విభజన రేఖ ఏమిటి?

• <!DOCTYPE html>: మొదటి లైన్‌లో ఉండాలి; బ్రౌజర్‌ను ఆధునిక Standards Mode లో ఉంచుతుంది.
• <html lang="te">: రూట్ ఎలిమెంట్; స్క్రీన్ రీడర్స్ మరియు తెలుగు SEO కి మార్గదర్శకం.
• <head> vs <body>: Head అదృశ్య మెటాడేటా నిధి, Body కంటికి కనిపించే ప్రత్యక్ష కంటెంట్ నిలయం.
• <meta charset="UTF-8">: తెలుగు లిపి మరియు ఎమోజీలు విరిగిపోకుండా కాపాడే అంతర్జాతీయ ఎన్‌కోడింగ్.
• Mobile Viewport: width=device-width, initial-scale=1.0 ద్వారా స్మార్ట్‌ఫోన్లలో పిక్సెల్-పర్ఫెక్ట్ రెస్పాన్సివ్ డిజైన్ సాధ్యమవుతుంది.
• Title & Favicon: బ్రౌజర్ ట్యాబ్ బ్రాండింగ్ మరియు గూగుల్ సెర్చ్ స్నిప్పెట్లకు అత్యంత ప్రాధాన్యత కలిగినవి.