لغة HTML: بناء الهيكل العظميّ لصفحتك الأولى

في مقال الطرفية أنشأت ملفًّا فارغًا اسمه index.html بأمرٍ واحد، وهذا المقال يملؤه. فكلّ صفحةٍ على الويب تبدأ بملفٍّ مثله، مكتوبٍ بلغة HTML، يقرؤه المتصفّح ليعرف ما في الصفحة: أين العنوان، وأين الفقرة، وأين الرابط، وأين الصورة، ثمّ يرسم الصفحة كما وصفتها.

ستعرف هنا ما HTML، وكيف يتركّب الوسم والعنصر والسمة، وكيف تصير الصفحة شجرةً في ذاكرة المتصفّح، ثمّ أهمّ الوسوم التي تحتاجها فعلًا في مشروعك الأوّل وفي كلّ مشروعٍ بعده. وستتعلّم أيضًا ما لا تشرحه أكثر الشروح العربيّة: كيف تخبر المتصفّح أنّ صفحتك عربيّةٌ تُقرأ من اليمين. وفي آخر المقال تكتب صفحتك الأولى كاملة، وتراها في المتصفّح.

ما هي HTML؟

تعرّف موسوعة MDN لغة HTML بأنّها «لغة توصيف» تخبر المتصفّح كيف يبني الصفحة التي تزورها.^[1] والتوصيف معناه أنّك تحيط المحتوى بعلاماتٍ تقول ما هو: هذا عنوان، وهذه فقرة، وهذا رابط. فالوسم h1 يقول للمتصفّح إنّ هذا أهمّ عنوانٍ في الصفحة، ولا يقول له أن يكبّره. أمّا الحجم واللون والخطّ فعمل لغة CSS، ولها مقالها التالي.

واسمها الكامل HyperText Markup Language. «النصّ التشعّبيّ» (HyperText) نصٌّ فيه روابط تنقلك من صفحةٍ إلى أخرى، وهي الفكرة التي جعلت الويب شبكة، وقد مرّت بك في مقال الروابط. و«التوصيف» (Markup) هو العلامات نفسها. و«اللغة» لأنّ لها مفرداتٍ هي الوسوم، وقواعد تحدّد كيف تُكتب وتُرتّب.

وأقرب تشبيهٍ في رأيي الهيكل العظميّ: HTML تثبّت كلّ جزءٍ من الصفحة في مكانه، ثمّ تكسوه CSS بالألوان والخطوط، وتمنحه JavaScript الحركة والتفاعل، كما يكسو الجلدُ العظام وتحرّكها العضلات. ويقف التشبيه عند حدّه، لأنّ الهيكل العظميّ ثابت، أمّا هيكل الصفحة فتستطيع JavaScript أن تضيف إليه وتحذف منه وهي تعمل.

الوسم والعنصر والسمة

ثلاث كلماتٍ يخلط بينها المبتدئ، وضبطها يريحك في كلّ ما يأتي. «الوسم» (tag) هو العلامة نفسها، مثل ‎<p>‎. و«العنصر» (element) هو الوحدة كاملة: وسم البداية، ثمّ المحتوى، ثمّ وسم النهاية. و«السمة» (attribute) معلومةٌ إضافيّة تكتبها داخل وسم البداية على صورة اسمٍ وقيمة، لتصف العنصر أو تغيّر سلوكه.^[1]

<p class="lead">مرحبًا بك</p>

في هذا السطر عنصر فقرةٍ واحد، وسم بدايته <p class="lead">، وفيه سمةٌ اسمها class وقيمتها lead، ومحتواه «مرحبًا بك»، ووسم نهايته ‎</p>‎، ولكلّ جزءٍ منها اسمٌ ستسمعه كثيرًا. والشكل التالي يفصّله إلى أجزائه.

شكل 1

