HTML Code for Page Creation – Step-by-Step Guide for Beginners

HTML की मदद से हम किसी भी website page का basic structure बना सकते हैं। अगर आप HTML सीखना शुरू कर रहे हैं, तो सबसे पहले यह समझना जरूरी है कि एक सामान्य website page किन-किन sections से मिलकर बनता है और हर section के लिए कौन-सा HTML code इस्तेमाल किया जाता है।

इस guide में हम एक simple website page को step by step बनाएंगे। पहले HTML document का basic structure समझेंगे, फिर Header, Navigation Menu, Main Content, Sections, Sidebar, Footer और दूसरे जरूरी parts बनाएंगे। सबसे अंत में आपको Complete HTML Code मिलेगा, जिसे आप सीधे copy करके index.html file में paste करके browser में चला सकते हैं।

1. HTML Document का Basic Structure

हर HTML page की शुरुआत एक basic structure से होती है।

			
<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
</body>
</html>

		

इस structure को HTML page की foundation समझ सकते हैं।

`<!DOCTYPE html>`

यह browser को बताता है कि document HTML5 में लिखा गया है।

`<html>`

यह पूरे HTML document का root element है।

`<head>`

इसमें page की important information रहती है, जैसे title, meta information और CSS आदि।

`<title>`

यह browser tab में दिखाई देने वाला page title निर्धारित करता है।

`<body>`

Website पर दिखाई देने वाला मुख्य content <body> के अंदर लिखा जाता है।

2. Website Header बनाना

Website का सबसे ऊपर वाला हिस्सा सामान्यतः Header कहलाता है।

इसमें website का name, logo या introductory information रखी जा सकती है।

			
<header>
    <h1>My Website</h1>
    <p>Welcome to my website</p>
</header>

यहाँ <header> semantic HTML element है, जिसका उपयोग page या किसी section के introductory content के लिए किया जाता है।

3. Navigation Menu बनाना

Header के नीचे हम navigation menu बना सकते हैं।

Navigation visitors को website के अलग-अलग pages तक जाने में मदद करता है।

			
<nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="services.html">Services</a>
    <a href="contact.html">Contact</a>
</nav>

		

यहाँ <nav> navigation links के लिए इस्तेमाल किया जाता है।

<a> को anchor tag कहा जाता है और इसका उपयोग links बनाने के लिए किया जाता है।

4. Main Content Area बनाना

Website page का सबसे important हिस्सा Main Content होता है।

इसके लिए हम <main> element का उपयोग कर सकते हैं।

			
<main>
    <h2>Welcome to My Website</h2>
    <p>
        This is the main content of my website page.
    </p>
</main>

		

एक HTML page में <main> के अंदर page का primary content रखा जाता है।

5. Introduction Section बनाना

Main content के अंदर हम अलग-अलग sections बना सकते हैं।

सबसे पहले एक introduction section बनाते हैं।

			
<section>
    <h2>Introduction</h2>
    <p>
        HTML is used to create the structure of web pages.
        It is one of the first technologies beginners learn
        when starting web development.
    </p>
</section>

		

यहाँ <section> का उपयोग content के एक logical section को define करने के लिए किया गया है।

6. About Section बनाना

अब हम एक About section बना सकते हैं।

			
<section>
    <h2>About Us</h2>
    <p>
        We provide simple educational content for students
        who want to learn HTML and web development.
    </p>
</section>

		

एक webpage में जरूरत के अनुसार कई <section> elements हो सकते हैं।

7. List Section बनाना

अगर हमें किसी topic की list दिखानी हो, तो HTML में <ul> और <li> का उपयोग कर सकते हैं।

			
<section>
    <h2>What You Can Learn</h2>
    <ul>
        <li>HTML Basics</li>
        <li>HTML Headings</li>
        <li>HTML Paragraphs</li>
        <li>HTML Links</li>
        <li>HTML Images</li>
    </ul>
</section>

		

<ul> unordered list बनाता है और <li> list item को represent करता है।

