HTML کسی ویب پیج کے ڈھانچے (structure) کی وضاحت کرتی ہے تاکہ براؤزر متن (text) کو ایسی دستاویز میں تبدیل کر سکے جس میں سرخیاں، پیراگراف، لنکس، فہرستیں اور دیگر اجزاء شامل ہوں۔ جب آپ کوئی صفحہ لوڈ کرتے ہیں، تو براؤزر HTML کو اوپر سے نیچے تک پڑھتا ہے، عناصر (elements) کا ایک اندرونی ‘ٹری’ (tree) یا ڈھانچہ تشکیل دیتا ہے، اور پھر اس ڈھانچے کو ایسی شکل میں پیش (render) کرتا ہے جسے آپ دیکھ سکیں اور جس کے ساتھ تعامل (interact) کر سکیں۔ اسٹائلنگ (ظاہری شکل و صورت) عام طور پر CSS سے آتی ہے اور انٹرایکٹیویٹی (تعامل کی صلاحیت) JavaScript سے، لیکن HTML وہ بنیادی ڈھانچہ ہے جس کے ساتھ یہ دونوں منسلک ہوتے ہیں۔
اس فرق کو واضح طور پر سمجھنے کے لیے، براؤزر کی جانب سے پیش کیے گئے منظر (rendered output) اور اسے تخلیق کرنے والے مارک اپ (markup) کا موازنہ کرنے سے شروعات کریں۔
ایک ہی نظر آنے والے صفحے کو مختلف ٹیگز (tags) کے ذریعے تشکیل دیا جا سکتا ہے، لیکن ہر ٹیگ کا ایک مخصوص مفہوم ہوتا ہے۔ کوئی پیراگراف اس لیے ظاہر ہوتا ہے کیونکہ HTML میں p عنصر (element) موجود ہوتا ہے، اور کوئی لنک اس لیے قابلِ کلک (clickable) ہوتا ہے کیونکہ a عنصر براؤزر کو بتاتا ہے کہ وہاں نیویگیشن کا کوئی ہدف (navigation target) موجود ہے۔ اگر آپ صرف CSS تبدیل کرتے ہیں تو مواد (content) وہی رہتا ہے حالانکہ اس کی ظاہری شکل بدل جاتی ہے، کیونکہ HTML ہی اس بات کا تعین کرتی ہے کہ مواد کیا ہے۔
HTML عناصر (elements) سے مل کر بنتی ہے؛ یہ p اور a جیسے نام والے وہ اجزاء ہیں جنہیں براؤزر سمجھتا ہے۔ زیادہ تر عناصر ایک ابتدائی ٹیگ (جیسے <p>) اور ایک اختتامی ٹیگ (جیسے </p>) کے ذریعے لکھے جاتے ہیں، جن کے درمیان مواد موجود ہوتا ہے۔ کچھ عناصر خالی عناصر (empty elements) ہوتے ہیں اور اپنے اندر کسی مواد کو نہیں رکھتے (یعنی مواد کو گھیرتے نہیں ہیں)؛ مثال کے طور پر img، جو کسی فائل کی نشاندہی کر کے تصویر کی نمائندگی کرتا ہے۔
ایلیمنٹس (elements) میں ایٹریبیوٹس (attributes) شامل ہو سکتے ہیں، جو ایلیمنٹ کے بارے میں اضافی معلومات فراہم کرتے ہیں اور انہیں ‘اسٹارٹ ٹیگ’ (start tag) کے اندر لکھا جاتا ہے۔ ہر ایٹریبیوٹ کی ایک ویلیو (value) ہوتی ہے، جیسے کہ href="https://example.com"؛ براؤزر اس ویلیو کو استعمال کرتے ہوئے ایلیمنٹ کے رویے کا تعین کرتا ہے، مثلاً یہ کہ کوئی لنک کہاں لے کر جائے گا۔ ایلیمنٹس کو نیسٹ (nest) بھی کیا جا سکتا ہے، یعنی ایک ایلیمنٹ دوسرے کے اندر موجود ہوتا ہے، اور یہ ‘پیرنٹ-چائلڈ’ (parent-child) تعلق ایلیمنٹ کی ساخت اور مفہوم پر اثر انداز ہوتا ہے۔
نیسٹنگ کا اصول اگر آپ ‘اینڈ ٹیگ’ (end tag) لگانا بھول جائیں یا ٹیگز کو آپس میں گڈ مڈ (overlap) کر دیں، تو براؤزر آپ کے ارادے کا اندازہ لگانے کی کوشش کرتا ہے، جس کے نتیجے میں صفحے کی ظاہری شکل یا ترتیب غیر متوقع طور پر تبدیل ہو سکتی ہے۔
ایک مکمل HTML صفحہ <!doctype html> سے شروع ہوتا ہے، جو براؤزر کو جدید معیارات (modern standards mode) کے مطابق کام کرنے کی ہدایت دیتا ہے۔ بیرونی html ایلیمنٹ پوری دستاویز کا احاطہ کرتا ہے، جبکہ head میں وہ میٹا ڈیٹا (metadata) ہوتا ہے جسے براؤزر استعمال کرتا ہے، اور body میں وہ مواد (content) ہوتا ہے جسے براؤزر صفحے پر ظاہر (render) کرتا ہے۔ title ایلیمنٹ head کے اندر موجود ہوتا ہے اور یہ براؤزر ٹیب کے متن (tab text) کو کنٹرول کرتا ہے، نہ کہ صفحے پر نظر آنے والے اصل مواد کو۔