وفكّر في الوسم اسمًا، وفي السمة صفةً تصفه. فالرابط وسمه a، وسمته href تحدّد وجهته، والصورة وسمها img، وسمتها src تحدّد مصدرها وسمتها alt تصفها لمن لا يراها.

وضع قيمة السمة دائمًا بين علامتي اقتباس. تذكر MDN مثالًا لرابطٍ كُتبت فيه قيمة السمة title بلا اقتباس وفيها مسافة، فأخذ المتصفّح الكلمة الأولى وحدها قيمةً للسمة، وعدّ الكلمتين التاليتين سمتين أخريين لا معنى لهما.^[1] وبعض السمات لا تحتاج قيمةً أصلًا، وتسمّيها MDN «السمات المنطقيّة» (Boolean attributes): حضورها في الوسم يعني «نعم» وغيابها يعني «لا»، فالسمة disabled وحدها في حقل input تمنع الكتابة فيه.^[1]

الصفحة شجرة

العناصر تتداخل: فقرةٌ داخل مقالة، داخل المحتوى الرئيس، داخل جسم الصفحة. ومن هذا التداخل تتكوّن شجرة يبنيها المتصفّح حين يقرأ ملفّك، واسمها «نموذج كائن المستند» (DOM)، وقد مرّ بك في مقال المتصفّح، وتستطيع أن تراه بنفسك في أدوات المطوّر. وعلى هذه الشجرة تعمل CSS حين تلوّن العناصر، وJavaScript حين تغيّرها.

شكل 2

ولهذا أغلق كلّ ما تفتحه، ورتّب التداخل. فإن فتحت عنصرًا داخل آخر وأغلقت الخارجيّ قبل الداخليّ، اضطرّ المتصفّح إلى تخمين الشجرة التي قصدتها، وقد يخمّن غير ما أردت، فتظهر صفحتك بشكلٍ لا تفهم سببه.

أنواع الوسوم

زوجيّة وفارغة

أكثر الوسوم زوجيّة: وسم بدايةٍ ووسم نهاية والمحتوى بينهما، مثل ‎<p>‎ و‎</p>‎. وبعضها فارغ، لا محتوى له ولا وسم نهاية، ويُدرج شيئًا بنفسه: img للصورة، وbr لكسر السطر، وhr لخطٍّ فاصل، وinput لحقل إدخال. فلا تكتب ‎</img>‎ أبدًا، فالمواصفة تنصّ على أنّ الوسوم الفارغة لا يُكتب لها وسم نهاية.^[2] وقد ترى الوسم الفارغ في شيفراتٍ كثيرة مكتوبًا بشرطةٍ مائلة قبل آخره، مثل <br />. والمواصفة تسمح بهذه الشرطة في الوسوم الفارغة، لكنّها لا تجعل لها فيها أيّ أثر.^[2]

كتليّة وسطريّة

هذا أهمّ تقسيمٍ للتخطيط. الوسوم الكتليّة، مثل العناوين والفقرات والقوائم وdiv، تبدأ سطرًا جديدًا دائمًا وتأخذ العرض المتاح كلّه، فتتراصّ فوق بعضها كالكتل. والوسوم السطريّة، مثل a وstrong وspan، تأخذ قدر محتواها فقط وتجري مع النصّ، فتضع رابطًا في منتصف فقرةٍ من دون أن تقطع سطرها. ويظهر الفرق أوضح ما يظهر حين تكتب فقرتين قصيرتين متتاليتين: تبدأ كلٌّ منهما سطرًا جديدًا، ولو اتّسع السطر لهما معًا. وهذا سلوكٌ افتراضيّ تغيّره CSS متى شئت، فتجعل الرابط كتلةً أو عناصر القائمة متجاورة، وستراه في مقالها.

دلاليّة وعامّة