8. Article Section बनाना

अगर webpage पर कोई article या educational content है, तो <article> element उपयोगी होता है।

			
<article>
    <h2>What is HTML?</h2>
    <p>
        HTML stands for HyperText Markup Language.
        It is used to create the structure of web pages.
    </p>
</article>

		

<article> ऐसे content के लिए इस्तेमाल किया जा सकता है जो अपने आप में एक independent piece of content हो।

उदाहरण के लिए:

Blog post
News article
Educational article
Tutorial
Review

9. Sidebar बनाना

Website में कभी-कभी मुख्य content के साथ एक sidebar भी होता है।

Sidebar में related links, categories या additional information रखी जा सकती है।

			
<aside>
    <h2>Related Topics</h2>
    <ul>
        <li><a href="#">HTML Basics</a></li>
        <li><a href="#">HTML Tags</a></li>
        <li><a href="#">HTML Forms</a></li>
    </ul>
</aside>

		

<aside> ऐसे content के लिए उपयोग किया जाता है जो main content से related लेकिन secondary हो।

10. Image जोड़ना

Website page को attractive बनाने के लिए image भी add की जा सकती है।

<img src="html.jpg" alt="HTML Learning">

यहाँ:

src image का path या location बताता है।

alt image का alternative text बताता है।

अगर image आपके HTML file के same folder में है, तो आप उसका filename दे सकते हैं।

<img src="html.jpg" alt="Learning HTML">

11. Button बनाना

HTML में simple button बनाने के लिए <button> element का उपयोग किया जाता है।

<button>Learn More</button>

यह एक basic button बनाएगा।

Button को आगे JavaScript के साथ interactive बनाया जा सकता है।

12. Contact Section बनाना

Website page के अंत में contact information दी जा सकती है।

			
<section>
    <h2>Contact Us</h2>
    <p>Email: example@example.com</p>
    <p>Phone: +91 9876543210</p>
</section>

		

यह एक simple contact section है।

13. Footer बनाना

Website का सबसे नीचे वाला हिस्सा सामान्यतः Footer कहलाता है।

Footer में copyright information, important links या अन्य information रखी जा सकती है।

			
<footer>
    <p>&copy; 2026 My Website. All Rights Reserved.</p>
</footer>

14. पूरे Page का Structure समझें

अब तक हमने page के अलग-अलग parts बनाए हैं।

एक simple website page का structure इस प्रकार हो सकता है:

			
HTML Document
│
├── Head
│   └── Title
│
└── Body
    │
    ├── Header
    │
    ├── Navigation
    │
    ├── Main
    │   ├── Introduction
    │   ├── About
    │   ├── Article
    │   └── Contact
    │
    ├── Sidebar
    │
    └── Footer

		

इस structure को समझना HTML page creation सीखने के लिए बहुत useful है।

15. Sections को एक साथ जोड़ना

अब हम अलग-अलग sections को एक single HTML document में जोड़ सकते हैं।

			
<body>
    <header>
        <h1>My Website</h1>
        <p>Learn HTML Step by Step</p>
    </header>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
    </nav>
    <main>
        <section>
            <h2>Introduction</h2>
            <p>
                Welcome to my website. This page is created
                using basic HTML elements.
            </p>
        </section>
        <section>
            <h2>About HTML</h2>
            <p>
                HTML is used to create the basic structure
                of a web page.
            </p>
        </section>
        <article>
            <h2>Why Learn HTML?</h2>
            <p>
                HTML is a fundamental technology for web development.
                Beginners can learn its basic concepts easily.
            </p>
        </article>
        <section>
            <h2>Topics</h2>
            <ul>
                <li>HTML Tags</li>
                <li>HTML Headings</li>
                <li>HTML Paragraphs</li>
                <li>HTML Links</li>
                <li>HTML Images</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2026 My Website. All Rights Reserved.</p>
    </footer>
</body>

		

अब हमारे पास एक basic लेकिन properly structured HTML page है।

