HTML స్ట్రక్చర్ పరిచయం: ప్రాథమిక అంశాలు మరియు సింటాక్స్

వెబ్ పేజీలను రూపొందించడంలో HTML నిర్మాణం కీలక పాత్ర పోషిస్తుంది. వెబ్‌పేజీలో కంటెంట్ ఎలా నిర్వహించబడుతుందో మరియు ప్రదర్శించబడుతుందో ఇది నిర్వచిస్తుంది. ఇక్కడ ప్రాథమిక HTML ఆకృతికి పరిచయం ఉంది:

1. `Doctype`

డాక్టైప్(డాక్యుమెంట్ టైప్ డిక్లరేషన్) వెబ్‌పేజీ ఉపయోగిస్తున్న HTML వెర్షన్‌ను నిర్వచిస్తుంది. ఇది HTML ఫైల్ ప్రారంభంలో ఉంచాలి.

2. html ట్యాగ్

html ట్యాగ్ అనేది ప్రతి HTML ఫైల్ యొక్క మూల మూలకం. ఇది వెబ్‌పేజీ యొక్క మొత్తం కంటెంట్‌ను సంగ్రహిస్తుంది.

3. `head` ట్యాగ్

హెడ్ ట్యాగ్ బ్రౌజర్‌లో నేరుగా ప్రదర్శించబడని వెబ్‌పేజీ గురించి సమాచారాన్ని కలిగి ఉంటుంది. ఇక్కడే పేజీ యొక్క శీర్షిక, మెటా ట్యాగ్‌లు, CSS మరియు JavaScript ఫైల్‌లకు లింక్‌లు మరియు అనేక ఇతర అంశాలు నిర్వచించబడతాయి.

4. `body` ట్యాగ్

బాడీ ట్యాగ్ వెబ్‌పేజీలో ప్రదర్శించబడే మొత్తం కంటెంట్‌ను కలిగి ఉంటుంది. ఇక్కడే వచనం, చిత్రాలు, వీడియోలు, లింక్‌లు మరియు ఇతర వినియోగదారు ఇంటర్‌ఫేస్ భాగాలు వంటి అంశాలు నిర్వచించబడతాయి.

5. నెస్టెడ్ ట్యాగ్‌లు

HTML ఓపెనింగ్ మరియు క్లోజింగ్ ట్యాగ్‌లతో క్రమానుగత నిర్మాణాన్ని ఉపయోగిస్తుంది. పిల్లల ట్యాగ్‌లు పేరెంట్ ట్యాగ్‌ల లోపల ఉంచబడతాయి. ఉదాహరణకు, p ట్యాగ్(పేరాగ్రాఫ్) స్పాన్ ట్యాగ్‌లు(ఇన్‌లైన్ టెక్స్ట్), బలమైన ట్యాగ్‌లు(బోల్డ్ టెక్స్ట్) మరియు అనేక ఇతర ట్యాగ్‌లను కలిగి ఉండవచ్చు.

6. సాధారణ ట్యాగ్‌లు

HTML కంటెంట్‌ను ఫార్మాట్ చేయడానికి మరియు ప్రదర్శించడానికి ట్యాగ్‌ల శ్రేణిని అందిస్తుంది. ఉదాహరణకు, h1-h6 ట్యాగ్‌లు(హెడింగ్‌లు), p ట్యాగ్(పేరాగ్రాఫ్), img ట్యాగ్(చిత్రం), ట్యాగ్(లింక్) మరియు అనేక ఇతరాలు.

పూర్తి HTML పేజీ నిర్మాణం యొక్క ఉదాహరణ ఇక్కడ ఉంది:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My Webpage</title>  
    <link rel="stylesheet" href="styles.css">  
    <script src="script.js"></script>  
</head>  
<body>  
    <header>  
        <h1>Welcome to My Webpage</h1>  
        <nav>  
            <ul>  
                <li><a href="#">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Contact</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <section>  
            <h2>About Me</h2>  
            <p>I am a web developer passionate about creating amazing websites.</p>  
        </section>  
        <section>  
            <h2>My Projects</h2>  
            <ul>  
                <li><a href="#">Project 1</a></li>  
                <li><a href="#">Project 2</a></li>  
                <li><a href="#">Project 3</a></li>  
            </ul>  
        </section>  
    </main>  
    <footer>  
        <p>&copy; 2022 My Webpage. All rights reserved.</p>  
    </footer>  
</body>  
</html>

doctype పై ఉదాహరణలో, మేము, html ట్యాగ్, head ట్యాగ్ మరియు body ట్యాగ్ వంటి ప్రధాన అంశాలతో పూర్తి HTML పేజీని కలిగి ఉన్నాము. హెడ్ సెక్షన్‌లో, మేము ఉపయోగించాల్సిన పేజీ శీర్షిక, CSS మరియు JavaScript ఫైల్‌లను నిర్వచించాము. వెబ్‌పేజీ యొక్క కంటెంట్‌ను ప్రదర్శించడానికి శరీర విభాగం హెడర్, మెయిన్ మరియు ఫుటర్ వంటి అంశాలను కలిగి ఉంటుంది.

సరైన HTML నిర్మాణాన్ని ఉపయోగించడం ద్వారా, మీరు చక్కగా నిర్వహించబడిన, చదవగలిగే మరియు ఇంటరాక్టివ్ వెబ్ పేజీలను రూపొందించవచ్చు.

మునుపటి పోస్ట్

HTML మరియు బేసిక్ సింటాక్స్ పరిచయం: ఒక బిగినర్స్ గైడ్

తదుపరి పోస్ట్