الوسم «الدلاليّ» (semantic) يقول معنى ما فيه: header للترويسة، وnav للتنقّل، وmain للمحتوى الرئيس، وarticle لمحتوًى مستقلّ، وfooter للتذييل. والوسمان العامّان div وspan لا يقولان شيئًا، وتستعملهما لتجميع عناصر من أجل التصميم حين لا يوجد وسمٌ يصف المعنى. والقاعدة بسيطة: الوسم الدلاليّ أوّلًا، وdiv حين لا يناسب غيره، لأنّ الدلاليّ يفيد قارئ الشاشة ومحرّك البحث ومن يقرأ شيفرتك بعدك.

من أين جاءت HTML

بدأت القصّة في مختبر CERN في سويسرا. يقول المختبر إنّ الباحث البريطانيّ تيم بيرنرز-لي اخترع الويب سنة 1989، ليتبادل العلماء في الجامعات والمعاهد المعلومات بطريقةٍ آليّة. وكتب أوّل متصفّح سنة 1990، وكان أوّل موقعٍ في العالم يعمل على حاسوبه من نوع NeXT، وهو الجهاز الذي تراه في الصورة التالية.^[3][4]

وكانت HTML الأولى قصيرة. ففي وثيقة «HTML Tags» التي يحفظ W3C نسختها من تشرين الثاني 1992 قائمةٌ صغيرة من الوسوم، منها العنوان والرابط والفقرة والعناوين والقوائم، وهي نواة ما تستعمله اليوم.^[5] وفي 30 نيسان 1993 وضع CERN برمجيّات الويب في الملكيّة العامّة، فصار أيّ أحدٍ يستطيع أن يبني عليها.^[3]

ثمّ صدرت HTML 4.01 توصيةً من W3C في 24 كانون الأوّل 1999،^[6] ورسّخت فكرةً ما زالت أساس العمل: HTML للبنية، والمظهر كلّه لـ CSS، وعليها تُبنى هذه السلسلة. وقبلها كان المطوّرون يلوّنون النصوص ويوسّطونها بوسومٍ مثل font وcenter. وفي 28 تشرين الأوّل 2014 صارت HTML5 توصيةً رسميّة،^[7] وأضافت الوسوم الدلاليّة، وvideo وaudio للفيديو والصوت، وcanvas للرسم.

واليوم لا تحمل HTML رقم إصدار. ففي 28 أيّار 2019 اتّفق W3C ومجموعة WHATWG على التعاون في مواصفة HTML التي تصدرها WHATWG،^[8] وهي «معيارٌ حيّ» يتحدّث باستمرار. ومن أحدث ما أُضيف إليه وسم search، لقسم البحث والتصفية في الصفحة، ودُمج في 24 آذار 2023.^[9] فحين تسمع «HTML5» اليوم، فالمقصود غالبًا هذا المعيار الحيّ.

أهمّ الوسوم التي تحتاجها

هيكل المستند

كلّ صفحةٍ تبدأ بسطر ‎<!DOCTYPE html>‎، وهو إعلانٌ يخبر المتصفّح أنّ الصفحة HTML حديثة. ثمّ الوسم الجذر html الذي يحيط بكلّ شيء، وفيه قسمان: head لمعلوماتٍ لا يراها الزائر، وbody لكلّ ما يراه. وفي head أهمّ ثلاثة: title لعنوان التبويب، وmeta بسمة charset="UTF-8" التي تضمن ظهور العربيّة سليمة، وmeta للنافذة (viewport) التي يحتاجها التصميم على الهاتف.

وتضيف في head أيضًا وسم link الذي يربط الصفحة بملفّ الأنماط:

<link rel="stylesheet" href="style.css">

وللتعليقات مكانها في الشيفرة: تفتح التعليق بالعلامة <!--، وتختمه بشرطتين ثمّ علامة «أكبر من»، فيتجاهل المتصفّح ما بينهما ولا يعرضه، وتشرح به لنفسك أو لغيرك جزءًا معقّدًا.^[1]

أقسام الصفحة

