HTML वेब पेज का स्ट्रक्चर बताता है ताकि ब्राउज़र टेक्स्ट को हेडिंग, पैराग्राफ, लिंक, लिस्ट और दूसरे हिस्सों वाले डॉक्यूमेंट में बदल सके। जब आप कोई पेज लोड करते हैं, तो ब्राउज़र HTML को ऊपर से नीचे तक पढ़ता है, एलिमेंट्स का एक इंटरनल ट्री बनाता है, और फिर उस स्ट्रक्चर को ऐसी चीज़ में बदलता है जिसे आप देख सकते हैं और जिसके साथ इंटरैक्ट कर सकते हैं। स्टाइलिंग आमतौर पर CSS से आती है और इंटरैक्टिविटी आमतौर पर JavaScript से, लेकिन HTML वह बेस है जिससे ये दोनों जुड़ते हैं।
इस अंतर को साफ़ तौर पर समझने के लिए, ब्राउज़र जो दिखाता है (रेंडर करता है) और जिस मार्कअप से वह बना है, उनकी तुलना करके शुरुआत करें।
एक ही दिखने वाले पेज को अलग-अलग टैग से बनाया जा सकता है, लेकिन हर टैग का एक खास मतलब होता है। पैराग्राफ इसलिए दिखता है क्योंकि HTML में p एलिमेंट होता है, और लिंक पर क्लिक इसलिए किया जा सकता है क्योंकि a एलिमेंट ब्राउज़र को बताता है कि कोई नेविगेशन टारगेट है। अगर आप सिर्फ़ CSS बदलते हैं, तो कंटेंट वही रहता है भले ही वह अलग दिखे, क्योंकि HTML ही तय करता है कि कंटेंट क्या है।
HTML एलिमेंट्स से बना होता है, जो p और a जैसे नाम वाले हिस्से होते हैं जिन्हें ब्राउज़र समझता है। ज़्यादातर एलिमेंट्स एक स्टार्ट टैग जैसे <p> और एक एंड टैग जैसे </p> का इस्तेमाल करके लिखे जाते हैं, और इनके बीच में कंटेंट होता है। कुछ एलिमेंट्स खाली एलिमेंट्स (empty elements) होते हैं और कंटेंट को रैप नहीं करते, जैसे img, जो किसी फ़ाइल की ओर इशारा करके इमेज दिखाता है।
एलिमेंट्स में एट्रिब्यूट्स हो सकते हैं, जो एलिमेंट के बारे में अतिरिक्त जानकारी देते हैं और इन्हें स्टार्ट टैग के अंदर लिखा जाता है। एट्रिब्यूट की एक वैल्यू होती है, जैसे href="https://example.com", और ब्राउज़र उस वैल्यू का इस्तेमाल करके यह तय करता है कि एलिमेंट कैसे काम करेगा, जैसे कि लिंक कहाँ ले जाएगा। एलिमेंट्स को नेस्ट भी किया जा सकता है, यानी एक एलिमेंट दूसरे के अंदर होता है, और यह ‘पैरेंट-चाइल्ड’ रिश्ता स्ट्रक्चर और मतलब पर असर डालता है।
नेस्टिंग का नियम अगर आप एंड टैग लगाना भूल जाते हैं या टैग्स को ओवरलैप कर देते हैं, तो ब्राउज़र आपके इरादे का अंदाज़ा लगाता है और जो नतीजा दिखता है, वह चौंकाने वाले तरीके से बदल सकता है।
एक पूरा HTML पेज <!doctype html> से शुरू होता है, जो ब्राउज़र को मॉडर्न स्टैंडर्ड्स मोड इस्तेमाल करने के लिए कहता है। बाहरी html एलिमेंट पूरे डॉक्यूमेंट को घेरे रहता है, जबकि head में मेटाडेटा होता है जिसका इस्तेमाल ब्राउज़र करता है और body में वह कंटेंट होता है जिसे ब्राउज़र पेज पर दिखाता है। title एलिमेंट head में होता है और यह टैब के टेक्स्ट को कंट्रोल करता है, न कि पेज पर दिखने वाले कंटेंट को।