تُحدد لغة HTML هيكلية صفحة الويب، مما يتيح للمتصفح تحويل النصوص إلى مستند يضم عناوين وفقرات وروابط وقوائم وعناصر أخرى. عند تحميل الصفحة، يقرأ المتصفح كود HTML من الأعلى إلى الأسفل، ويبني شجرة داخلية للعناصر، ثم يُحوّل تلك الهيكلية إلى محتوى مرئي وتفاعلي. عادةً ما يتم تحديد المظهر والتنسيق باستخدام CSS، وتُضاف التفاعلية عبر JavaScript، إلا أن HTML تظل الأساس الذي ترتكز عليه هذه العناصر جميعاً.
وللحفاظ على وضوح هذا التمييز، ابدأ بمقارنة ما يعرضه المتصفح فعلياً مع كود الترميز (markup) الذي أنتجه.
يمكن التعبير عن الصفحة المرئية نفسها باستخدام وسوم (tags) مختلفة، إلا أن لكل وسمٍ معنىً محدداً. تظهر الفقرة النصية لأن كود HTML يحتوي على عنصر p، ويكون الرابط قابلاً للنقر لأن عنصر a يخبر المتصفح بوجود وجهة للانتقال إليها. وإذا قمت بتغيير تنسيقات CSS فقط، فسيظل المحتوى كما هو رغم اختلاف المظهر؛ لأن HTML هي التي تحدد ماهية المحتوى.
تُبنى لغة HTML من عناصر (elements)، وهي تلك المكونات المسماة -مثل p وa- التي يفهمها المتصفح. تُكتب معظم العناصر باستخدام وسم بداية (مثل <p>) ووسم نهاية (مثل </p>)، مع وجود محتوى بينهما. وهناك بعض العناصر التي تُعرف بـ العناصر الفارغة (empty elements) ولا تحيط بأي محتوى، مثل عنصر img الذي يمثل صورةً عبر الإشارة إلى ملف معين.
يمكن أن تتضمن العناصر سمات (attributes) تضيف معلومات إضافية للعنصر، وتُكتب هذه السمات داخل وسم البداية. تمتلك السمة قيمة (value) -مثل href="https://example.com"- ويستخدم المتصفح هذه القيمة لتحديد السلوك، مثل الوجهة التي ينتقل إليها الرابط. كما يمكن تداخل العناصر (nesting)، أي وضع عنصر داخل عنصر آخر، وتؤثر علاقة “الأب والابن” هذه على البنية والمعنى.
قاعدة التداخل إذا نسيت كتابة وسم النهاية أو تداخلت الوسوم بشكل خاطئ، فسيحاول المتصفح تخمين قصدك، وقد تختلف النتيجة النهائية المعروضة بطرق غير متوقعة.
تبدأ صفحة HTML الكاملة بالوسم <!doctype html>، الذي يوجه المتصفح لاستخدام وضع المعايير الحديثة. يحيط عنصر html الخارجي بالمستند بأكمله، بينما يحتوي عنصر head على البيانات الوصفية (metadata) التي يستخدمها المتصفح، ويحتوي عنصر body على المحتوى الذي يعرضه المتصفح في الصفحة. يقع عنصر title داخل head ويتحكم في النص الظاهر في علامة تبويب المتصفح، وليس في محتوى الصفحة المرئي.