وسوم التخطيط الدلاليّ: header للجزء العلويّ، وnav لروابط التنقّل الرئيسة، وmain للمحتوى الرئيس، وهو واحدٌ فقط في الصفحة. ومعها section لقسمٍ موضوعيّ، وarticle لمحتوًى يستقلّ بنفسه كمقالةٍ أو بطاقة منتج، وaside لمحتوًى جانبيّ، وfooter للتذييل. ومعها الوسم search الحديث لمربّع البحث.^[9]

المحتوى

العناوين من h1 إلى h6 بتدرّجٍ هرميّ، وh1 للعنوان الرئيس. وp للفقرات، وa للروابط، وimg للصور، وul وol وli للقوائم المنقّطة والمرقّمة. وانتبه إلى فرقين: strong وb كلاهما يُظهر النصّ غليظًا، لكنّ strong يقول إنّ النصّ مهمّ، وb للمظهر وحده، وكذلك em للتأكيد وi للإمالة.

النماذج

بالنماذج تجمع البيانات من الزائر. form يحيط بالحقول، وlabel يربط نصًّا بحقلٍ فيعرف الزائر ماذا يكتب، وinput حقلٌ يتغيّر بسمة type: text للنصّ، وemail للبريد، وpassword لإخفاء ما يُكتب، وcheckbox وradio للاختيار، وsubmit لزرّ الإرسال. ومعها textarea لنصٍّ طويل، وselect مع option لقائمةٍ منسدلة.

وتذكّر أنّ HTML تبني النموذج الذي يراه الزائر فقط. أمّا استقبال البيانات ومعالجتها وحفظها فيحتاج برنامجًا على الخادم، وهذا موضوعٌ آخر يأتي بعد أن تتقن الواجهة.

الجداول والوسائط والمحارف الخاصّة

للبيانات الجدوليّة وسم table، وفيه tr لكلّ صفّ، وth لخليّة العنوان، وtd لخليّة البيانات. والجدول للبيانات وحدها، لا لتقسيم الصفحة إلى أعمدة، فتلك مهمّة CSS. وللفيديو والصوت وسما video وaudio، يعملان من دون إضافاتٍ خارجيّة، ولتضمين صفحةٍ أخرى أو فيديو داخل صفحتك وسم iframe.

وقد تحتاج أن تكتب في صفحتك علامة «أصغر من» نفسها، وهي التي تبدأ بها الوسوم. ولهذا في HTML «مراجع محارف»: تكتب ‎&lt;‎ فتظهر العلامة <، وتكتب ‎&amp;‎ فتظهر &.^[1] وبها تعرض شيفرةً في صفحةٍ من دون أن يفسّرها المتصفّح وسومًا.

السمتان id وclass: الجسر إلى CSS وJavaScript

أهمّ سمتين عامّتين id وclass. تعطي id العنصرَ اسمًا فريدًا لا يتكرّر في الصفحة، وتعطيه class صنفًا يتشاركه عناصر كثيرة. وبهما تصل CSS وJavaScript إلى العناصر. فابدأ بالهيكل:

<article id="product-card-1" class="product-card">
  <h2 class="product-title">قهوة عربيّة</h2>
  <p class="product-description">بنٌّ محمّص بالهيل.</p>
  <button class="btn">أضف إلى السلّة</button>
</article>

ثمّ تقرأ CSS هذه الأسماء، فتستهدف الصنف بنقطةٍ قبل اسمه، وتطبّق النمط نفسه على كلّ عنصرٍ يحمله:

.product-card {
  border: 1px solid #ddd;
  padding: 16px;
}
.btn {
  background-color: green;
  color: white;
}

وتستعمل JavaScript الأسماء نفسها لتضيف السلوك، فتصل إلى البطاقة بمعرّفها، وإلى الزرّ بصنفه، ثمّ تغيّر نصّه حين ينقره الزائر:

const card = document.getElementById('product-card-1');
const button = card.querySelector('.btn');
button.addEventListener('click', () => {
  button.textContent = 'أُضيفت إلى السلّة';
});

فهكذا يتوزّع العمل بين اللغات الثلاث: HTML للبنية والمعنى، وCSS للمظهر، وJavaScript للسلوك، والسمتان id وclass صلة الوصل بينها. وستعود إلى هذا المثال في مقال JavaScript.

صفحةٌ عربيّة: lang وdir

هنا ما تغفله أكثر الشروح العربيّة. المتصفّح لا يعرف أنّ صفحتك عربيّة إلّا إن أخبرته، ويخبره سطرٌ واحد في أوّل الصفحة. فيوصي W3C بأن تضع السمة lang على وسم html لتعلن لغة الصفحة،^[10] وأن تضيف إليه dir="rtl" حين يكون اتّجاه الصفحة كلّها من اليمين إلى اليسار، وذلك في أوّل الصفحة:^[11]

<html lang="ar" dir="rtl">

ولنرَ الفرق. في اللقطة التالية الصفحة نفسها مرّتين في المتصفّح، والفرق الوحيد بينهما هذه السمة.

وتكفيك السمة على وسم html في أكثر الصفحات، لأنّ الاتّجاه ينزل منه إلى كلّ العناصر. وتحتاج شيئًا إضافيًّا حين تُدرج في صفحتك نصًّا لا تعرف اتّجاهه مسبقًا، كاسمٍ يكتبه الزائر وقد يكون عربيًّا أو إنجليزيًّا. فتحيطه بوسم bdi، أو تضيف dir="auto" إلى العنصر الذي يحيط به، فيعزله المتصفّح عمّا حوله ويختار اتّجاهه من أوّل حرفٍ فيه.^[12]

اكتب لكلّ قارئ

تقول منظّمة الصحّة العالميّة في صحيفة حقائقها المحدّثة في شباط 2026 إنّ 2.2 مليار إنسانٍ على الأقلّ حول العالم لديهم ضعفٌ في النظر القريب أو البعيد.^[13] وبعض من يزور صفحتك يكبّرها، وبعضهم يسمعها من «قارئ شاشة» ينطق محتواها. وHTML المكتوبة جيّدًا هي أكثر ما يعين هؤلاء، وتقول MDN إنّ بنية النصّ الواضحة بالعناوين والفقرات والقوائم من أهمّ ما يحتاجه مستخدم قارئ الشاشة، قبل أيّ أداةٍ خاصّة.^[14]

وأربع عاداتٍ تكفيك في البداية. الأولى الوسوم الدلاليّة، فقارئ الشاشة يعلن nav قائمة تنقّل ويقفز إلى main مباشرةً. والثانية النصّ البديل alt لكلّ صورةٍ تحمل معنى، واتركه فارغًا للصور الزخرفيّة. والثالثة label لكلّ حقل. والرابعة عناوين مرتّبة من h1 إلى h6 من دون قفز، لأنّها المخطّط الذي يتنقّل به قارئ الشاشة في صفحتك.

وبعض الزوّار لا يستعملون الفأرة أصلًا. وتقول MDN إنّ المتصفّحات تتيح عناصر التحكّم الأصليّة، كالأزرار والروابط وحقول النماذج، للوحة المفاتيح من دون أيّ إعداد: يضغط الزائر Tab فينتقل التركيز بينها، ويظهر العنصر المركَّز مميّزًا.^[14] فاستعمل button للزرّ وa للرابط، ولا تصنع زرًّا من div تلوّنه، لأنّ div لا يصله التركيز أصلًا من دون شيفرةٍ إضافيّة.

وهذا الترتيب نفسه يفيد محرّك البحث، لأنّ البنية التي تعين قارئ الشاشة تعين الزاحف على فهم صفحتك. وإضافة Full SEO Page Analyzer التي بنيتها تعرض العناوين كلّها بمستوياتها، وتنبّه إلى أيّ مستوىً مقفوز.