16. HTML Code को File में कैसे Save करें?

इस code को run करने के लिए आप किसी simple text editor जैसे Notepad का उपयोग कर सकते हैं।

सबसे पहले Notepad खोलें।

फिर नीचे दिया गया complete code paste करें।

इसके बाद file को इस नाम से save करें:

index.html

Save करते समय ध्यान रखें कि file का extension .html होना चाहिए।

अब index.html पर double-click करें।

यह file आपके web browser में open हो जाएगी और आपका webpage दिखाई देगा।

17. HTML Page को Better बनाने के लिए CSS

HTML मुख्य रूप से webpage का structure बनाता है। Page को attractive बनाने के लिए CSS का उपयोग किया जाता है।

उदाहरण के लिए:

			
<style>
    body {
        font-family: Arial, sans-serif;
    }
    header {
        text-align: center;
    }
    nav {
        text-align: center;
    }
</style>

		

CSS की मदद से हम:

Text color बदल सकते हैं
Background बदल सकते हैं
Font बदल सकते हैं
Spacing दे सकते हैं
Borders लगा सकते हैं
Layout बना सकते हैं
Page को responsive बना सकते हैं

इसलिए Web Development सीखते समय HTML के बाद CSS सीखना एक natural next step है।

Final Complete HTML Code – Ready to Paste

नीचे पूरा HTML code दिया गया है। इसे आप सीधे copy करके index.html file में paste कर सकते हैं।

			
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
</head>
<body>
    <!-- Header -->
    <header>
        <h1>My First Website</h1>
        <p>Learn HTML Step by Step</p>
    </header>
    <!-- Navigation Menu -->
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Blog</a>
        <a href="#">Contact</a>
    </nav>
    <!-- Main Content -->
    <main>
        <!-- Introduction Section -->
        <section>
            <h2>Introduction</h2>
            <p>
                Welcome to my first website.
                This webpage is created using HTML.
            </p>
            <p>
                HTML helps us create the basic structure
                of a web page.
            </p>
        </section>
        <!-- About Section -->
        <section>
            <h2>About HTML</h2>
            <p>
                HTML stands for HyperText Markup Language.
                It is used to create the structure and
                content of web pages.
            </p>
        </section>
        <!-- Article Section -->
        <article>
            <h2>Why Learn HTML?</h2>
            <p>
                HTML is one of the first technologies
                beginners learn when starting web development.
            </p>
            <p>
                By learning HTML, you can create headings,
                paragraphs, links, images, lists, tables,
                forms and many other elements.
            </p>
        </article>
        <!-- Topics Section -->
        <section>
            <h2>HTML Topics</h2>
            <ul>
                <li>HTML Document Structure</li>
                <li>HTML Headings</li>
                <li>HTML Paragraphs</li>
                <li>HTML Links</li>
                <li>HTML Images</li>
                <li>HTML Lists</li>
                <li>HTML Tables</li>
                <li>HTML Forms</li>
            </ul>
        </section>
        <!-- Contact Section -->
        <section>
            <h2>Contact Us</h2>
            <p>
                Email: example@example.com
            </p>
            <p>
                Phone: +91 9876543210
            </p>
        </section>
    </main>
    <!-- Footer -->
    <footer>
        <p>
            &copy; 2026 My First Website. All Rights Reserved.
        </p>
    </footer>
</body>
</html>

		

What You Have Learned

इस tutorial में आपने एक basic HTML website page को step by step create करना सीखा।

आपने सीखा:

HTML document का basic structure
<head> और <body>
<title>
<header>
<nav>
<main>
<section>
<article>
<aside>
Headings और paragraphs
Lists
Links
Contact section
Footer
Complete HTML page को index.html के रूप में save करना

अब आपका अगला step HTML Tags, Attributes, Links, Images, Tables और Forms को detail में सीखना हो सकता है। जब HTML structure अच्छी तरह समझ में आ जाए, तब CSS सीखकर इसी page को professional और responsive design में बदला जा सकता है।