doctype और html, head, meta तथा body टैग के साथ एक पूरा वेब पेज तैयार करें।
इस पाठ को Kodokon में खोलेंअब तक, आपने HTML के टुकड़े लिखे हैं। परंतु एक वास्तविक वेब पेज हमेशा एक ही पूरी संरचना का पालन करता है, कुछ-कुछ वैसे ही जैसे एक औपचारिक पत्र में हमेशा एक शीर्ष भाग, एक मुख्य भाग और एक हस्ताक्षर होता है। सब कुछ <!DOCTYPE html> घोषणा से शुरू होता है, जो सबसे पहली पंक्ति पर लिखी जाती है: यह ब्राउज़र को बताती है कि दस्तावेज़ आधुनिक HTML का उपयोग करता है। यह कोई टैग नहीं है - यह एक सरल घोषणा है, और इसे कभी बंद नहीं किया जाता।
इसके बाद आता है <html> एलिमेंट, पेज की जड़: बाकी सब कुछ इसके अंदर जाता है। इसका lang="en" एट्रिब्यूट दस्तावेज़ की भाषा बताता है। इसमें ठीक दो संतान होती हैं। पहला <head>: पेज का पहचान पत्र, ऐसी जानकारी के साथ जो आगंतुक के लिए अदृश्य होती है। फिर <body>: सारी दृश्यमान सामग्री, यानी आपके शीर्षक, पैराग्राफ, सूचियाँ, लिंक, छवियाँ और तालिकाएँ।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first page</title>
</head>
<body>
<h1>Welcome to my page!</h1>
<p>It contains everything I have learned.</p>
</body>
</html>आइए <head> की सामग्री पर नज़र डालें। स्वयं-बंद होने वाला टैग <meta charset="UTF-8"> वर्ण एन्कोडिंग निर्दिष्ट करता है: यही सुनिश्चित करता है कि उच्चारण चिह्न वाले वर्ण (é, à, ç) सही ढंग से दिखें। <title> टैग पेज का शीर्षक निर्धारित करता है, जो ब्राउज़र टैब में और खोज परिणामों में दिखाया जाता है। एक दूसरा <meta> टैग, जिसे viewport टैग कहते हैं, अक्सर जोड़ा जाता है ताकि पेज फ़ोन स्क्रीन की चौड़ाई के अनुरूप ढल सके।
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>My first page</title>
</head>आप इसे अभी, बिना कुछ इंस्टॉल किए, आज़मा सकते हैं। एक सरल टेक्स्ट एडिटर खोलें (Windows पर Notepad, Mac पर सादे-पाठ मोड में TextEdit), पूरा ढाँचा कॉपी करें, फिर फ़ाइल को .html एक्सटेंशन के साथ सहेजें, उदाहरण के लिए index.html। फिर फ़ाइल पर डबल-क्लिक करें: यह आपके ब्राउज़र में खुलती है, और आपका पहला पेज दिखाई देता है।