عاداتٌ تكتب بها HTML نظيفة

• أغلق كلّ وسمٍ زوجيّ تفتحه. وفي VS Code فعّل الإعداد editor.linkedEditing، فيغيّر الوسم الختاميّ كلّما غيّرت الافتتاحيّ.^[15]
• ضع h1 واحدًا في الصفحة، ورتّب العناوين بعده من دون أن تقفز من h2 إلى h4.
• اختر الوسم الدلاليّ كلّما وُجد وسمٌ يصف المعنى، واترك div لما لا وصف له.
• أزح العناصر المتداخلة بمسافةٍ بادئة. فالمتصفّح يتجاهل هذه المسافات، لكنّها تجعل الشجرة ظاهرةً لك ولمن يقرأ شيفرتك.
• افحص صفحتك بمدقّق W3C الرسميّ في validator.w3.org، فيكشف لك الوسوم الناقصة والتداخل الخاطئ قبل أن يتراكما.^[16]

والمسافات داخل المحتوى لا تظهر كما تكتبها. فتقول MDN إنّ المتصفّح يختصر كلّ سلسلةٍ من المسافات والأسطر الفارغة إلى مسافةٍ واحدة في أكثر العناصر، ويستثني عناصر مثل pre.^[1] فالإزاحة التي تكتبها لترتيب الشيفرة لا تغيّر شكل الصفحة، ولن تصنع بها فراغًا واسعًا بين كلمتين، لأنّ الفراغ في الصفحة مهمّة CSS.

مشروعٌ عمليّ: صفحتك الأولى

لنجمع ما سبق في صفحةٍ واحدة: هيكل مدوّنةٍ بسيط، تصمّمه في مقال CSS وتضيف إليه التفاعل في مقال JavaScript. افتح في VS Code مجلّد مشروعك، وافتح ملفّ index.html الذي أنشأته في الطرفية، والصق فيه هذه الشيفرة:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مدوّنتي التقنيّة</title>
</head>
<body>
  <header>
    <h1>مدوّنتي التقنيّة</h1>
    <nav>
      <ul>
        <li><a href="#">الرئيسة</a></li>
        <li><a href="#">عن المدوّنة</a></li>
        <li><a href="#">تواصل معي</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>ما لغة HTML؟</h2>
      <p>لغة توصيف النصّ التشعّبيّ هي اللغة التي تُبنى بها صفحات الويب.</p>
      <p>تتكوّن من وسومٍ تصف أجزاء المحتوى ليعرضها المتصفّح.</p>
      <h3>أهمّ المفاهيم</h3>
      <ul>
        <li>الوسوم</li>
        <li>السمات</li>
        <li>العناصر</li>
      </ul>
    </article>
  </main>
  <footer>
    <p>جميع الحقوق محفوظة، 2026، مدوّنتي التقنيّة.</p>
  </footer>
</body>
</html>

ثمّ انقر الملفّ بالزرّ الأيمن في المستكشف واختر Open in Integrated Browser لتراه داخل المحرّر، كما في مقال VS Code،^[15] أو افتحه في متصفّحك مباشرةً. وستبدو الصفحة بسيطةً بلا تصميم، وهذا ما تريده الآن تمامًا.

فقد بنيت هيكلًا دلاليًّا كاملًا: header وnav في الأعلى، ثمّ main وفيه article، ثمّ footer، وكلّها من اليمين لأنّ السطر الثاني يعلن أنّ الصفحة عربيّة، تمامًا كما صمّمتها. وقارن ما تراه بشجرة الصفحة في أوّل المقال، فهي نفسها.

خلاصة عمليّة

ابدأ كلّ صفحةٍ بسطر DOCTYPE ثمّ <html lang="ar" dir="rtl"> إن كانت عربيّة، وضع في head الترميز UTF-8 وmeta النافذة والعنوان. استعمل الوسم الدلاليّ قبل div، وأغلق كلّ ما تفتحه بترتيبٍ صحيح، واكتب alt لكلّ صورةٍ ذات معنى وlabel لكلّ حقل، ورتّب العناوين من h1 بلا قفز. ثمّ افحص الصفحة في مدقّق W3C.

وصفحتك الآن هيكلٌ متين، لكنّه بلا ألوانٍ ولا خطوطٍ ولا تخطيط. والخطوة التالية أن تكسوه، بالملفّ نفسه الذي كتبته للتوّ، في مقال CSS.

المصادر

1. موسوعة MDN، «Basic HTML syntax»: HTML لغة توصيفٍ تخبر المتصفّح كيف يبني الصفحة، وتشريح العنصر والسمة، والتعليقات، ومراجع المحارف الخاصّة مثل &lt; و&amp;.
2. مجموعة WHATWG، «HTML Living Standard: The HTML syntax, Elements»: الوسوم الفارغة لها وسم بدايةٍ فقط، ولا يُكتب لها وسم نهاية، ويجوز أن تسبق نهايتها شرطةٌ مائلة واحدة.
3. مختبر CERN، «The birth of the Web»: اخترع تيم بيرنرز-لي الويب سنة 1989، وكُتب أوّل متصفّح سنة 1990، واستضاف حاسوب NeXT أوّل موقع، ووضع CERN برمجيّات الويب في الملكيّة العامّة في 30 نيسان 1993.
4. صورة «First Web Server» للمستخدم Coolcaesar، 2005، برخصة CC BY-SA 3.0، وشعار HTML5 على غلاف المقال من W3C برخصة CC BY 3.0.
5. اتّحاد W3C (أرشيف تاريخيّ)، «HTML Tags»، نسخة 3 تشرين الثاني 1992: قائمة الوسوم الأولى، ومنها العنوان والرابط والفقرة والعناوين والقوائم.
6. اتّحاد W3C، «HTML 4.01 Specification»: توصية W3C في 24 كانون الأوّل 1999.
7. اتّحاد W3C، «HTML5»: توصية W3C في 28 تشرين الأوّل 2014.
8. اتّحاد W3C ومجموعة WHATWG، «Memorandum of Understanding Between W3C and WHATWG»، 28 أيّار 2019: التعاون على مواصفتي HTML وDOM اللتين تصدرهما WHATWG.
9. مجموعة WHATWG، «HTML Living Standard: the search element»، و«Add the <search> element» (دُمج في 24 آذار 2023).
10. اتّحاد W3C، «Declaring language in HTML»: ضع سمة lang على وسم html دائمًا، لا على body.
11. اتّحاد W3C، «Structural markup and right-to-left text in HTML»: أضف dir="rtl" إلى وسم html حين يكون اتّجاه الصفحة كلّها من اليمين إلى اليسار.
12. اتّحاد W3C، «Inline markup and bidirectional text in HTML»: أحط النصّ المُدرج بعنصر bdi، أو أضف dir="auto" إلى العنصر الذي يحيط به.
13. منظّمة الصحّة العالميّة، «Blindness and vision impairment»، 10 شباط 2026: 2.2 مليار إنسانٍ على الأقلّ لديهم ضعفٌ في النظر القريب أو البعيد.
14. موسوعة MDN، «HTML: A good basis for accessibility»: بنية النصّ بالعناوين والفقرات والقوائم من أهمّ ما يعين مستخدم قارئ الشاشة، ومعها النصّ البديل وتسميات النماذج.
15. شركة مايكروسوفت، «HTML in Visual Studio Code»: تحديث الوسم الختاميّ مع الافتتاحيّ بالإعداد editor.linkedEditing، ومعاينة ملفّ HTML في المتصفّح المدمج.
16. اتّحاد W3C، «Markup Validation Service».