HTML الدلالي لتحسين محركات البحث

الخلاصة — يعني HTML الدلالي استخدام وسوم تصف ماهية المحتوى، مثل <article> و<nav> و<main> و<header>، بدلاً من إحاطة كل شيء بعناصر <div> عادية. وهو يساعد محركات البحث وقارئات الشاشة على فهم صفحتك، لكنه ليس عامل ترتيب. ولن يؤدي استخدام <article> إلى رفع ترتيبك. وتنطبق القاعدة نفسها خارج المعالم: استخدم <a href> للروابط و<button> للإجراءات و<table> للبيانات الجدولية ونصاً بديلاً حقيقياً للصور. استخدم الوسم المناسب للمهمة.

ما HTML الدلالي؟

يتكون كل جزء من صفحة الويب من عناصر HTML. ويعني HTML الدلالي ببساطة اختيار العنصر الذي يطابق ماهية المحتوى فعلاً، بدلاً من استخدام حاوية عامة لكل شيء.

قارن بين هاتين الصيغتين للبنية نفسها:

<!-- Non-semantic: "div soup" -->
<div class="top"> ... </div>
<div class="menu"> ... </div>
<div class="content"> ... </div>
<div class="sidebar"> ... </div>
<div class="bottom"> ... </div>

<!-- Semantic: the tags describe the roles -->
<header> ... </header>
<nav> ... </nav>
<main> ... </main>
<aside> ... </aside>
<footer> ... </footer>

قد تبدوان متطابقتين على الشاشة؛ فـCSS يتولى التنسيق. لكن الصيغة الثانية تخبر الآلة، سواء كانت محرك بحث أو قارئ شاشة أو زاحف ذكاء اصطناعي، أين التنقل والمحتوى الرئيسي والشريط الجانبي. أما الأولى فتجعل الجميع يخمن.

العناصر التي ستستخدمها فعلاً

• <header> — محتوى تمهيدي أعلى الصفحة أو القسم.
• <nav> — كتلة من روابط التنقل.
• <main> — المحتوى الأساسي الفريد للصفحة. عنصر واحد في الصفحة.
• <article> — قطعة مستقلة يمكن أن تقوم بذاتها، مثل تدوينة أو بطاقة منتج أو تعليق.
• <section> — مجموعة موضوعية لها عنوانها الخاص.
• <aside> — محتوى جانبي بالنسبة إلى المحتوى الرئيسي.
• <footer> — محتوى ختامي، مثل حقوق النشر والروابط الثانوية.

وتمتد فكرة «الوسم المناسب» إلى ما دون تخطيط الصفحة: <a href> للروابط، و<button> للإجراءات داخل الصفحة، و<table> للبيانات الجدولية فعلاً، ونص alt بحسب غرض الصورة. وأكثر أخطاء الإتاحة شيوعاً هو بناء روابط زائفة من عناصر <div> منسقة؛ راجع علامة التبويب المتقدمة للقائمة الكاملة.

ما يخطئ فيه معظم الناس

إحاطة المحتوى بـ<article> لا تعزز ترتيبك. قال John Mueller من Google إن عنصر <article> ليس له “no particular effect” (ترجمة) «أي تأثير معين» في بحث Google، وإن HTML الدلالي “not a magical multiplier” (ترجمة) «ليس مضاعفاً سحرياً». يساعد HTML الدلالي محركات البحث على فهم صفحتك، لكنه ليس رافعة تستخدمها لرفع الترتيب.

قيمته حقيقية، لكنها ليست «نقاط ترتيب». فالترميز الدلالي النظيف يسهّل تمييز المحتوى الرئيسي من القوالب المتكررة كالقوائم والتذييلات والإعلانات، ويدعم مستخدمي قارئات الشاشة، ويسهل على أدوات الذكاء الاصطناعي القراءة. كلها أسباب جيدة، ولا يعني أي منها أنه عامل ترتيب.

وفخ آخر: HTML الدلالي ليس هو Semantic SEO. الأول عن بنية الترميز، والثاني عن الموضوعات والكيانات في المحتوى. الكلمة واحدة، لكن المفهومين مختلفان تماماً.

للحصول على الصورة الكاملة، بما في ذلك دلالة كل عنصر وما تقوله Google وBing وكيفية استخراج المحتوى الرئيسي وقائمة التحديث، انتقل إلى علامة التبويب Advanced.

الخلاصة — يستخدم HTML الدلالي العناصر لمعانيها البنيوية المقصودة (<main> و<article> و<section> و<nav> و<header> و<aside>) كي يوضح الترميز ماهية المحتوى لا مظهره. وهو ليس عامل ترتيب؛ قال Mueller إنه “not a magical multiplier” (ترجمة) «ليس مضاعفاً سحرياً»، وإن <article> ليس له “no particular effect” (ترجمة) «أي تأثير معين». لكنه يقلل الغموض: تفصل Centerpiece Annotation لدى Google المحتوى الرئيسي عن القوالب المتكررة عبر NLP سواء كان الترميز دلالياً أم لا، إلا أن الدلالات النظيفة تجعل المهمة أوثق. ويصف Fabrice Canel من Bing ذلك بعبارة أقوى، “an advantage in SEO” (ترجمة) «ميزة في تحسين محركات البحث»؛ ونذكر هذا الاختلاف بأمانة بدلاً من تسويته. ويقول دليل Google للمبتدئين إن معظم الويب ليس HTML صالحاً، لذا نادراً ما تعتمد Google على دلالات المواصفة. الاستخدام الصحيح أهم من مجرد الوجود: <main> واحد، و<article> للمحتوى المستقل، و<section> لمجموعة موضوعية ذات عنوان لا كبديل لـ<div>. ويمتد الاختبار نفسه إلى <a href> مقابل <button>، وجداول <table> الحقيقية للبيانات الجدولية، والنص البديل بحسب غرض الصورة، و<details>/<summary> لأدوات الإفصاح. ولا تعتمد على تداخل <section> لتحديد مستوى العنوان؛ فـdocument outline algorithm لم تنفذ قط ولم تعد المواصفة تعرف المخططات بهذه الطريقة. ولا تخلط HTML الدلالي بـSemantic SEO.

ما HTML الدلالي فعلاً؟

HTML الدلالي هو ممارسة اختيار عناصر HTML للمعنى البنيوي الذي صُممت لنقله، بدلاً من اللجوء إلى <div> و<span> لكل شيء. يعلن كل من <article> و<section> و<nav> و<header> و<main> و<aside> و<footer> دوراً. يصف الترميز ماهية جزء الصفحة فعلاً، ويقرر CSS مظهره. وتختصر Google القاعدة في دليل أسلوب المطورين بأبسط صياغة: “Use HTML elements for the purposes that they were designed for.” (ترجمة) «استخدم عناصر HTML للأغراض التي صُممت من أجلها».

لا ينشئ اسم الصنف دلالة. فتسمية <div> بالصيغة class="article" أو class="main-nav" لا تمنحه نموذج محتوى <article> أو دور التنقل الضمني لـ<nav>؛ إذ يبقى <div> عاماً للمتصفح وقارئ الشاشة والزاحف. تكمن الدلالة في العنصر المختار، لا في تنسيقه أو تسميته.

يتناول هذا المقال العناصر الدلالية تحديداً. أما الصورة الأوسع لكيفية تحليل Google لـHTML وتسلسل العناوين وصحة الشفرة فتنتمي إلى محور HTML SEO الأب، وسأحيل إليها بدلاً من تكرارها هنا.

هل يساعد HTML الدلالي تحسين محركات البحث فعلاً؟

الإجابة المختصرة: يساعد على الفهم، وليس عامل ترتيب، ويصوغه المحركان بصورة مختلفة قليلاً. وهذه هي الصياغة الدقيقة.

ما تقوله Google

تؤكد Google، على لسان John Mueller، أن HTML الدلالي جدير بالاستخدام لكنه ليس أداة ترتيب. وكما نقلت Search Engine Journal، قال Mueller: “Semantic HTML does help to understand a page. However, it’s not a magical multiplier for making a website rank higher,” (ترجمة) «يساعد HTML الدلالي على فهم الصفحة، لكنه ليس مضاعفاً سحرياً يجعل الموقع يحتل ترتيباً أعلى»، وقال أيضاً: “Please use semantic HTML. It’s not a ranking factor, but it can help our systems to understand your content better.” (ترجمة) «يرجى استخدام HTML الدلالي. فهو ليس عامل ترتيب، لكنه قد يساعد أنظمتنا على فهم محتواك بصورة أفضل».

وعن عنصر <article> تحديداً، قال Mueller في جلسة Office Hours إن العنصر “does not have any particular effect in Google Search,” (ترجمة) «ليس له أي تأثير معين في بحث Google»، وأضاف سبب استخدامه مع ذلك: “Sometimes there are accessibility or semantic reasons to use a specific kind of markup, so don’t only focus on SEO.” (ترجمة) «توجد أحياناً أسباب تتعلق بالإتاحة أو الدلالة لاستخدام نوع محدد من الترميز، فلا تركز على SEO وحده».

وتقول Google صراحة إنها لا تعتمد على الدلالات المثالية. يذكر دليل SEO للمبتدئين أن “Having your headings in semantic order is fantastic for screen readers, but from Google Search perspective, it doesn’t matter if you’re using them out of order. The web in general is not valid HTML, so Google Search can rarely depend on semantic meanings hidden in the HTML specification.” (ترجمة) «ترتيب العناوين دلالياً رائع لقارئات الشاشة، لكن ترتيبها لا يهم من منظور بحث Google. والويب عموماً ليس HTML صالحاً، لذلك نادراً ما يستطيع بحث Google الاعتماد على المعاني الدلالية الكامنة في مواصفة HTML». وهذا تفصيل مهم لا تناقض: تفيد الدلالات على الهامش، ولا تتطلب الكمال، وليست إشارة مسجلة النقاط.

علاقتها بعثور Google على المحتوى الرئيسي

هذه هي الآلية التي تجعل HTML الدلالي مفيداً رغم أنه ليس عامل ترتيب. يتعين على Google فصل المحتوى الرئيسي عن القالب المتكرر، كالتنقل والرأس والتذييل والأشرطة والإعلانات، قبل تحديد موضوع الصفحة. وصف Martin Splitt الآلية بقوله: “We have a thing called the Centerpiece Annotation, for instance, and there’s a few other annotations that we have where we look at the semantic content.” (ترجمة) «لدينا شيء يسمى Centerpiece Annotation، ولدينا تعليقات أخرى ننظر فيها إلى المحتوى الدلالي». ويُستنتج الموضوع عبر معالجة اللغة الطبيعية للنص، لا أسماء الوسوم: “This looks like from all the natural language processing that we did on this entire text content here that we got, it looks like this is primarily about topic A, dog food.” (ترجمة) «يبدو من كل معالجة اللغة الطبيعية التي أجريناها على النص كله أن هذا يتناول أساساً الموضوع أ، طعام الكلاب». ويخفض وزن البقية: “We figure out what looks like boilerplate and then, that gets weighted differently as well.” (ترجمة) «نحدد ما يبدو قالباً متكرراً، ثم نمنحه وزناً مختلفاً أيضاً».

النقطة الأساسية أن الاستخراج يعمل سواء كان الترميز دلالياً أم لا. تستطيع Google فك صفحة مبنية بالكامل من عناصر <div>. لكن عند سؤال Splitt مباشرة عما إذا كان HTML5 الدلالي يساعد، أجاب: “It does help us, but it’s not the only thing that we look for. Yes.” (ترجمة) «إنه يساعدنا، لكنه ليس الشيء الوحيد الذي ننظر إليه، نعم». لذلك لا يمنحك HTML الدلالي نقاط ترتيب أعلى؛ بل يقلل التخمين في خطوة تجريها Google أصلاً، وهذا بالضبط ما يجعله إشارة ثقة وكفاءة لا إشارة ترتيب. ولتحديد ما لا يفعله بدقة: لا يضمن الترميز الدلالي الصحيح أي عرض بحث معين أيضاً؛ فهذه طبقة منفصلة عن قواعد الأهلية التي تحكم النتائج المنسقة، كما سيأتي أدناه.

ما تقوله Bing ولماذا يختلف

تصوغ Bing المسألة بقوة أكبر من Google، ومن المهم إبقاء الفرق كما هو. قال Fabrice Canel من Microsoft إن الصفحات التي تنفذ HTML5 الدلالي بصورة صحيحة تتمتع بـ*“an advantage in SEO”* (ترجمة) «بميزة في تحسين محركات البحث» مقارنة بغيرها. وهذا أقوى من عبارة Google «يساعدنا على الفهم». يتفق المحركان على الفائدة الآلية لكنهما لا يستخدمان الكلمات نفسها، ولا يصفه أي منهما كعامل ترتيب مسجل النقاط مثل الروابط أو الصلة.

العناصر الدلالية الأساسية واستخدامها الصحيح

ليست العبرة بالوجود بل بالاستخدام الصحيح. والخطأ الأشهر هو نثر الوسوم الدلالية كزينة أو استبدال <div> بـ<section> بلا تفكير في معنى كل عنصر.

<header> و<footer>

يحمل <header> المحتوى التمهيدي ويحمل <footer> المحتوى الختامي، وكلاهما سياقي. فعلى مستوى المستند يمثلان رأس الموقع وتذييله، لكنهما قد يتداخلان داخل <article> أو <section> لتمييز مقدمة الكتلة وخاتمتها، مثل وضع عنوان المقال واسم مؤلفه في <header> ووسومه في <footer>. يمكن وجود عدة عناصر منهما ما دام كل واحد يلف محتوى تمهيدياً أو ختامياً لسياقه، لا صناديق عشوائية.

<nav>

يخصص <nav> لكتل روابط التنقل الرئيسية، مثل القائمة الأساسية ومسار التنقل وجدول محتويات الصفحة. وليس لكل مجموعة روابط؛ فلا تحتاج قائمة المقالات ذات الصلة في المتن إلى <nav>. وإحاطة كل مجموعة روابط به تضعف الإشارة، فاحتفظ به للتنقل الحقيقي.

<main>

يلف <main> محتوى الصفحة الأساسي الفريد غير المتكرر عبر الموقع. وينبغي أن يوجد <main> واحد بالضبط في الصفحة، وألا يتداخل داخل <article> أو <aside> أو <header> أو <footer> أو <nav>. وهو أوضح إشارة إلى «هذا هو المحتوى المهم».

<article> مقابل <section> (التمييز الذي يخطئ فيه الجميع)

هذا هو الفرق الذي يجب ضبطه:

• <article> للمحتوى المستقل القابل للتوزيع بذاته، أي ما يظل مفهوماً إذا أُخرج من الصفحة ووضع في خلاصة: تدوينة أو خبر أو بطاقة منتج أو منشور منتدى أو تعليق واحد. إذا أمكن نشره منفرداً فهو <article>.
• <section> مجموعة موضوعية ينبغي أن تحمل عنوانها: قسم «المراجعات» أو «المواصفات» أو فصل. إذا لم يكن للمحتوى معنى مع عنوان فغالباً ليس <section>، وإذا كان الهدف تعليق CSS عليه فقط فينبغي أن يكون <div>.

ليس <section> حاوية عامة. عندما تحتاج إلى خطاف تنسيق بلا معنى دلالي استخدم <div>؛ فهذا هو غرضه. واستخدام <section> لأنه «يبدو أحدث» هو أكثر إساءة شيوعاً لهذا العنصر.

<aside>

يميز <aside> المحتوى الجانبي بالنسبة إلى محيطه، مثل الشريط الجانبي أو الاقتباس البارز أو صندوق الروابط أو الإعلانات. وهو يقول «هذا ذو صلة لكنه ليس المسار الرئيسي»، وهو التمييز نفسه الذي تحاول Google استخراجه. لا تستخدمه لمجرد أن شيئاً يظهر جانبياً؛ استخدمه عندما يكون المحتوى ثانوياً فعلاً.

أدوار المعالم الصحيحة وخرافة المخطط

يقابل كل عنصر معلم دور ARIA ضمنياً محدداً تقرؤه التقنيات المساعدة مباشرة؛ وهذه هي البنية المحسوبة نفسها التي يتنقل بها المستخدم غير المبصر. لذلك يجدر معرفة التعيين الفعلي بدلاً من افتراضه:

ومن المهم التخلص من خرافة أن تداخل <section> يمنح عناوينه رتبة أدنى ضمنياً. عرّفت مواصفات HTML5 المبكرة document outline algorithm كانت ستحسب المستوى الفعال للعنوان بحسب عمق تداخل عناصر التقسيم، بحيث قد «يتصرف» <h1> متداخل كـ<h2>. لم ينفذها أي متصفح أو قارئ شاشة قط، وأسقطتها مواصفة WHATWG لصالح تعريف أبسط: المخطط هو جميع عناوين المستند بترتيب الشجرة. اكتب مستويات <h1>–<h6> صراحة وبالترتيب الذي تريد قراءتها به؛ فعمق التداخل لا يؤدي هذه المهمة.

الروابط مقابل الأزرار: اختبار الإجراء والتّنقل

هذا ليس عنصر معلم، لكنه أكثر الأخطاء الدلالية شيوعاً: استخدام <div> أو <span> منسق، أو <button>، حيث يلزم <a href>، أو العكس. تحدد مواصفة WHATWG أن <a> مع href آلية الرابط الأصلية، وأن <button> عنصر تحكم تفاعلي مسمى لتشغيل إجراء. إذا كان العنصر ينقل المستخدم إلى URL أو صفحة أو جزء، فاستخدم <a href>. وإذا كان ينفذ شيئاً في الصفحة الحالية، كإرسال نموذج أو فتح نافذة أو تبديل إعداد، فاستخدم <button>. لا يغير التنسيق طبيعته؛ ولا يحصل <div> ذو معالج نقر على تنشيط لوحة المفاتيح أو الدور المتاح ما لم تعِد بناء ذلك بـrole وtabindex ومعالجات المفاتيح. استخدم العنصر الصحيح ببساطة.

الجداول للبيانات الجدولية لا للتخطيط

إذا كان المحتوى يتكون فعلاً من صفوف وأعمدة، مثل مقارنة أو أسعار أو مجموعة بيانات، فاستخدم <table> حقيقياً لا شبكة <div>. تعرّف مواصفة الجداول نموذج بيانات حقيقياً: يسمي <caption> الجدول، وتحدد خلايا <th> مع scope علاقات الصفوف والأعمدة التي تسمح للتقنيات المساعدة بقول «السعر، 49 USD» بدلاً من جدار أرقام. لا تحمل شبكة <div> الشبيهة بالجدول هذه العلاقات. ولا تستخدم <table> لتخطيط الصفحة أيضاً.

يعتمد النص البديل على غرض الصورة

يحتاج <img> إلى alt، لكن متطلبات WHATWG تعتمد على الغرض: تحتاج صورة المنتج وصفاً لما يظهر؛ وتحصل الصورة الزخرفية على alt="" فارغاً كي تتجاوزها التقنيات المساعدة؛ وتحتاج الصورة التي تعمل كرابط نصاً يصف وجهة الرابط أو إجراءه، لا الصورة وحدها. لا تملأ النص البديل بكلمات مفتاحية لكل صورة «من أجل SEO». اسأل ما الذي يحتاج مستخدم قارئ الشاشة إلى معرفته مما سيفوته.

أدوات الإفصاح الأصلية: <details> و<summary>

للمحتوى القابل للتوسيع، مثل الأسئلة الشائعة والمواصفات والنص المخفي، يمثل زوج <details>/<summary> أداة إفصاح أصلية: <summary> هو العنوان المرئي دائماً، ويظهر محتوى <details> أو يختفي بحسب حالة open من دون JavaScript. وتحصل مجاناً على دعم لوحة المفاتيح والدلالات الصحيحة بدلاً من إعادة بنائها بـ<div> وJavaScript. لكن اختبره في المتصفحات وقارئات الشاشة المستهدفة؛ فقد اختلف عرضه في شجرة الإتاحة تاريخياً بين التركيبات.

خرافات شائعة عن HTML الدلالي وSEO

1. «إحاطة المحتوى بـ<article> ترفع الترتيب». لا؛ قال Mueller إن العنصر “does not have any particular effect in Google Search.” (ترجمة) «ليس له أي تأثير معين في بحث Google».
2. «HTML الدلالي عامل ترتيب». لا؛ فهو “not a magical multiplier” (ترجمة) «ليس مضاعفاً سحرياً»، و”It’s not a ranking factor, but it can help our systems to understand your content better.” (ترجمة) «ليس ذلك عامل ترتيب، لكنه قد يعين أنظمتنا على فهم محتواك بصورة أفضل».
3. «تتطلب Google HTML دلالياً صارماً وصالحاً». لا؛ وفق دليل المبتدئين، معظم الويب ليس صالحاً، وGoogle “can rarely depend on semantic meanings hidden in the HTML specification.” (ترجمة) «نادراً ما تستطيع الاعتماد على المعاني الدلالية الكامنة في مواصفة HTML».
4. «يجب أن يكون ترتيب العناوين مثالياً من أجل SEO». يهم قارئات الشاشة؛ ولا يهم ترتيب Google وفق السطر نفسه في دليل المبتدئين. تنتمي المعالجة الأعمق لتسلسل العناوين إلى محور HTML SEO؛ وهذه هي النسخة المختصرة فقط.
5. «HTML الدلالي وSemantic SEO شيء واحد». لا؛ الأول بنية ترميز، والثاني استراتيجية محتوى للموضوعات والكيانات. والخلط بينهما هو سبب تناول كثير من نتائج البحث عن «semantic» الموضوع الخطأ.
6. «تجعل البيانات المنظمة HTML الدلالي غير ضروري». لا؛ فهما متكاملان. يمنح HTML الدلالي البيانات المنظمة أساساً أوثق، ولا يستبدلها، كما أن JSON-LD لا يصلح فوضى <div>. ولا يضمن أي منهما نتيجة؛ توضح مقدمة Google للبيانات المنظمة أن استخدام الترميز المدعوم لا يضمن نتيجة منسقة؛ فأهلية ميزة بحث محددة مجموعة قواعد منفصلة عن الصلاحية التقنية لـHTML الدلالي أو JSON-LD.
7. «يمنح تداخل <section> عناوينه رتبة أدنى ضمنياً، فلا حاجة إلى الانتقال من <h1> إلى <h2> داخل قسم متداخل». لا؛ هذه بقايا document outline algorithm القديمة في HTML5، التي كانت ستحسب رتبة ضمنية للعنوان من تداخل عناصر التقسيم. لم ينفذها أي متصفح أو قارئ شاشة قط، ولم تعد مواصفة WHATWG تحسب المخطط بهذه الطريقة؛ فالمخطط اليوم هو «جميع عناوين المستند بترتيب الشجرة». استخدم <h1>–<h6> صريحة ومرتبة ترتيباً صحيحاً بصرف النظر عن عمق تداخل <section>/<article>، ولا تعتمد على التداخل لتحديد مستوى العنوان.

HTML الدلالي مقابل Semantic SEO: لا تخلط بينهما

بسبب الكلمة المشتركة يختلط المفهومان باستمرار وتختلط نتائج البحث:

• HTML الدلالي = الترميز، أي العناصر المستخدمة لبناء الصفحة.
• Semantic SEO = استراتيجية محتوى تبني سلطة موضوعية حول الكيانات والمفاهيم. وهذا النوع ينتمي إلى محوري AI Search والمحتوى، لا إلى هذا المقال.

إذا وصلت من استعلام عن Semantic SEO وتتوقع نمذجة الموضوعات فهذا مقال آخر. هذا المقال عن العناصر حصراً.

HTML الدلالي وزواحف AI/LLM

هنا تزداد أهمية HTML الدلالي بهدوء، وهذا رأي في الصناعة لا تصريح محرك. لا تعرض كثير من زواحف LLM ومحركات الإجابة JavaScript، بل تحلل HTML المقدم. ويسهل عليها الترميز الدلالي النظيف أكثر من فوضى <div>. يقول Barry Adams: “It’s much simpler for ChatGPT to parse a few dozen semantic HTML tags rather than several hundred (or even thousand) nested <div> tags,” (ترجمة) «من الأسهل كثيراً على ChatGPT تحليل بضع عشرات من وسوم HTML الدلالية من مئات أو آلاف عناصر <div> المتداخلة»، ويضيف: “Semantic HTML markup on your webpages can help machine systems better understand your content and its value.” (ترجمة) «يمكن لترميز HTML الدلالي في صفحاتك مساعدة الأنظمة الآلية على فهم محتواك وقيمته بصورة أفضل». ويقدم Jono Alderson الحجة نفسها: الموقع “an interface. An API. A dataset,” (ترجمة) «واجهة، وAPI، ومجموعة بيانات»، ويلخص الاستخدام الصحيح بقوله: “If everything is a <div> or a <span>, then nothing is meaningful.” (ترجمة) «إذا كان كل شيء <div> أو <span> فلا شيء ذا معنى». تعامل مع هذا كسبب اتجاهي جيد، لا كوعد من Google أو Bing.

تدقيق الصفحات الحالية وتحديثها

كثير من المواقع الحقيقية فوضى من <div> ولا يعاد بناؤها بين ليلة وضحاها. ترتيب عملي:

• أنشئ المعالم أولاً. تأكد من وجود <main> واحد ورأس <header> وتذييل <footer> و<nav> للقائمة الرئيسية. تؤدي هذه العناصر أكبر دور في استخراج المحتوى الرئيسي والإتاحة معاً.
• حوّل الكتل المستقلة إلى <article>. يشمل ذلك التدوينات وبطاقات المنتجات والتعليقات، وكل ما يمكن أن يقوم بذاته في خلاصة.
• حوّل المجموعات الموضوعية الحقيقية إلى <section> فقط مع عنوان حقيقي؛ وإلا فاتركها <div>.
• انقل الأشرطة الجانبية وصناديق المحتوى ذي الصلة إلى <aside>.
• أصلح الروابط والأزرار الزائفة. يصبح <div> ذو معالج النقر <a href> إن كان ينقل المستخدم، أو <button> إن كان ينفذ إجراء؛ وهذا غالباً أعلى إصلاح منفرد قيمة لمستخدمي لوحة المفاتيح وقارئات الشاشة.
• حوّل شبكات <div> الشبيهة بالجداول إلى <table> حقيقية مع <caption> و<th> عندما تكون البيانات جدولية فعلاً.
• لا تبالغ في التحويل. يظل <div> الصحيح خطاف تنسيق أو تخطيط بلا معنى دلالي. ولا يحتاج كل شيء إلى عنصر دلالي؛ ففرض عنصر عليه خطأ بذاته.
• تحقق ولا تفترض. افحص شجرة الإتاحة في DevTools؛ فهي تعرض أدوار المعالم التي ينتجها ترميزك، أي البنية نفسها التي تقرؤها الآلات.

موضعه في محور HTML SEO

هذا المقال شرح متعمق تحت محور HTML SEO الأب، الذي يغطي تحليل محركات البحث لـHTML وتسلسل العناوين وصحة الشفرة وتعامل المحللات المتسامحة مع الترميز الفوضوي. أبقيت هذا المقال عمداً مقصوراً على العناصر الدلالية نفسها، وتركت تلك الموضوعات للمحور ومقالاته الشقيقة. ويتكامل HTML الدلالي مباشرة مع البيانات المنظمة: يمنح الترميز مخططك أساساً موثوقاً، ويؤدي الاثنان وظيفتين متكاملتين.

الأسئلة الشائعة

هل يساعد HTML الدلالي SEO أم أنه للإتاحة فقط؟ كلاهما؛ يساعد محركات البحث على تحديد المحتوى الرئيسي وهو أساسي للإتاحة، لكنه ليس عامل ترتيب.

هل يحسن وسم <article> الترتيب؟ لا. قال Mueller إنه “does not have any particular effect in Google Search.” (ترجمة) «ليس له أي تأثير معين في بحث Google».

ما الفرق بين <article> و<section>؟ الأول محتوى مستقل يمكن أن يقوم بذاته في خلاصة، والثاني مجموعة موضوعية لها عنوانها. ولا يحل أي منهما محل <div>.

هل يمكن وجود أكثر من <main> في الصفحة؟ لا؛ عنصر <main> واحد لكل صفحة.

هل تتطلب Google HTML صالحاً للترتيب؟ لا؛ فمعظم الويب ليس صالحاً، وGoogle “can rarely depend on semantic meanings hidden in the HTML specification.” (ترجمة) «نادراً ما تستطيع الاعتماد على المعاني الدلالية الكامنة في مواصفة HTML».

هل HTML الدلالي هو Semantic SEO؟ لا؛ الأول ترميز والثاني استراتيجية محتوى للموضوعات والكيانات.

هل أستخدم <a> أم <button> لعنصر قابل للنقر؟ يعتمد على وظيفته. استخدم <a href> إذا كان ينقل إلى URL أو جزء، و<button> إذا نفذ إجراء في الصفحة الحالية، مثل الإرسال أو التبديل أو فتح نافذة. ولا تحاكِ أياً منهما بعنصر <div> منسق ومعالج نقر.

هل يغير تداخل <section> مستوى العنوان؟ لا. كانت خوارزمية مخطط المستند القديمة في HTML5 ستحسب رتبة ضمنية للعنوان من تداخل عناصر التقسيم، لكنها لم تُنفذ في أي متصفح أو قارئ شاشة، ولا تعرف المواصفة الحالية المخططات بهذه الطريقة. استخدم <h1>–<h6> صريحة ومرتبة ترتيباً صحيحاً بصرف النظر عن عمق التداخل.

هل يضمن HTML الدلالي الصحيح أو البيانات المنظمة نتيجة منسقة؟ لا. تقول وثائق Google إن الترميز المدعوم لا يضمن عرضاً محدداً؛ فأهلية الميزة منفصلة عن صحة الترميز.

ملخص الذكاء الاصطناعي

خلاصة مكثفة للنسخة المتقدمة:

• HTML الدلالي = استخدام العناصر لمعانيها المقصودة (<main> و<article> و<section> و<nav> و<header> و<aside> و<footer>) كي يوضح الترميز ماهية المحتوى. ويتولى CSS مظهره.
• ليس عامل ترتيب. قال Mueller إنه “not a magical multiplier” (ترجمة) «ليس مضاعفاً سحرياً»، وإن عنصر <article> ليس له “no particular effect” (ترجمة) «أي تأثير معين» في بحث Google. استخدمه للإتاحة والوضوح، لا للحصول على نقاط ترتيب.
• يساعد استخراج المحتوى الرئيسي. تفصل Centerpiece Annotation لدى Google المحتوى الرئيسي عن القالب المتكرر عبر NLP بصرف النظر عن الترميز، وفق Splitt، لذا تعمل حتى مع فوضى div، لكن الترميز الدلالي يقلل التخمين. وقال Splitt: “It does help us, but it’s not the only thing that we look for.” (ترجمة) «إنه يساعدنا، لكنه ليس الشيء الوحيد الذي ننظر إليه».
• لا تتطلب Google HTML صالحاً. يقول دليل المبتدئين إن معظم الويب ليس صالحاً، لذلك “can rarely depend on semantic meanings hidden in the HTML specification” (ترجمة) «نادراً ما تستطيع الاعتماد على المعاني الدلالية الكامنة في مواصفة HTML».
• تصوغ Bing الأمر بقوة أكبر. قال Fabrice Canel إن HTML5 الدلالي يمنح “an advantage in SEO” (ترجمة) «ميزة في تحسين محركات البحث». اذكر الفرق بأمانة؛ فصياغة Bing أقوى من صياغة Google، ولا يصفه أي منهما بأنه عامل ترتيب مسجل النقاط.
• الاستخدام الصحيح أهم من الوجود: <main> واحد؛ و<article> للمحتوى المستقل؛ و<section> لمجموعة موضوعية لها عنوان لا كبديل لـ<div>؛ و<nav> للتنقل الرئيسي فقط؛ و<aside> للمحتوى الجانبي.
• تقابل عناصر المعالم أدوار ARIA ضمنية محددة (<header>→banner، و<nav>→navigation، و<main>→main، و<aside>→complementary، و<footer>→contentinfo، وذلك على مستوى المستند فقط؛ فإذا تداخلت داخل قسم لم تعد معالم). ولا يكون <section> معلماً (region) إلا إذا كان له اسم متاح، أما <article> فليس معلماً أصلاً.
• خرافة document outline algorithm: لا يمنح تداخل <section> عناوينه رتبة أدنى ضمنياً. لم ينفذ أي متصفح أو قارئ شاشة تلك الخوارزمية، ولم تعد مواصفة WHATWG تعرف المخططات بهذه الطريقة؛ فاكتب مستويات <h1>–<h6> صريحة.
• خارج المعالم: استخدم <a href> للتنقل مقابل <button> للإجراءات داخل الصفحة؛ وجداول <table> حقيقية (مع <caption>/<th>) للبيانات الجدولية لا شبكات <div>؛ ونص alt بحسب الغرض (alt="" للصور الزخرفية)؛ و<details>/ <summary> لأدوات الإفصاح الأصلية، مع اختبار العرض في المتصفح والتقنيات المساعدة قبل الشحن.
• زاوية AI/LLM (رأي صناعي): كثيراً ما لا تعرض زواحف LLM JavaScript، لذلك يسهل عليها تحليل HTML الدلالي النظيف أكثر من عناصر <div> المتداخلة، وفق Adams وAlderson.
• لا تخلطه بـSemantic SEO، أي استراتيجية الكيانات والموضوعات؛ الكلمة واحدة والمفهوم مختلف. تكمل البيانات المنظمة HTML الدلالي ولا تستبدله، ولا يضمن أي منهما نتيجة منسقة أو مكسباً في الترتيب.

الوثائق الرسمية

وثائق المصادر الأولية وإرشادات الأسلوب من محركات البحث وهيئات المعايير.

Google

• SEO Starter Guide — قسم «الأمور التي لا ينبغي التركيز عليها»، بما في ذلك التحفظ بشأن ترتيب العناوين والمعاني الدلالية.
• دليل أسلوب وثائق مطوري Google — HTML والوسم الدلالي — “Use HTML elements for the purposes that they were designed for.” (ترجمة) «استخدم عناصر HTML للأغراض التي صُممت من أجلها».
• web.dev — تعلم HTML: ‏HTML الدلالي — وحدة Google التعليمية عن عناصر المعالم وأدوارها في الإتاحة.

المعايير والمراجع

• MDN — الدلالات (المسرد) — التعريف المرجعي للعناصر الدلالية مقارنة بالحاويات غير الدلالية.
• مواصفة WHATWG الحية لـHTML — الأقسام — تعريفات <article> و<section> و<nav> و<aside> و<header> و<footer>، ونماذج محتواها، والتعريف الحالي غير الخوارزمي لمخطط المستند.
• مواصفة WHATWG الحية لـHTML — الروابط — عنصر <a> ودلالات الروابط التشعبية.
• مواصفة WHATWG الحية لـHTML — عنصر button — دلالات عنصر التحكم التفاعلي الأصلي.
• مواصفة WHATWG الحية لـHTML — البيانات الجدولية — دلالات <table> و<caption> وخلايا العناوين وعلاقات البيانات.
• مواصفة WHATWG الحية لـHTML — الصور — متطلبات النص البديل لعنصر <img> بحسب الغرض والسياق.
• مواصفة WHATWG الحية لـHTML — عنصرا details وsummary — أداة الإفصاح الأصلية.
• MDN — مرجع أدوار ARIA — تعيينات أدوار المعالم الضمنية لعناصر التقسيم.
• W3C WAI — درس بنية الصفحة — كيف تدعم المناطق الأصلية والعناوين التنقل بالتقنيات المساعدة.

Bing / Microsoft

• Kalicube — HTML5 Semantic Tags (Fabrice Canel) — مصدر موقف Canel القائل بوجود “advantage in SEO” (ترجمة) «ميزة في تحسين محركات البحث» لـHTML5 الدلالي.

اقتباسات من المصدر

تصريحات مسجلة من Google وBing. وحيث تدعم صفحة المصدر ذلك، ينتقل الرابط العميق إلى المقطع المقتبس.

Google — ليس عامل ترتيب (John Mueller)

• “Semantic HTML does help to understand a page. However, it’s not a magical multiplier for making a website rank higher.” (ترجمة) «يساعد HTML الدلالي على فهم الصفحة، لكنه ليس مضاعفاً سحرياً يجعل الموقع يحتل ترتيباً أعلى». — John Mueller، Google، عبر Search Engine Journal. اقرأ التغطية
• “Please use semantic HTML. It’s not a ranking factor, but it can help our systems to understand your content better.” (ترجمة) «استخدموا HTML الدلالي من فضلكم. فهو ليس عامل ترتيب، لكنه قد يساعد أنظمتنا على فهم محتواكم بصورة أفضل». — John Mueller، Google، المصدر نفسه. اقرأ التغطية

Google — عنصر <article> تحديداً (John Mueller)

• “The <article> HTML element does not have any particular effect in Google Search.” (ترجمة) «ليس لعنصر HTML المسمى <article> أي تأثير معين في بحث Google». — John Mueller، Google SEO Office Hours، عبر Search Engine Journal. اقرأ التغطية
• “Sometimes there are accessibility or semantic reasons to use a specific kind of markup, so don’t only focus on SEO.” (ترجمة) «توجد أحياناً أسباب تتعلق بالإتاحة أو الدلالة لاستخدام نوع محدد من الترميز، فلا تركز على SEO وحده». — John Mueller، Google SEO Office Hours، المصدر نفسه. اقرأ التغطية

Google — استخراج المحتوى الرئيسي (Martin Splitt)

• “We have a thing called the Centerpiece Annotation, for instance, and there’s a few other annotations that we have where we look at the semantic content.” (ترجمة) «لدينا شيء يسمى Centerpiece Annotation، ولدينا تعليقات أخرى ننظر فيها إلى المحتوى الدلالي». — Martin Splitt، Google، عبر Search Engine Journal. اقرأ التغطية
• “We figure out what looks like boilerplate and then, that gets weighted differently as well.” (ترجمة) «نحدد ما يبدو قالباً متكرراً، ثم نمنحه وزناً مختلفاً أيضاً». — Martin Splitt، المصدر نفسه. اقرأ التغطية
• “It does help us, but it’s not the only thing that we look for. Yes.” (ترجمة) «نعم، يساعدنا ذلك، لكنه ليس الشيء الوحيد الذي ننظر إليه». — Martin Splitt، مجيباً مباشرة عما إذا كان HTML5 الدلالي يساعد Google. انتقل إلى الاقتباس

Google — لا تعتمد على صلاحية HTML أو دلالات المواصفة (SEO Starter Guide)

• “Having your headings in semantic order is fantastic for screen readers, but from Google Search perspective, it doesn’t matter if you’re using them out of order. The web in general is not valid HTML, so Google Search can rarely depend on semantic meanings hidden in the HTML specification.” (ترجمة) «الترتيب الدلالي للعناوين ممتاز لقارئات الشاشة، لكن استخدامها بغير ترتيب لا يهم من منظور بحث Google. والويب بوجه عام ليس HTML صالحاً، لذلك نادراً ما يمكن لبحث Google الاعتماد على المعاني الدلالية الكامنة في مواصفة HTML». — Google SEO Starter Guide. انتقل إلى الاقتباس

Google — استخدم العناصر لأغراضها (Style Guide)

• “Use HTML elements for the purposes that they were designed for.” (ترجمة) «استخدم عناصر HTML للأغراض التي صُممت من أجلها». — Google Developer Documentation Style Guide. اقرأ المصدر

Bing / Microsoft (Fabrice Canel)

• قال Fabrice Canel من Microsoft Bing إن الصفحات التي تنفذ HTML5 الدلالي بصورة صحيحة تتمتع بميزة في SEO مقارنة بغيرها؛ وهذه صياغة أقوى من عبارة Google «يساعد على الفهم»، لكنها لا تصفه كعامل ترتيب مسجل النقاط. هذه إعادة صياغة لا اقتباس حرفي؛ إذ تصل عبر استشهاد ثانوي من Kalicube لا مصدر Bing أولي مجلوب، ولذلك يجب تأكيد النص الدقيق من الأصل قبل معاملته كاقتباس مباشر. اقرأ المصدر

أي عنصر تحتاجه هذه الكتلة؟

يمثل السؤال عن الاختيار بين article وsection وdiv، وسائر اختيارات المعالم، تفرعاً حقيقياً لا تفضيلاً أسلوبياً. أجب بصدق في كل خطوة؛ فالاختبار دائماً هو ما الذي يفعله هذا المحتوى فعلاً، لا ما يبدو أحدث.

ما ينبغي ألا تفعله

هذه هي الأخطاء التي تشير إليها الخرافات، مع سبب الخطأ والبديل:

• إحاطة المحتوى بـ<article> توقعاً لرفع الترتيب. سبب الخطأ: قال Mueller إن العنصر “does not have any particular effect in Google Search.” (ترجمة) «ليس له أي تأثير معين في بحث Google». البديل: استخدم <article> عندما يكون المحتوى مستقلاً حقاً ويمكن أن يقوم بذاته في خلاصة، من أجل الإتاحة والوضوح، لا بوصفه رافعة لتحسين محركات البحث.

• معاملة HTML الدلالي عموماً كعامل ترتيب مسجل النقاط. سبب الخطأ: إنه “not a magical multiplier” (ترجمة) «ليس مضاعفاً سحرياً»، ولا توجد إشارة مسجلة النقاط يمكنك ملاحقتها. البديل: خصص العمل له بوصفه استثماراً في الفهم والإتاحة ذا عائد حقيقي، وإن تعذر قياسه كترتيب، لا مشروع ترتيب تتوقع منه ارتفاعاً محدداً.

• الهوس بترتيب مثالي للعناوين أو بصحة صارمة من أجل Google. سبب الخطأ: يقول دليل Google للمبتدئين “the web in general is not valid HTML, so Google Search can rarely depend on semantic meanings hidden in the HTML specification.” (ترجمة) «الويب عموماً ليس HTML صالحاً، لذلك نادراً ما يستطيع بحث Google الاعتماد على المعاني الدلالية الكامنة في مواصفة HTML». البديل: أصلح ترتيب العناوين والصحة لقارئات الشاشة والمستخدمين، حيث يهمان فعلاً، لا لأن Google تمنحهما نقاطاً.

• استخدام <section> بديلاً لـ<div> لأنه «يبدو أحدث». سبب الخطأ: لا يكون <section> بلا عنوان مجموعة موضوعية، بل يصبح مجرد زينة؛ وهذه أكثر إساءة شيوعاً للعنصر. البديل: إذا لم تكن الكتلة مفهومة مع عنوان خاص بها، فاستخدم <div>.

• الخلط بين HTML الدلالي وSemantic SEO. سبب الخطأ: الأول بنية ترميز، والثاني استراتيجية محتوى للموضوعات والكيانات؛ والخلط بينهما يعني تحسين الشيء الخطأ للهدف الفعلي. البديل: أبق المفهومين منفصلين؛ فهذا المقال عن العناصر فقط.

• تجاوز HTML الدلالي لأن البيانات المنظمة موجودة بالفعل. سبب الخطأ: لا يصلح JSON-LD فوضى div، وليست البيانات المنظمة بديلاً لبنية الترميز. البديل: استخدم كليهما؛ إذ تقوم البيانات المنظمة فوق أساس دلالي ولا تستبدله. ولا يضمن أي منهما نتيجة منسقة؛ فهذه مسألة أهلية منفصلة عن صحة الترميز.

• تداخل عناصر <section> لجعل العناوين «تتصرف» كأنها في مستوى أدنى. سبب الخطأ: يعتمد ذلك على document outline algorithm القديمة في HTML5، التي لم ينفذها أي متصفح أو قارئ شاشة، ولم تعد مواصفة WHATWG الحالية تعرف المخططات بهذه الطريقة. البديل: اكتب مستويات <h1>–<h6> صريحة ومرتبة ترتيباً صحيحاً؛ ولا تجعل عمق التداخل يحل محل رتبة العنوان التي تقصدها فعلاً.

• استخدام <div> بمعالج نقر بدلاً من <a href> أو <button>. سبب الخطأ: تفقد تنشيط لوحة المفاتيح الأصلي والدور الصحيح المتاح ما لم تُعد بناءهما يدوياً باستخدام role وtabindex ومعالجات المفاتيح. البديل: استخدم <a href> عندما ينقل الإجراء المستخدم إلى مكان آخر، و<button> عندما ينفذ شيئاً في الصفحة الحالية، لتحصل على السلوك الأصلي مجاناً.

عناصر المعالم في لمحة

العناصر السبعة وغرض كل منها وإساءة الاستخدام الشائعة:

قاعدة سريعة: ما يمكن نشره منفرداً هو <article>؛ وما يحتاج عنواناً ليكون مفهوماً هو <section>؛ وما ليس هذا ولا ذاك فهو <div>.

خارج المعالم: عناصر التفاعل والبيانات

مطالبات لتحديث HTML

مطالبات جاهزة للنسخ للمهمة المحددة التي يغطيها هذا المقال: العثور على فوضى div وتحويلها إلى ترميز دلالي صحيح. ألصق HTML صفحتك، من view-source لا من DOM المعروض، في مساعد ذكاء اصطناعي مع إحدى هذه المطالبات.

حدد فوضى div واقترح البدائل

Here is the HTML for one of my pages. Identify every <div> or <span> that is standing
in for a semantic landmark, and suggest the correct replacement element from this list:
header, nav, main, article, section, aside, footer. For each suggestion, explain which
test it passes (e.g. "this could stand alone in a feed, so it's an <article>" or "this
has its own heading and one theme, so it's a <section>"). Flag any block that should
stay a <div> because it's purely a styling/layout hook.

[paste HTML here]

تحقق من أخطاء بنية المعالم

Review this page's HTML for these specific structural mistakes: more than one <main>
element, a <main> nested inside <article>/<aside>/<header>/<footer>/<nav>, a <nav>
wrapping something that isn't major navigation, or a <section> with no heading. List
each problem found with the line/snippet and the fix.

[paste HTML here]

رتب أولويات التحديث

Given this page's HTML, tell me which landmark to fix first for the biggest
accessibility and main-content-extraction benefit: establishing <main>/<header>/
<footer>/<nav>, converting self-contained blocks to <article>, converting themed
groups to <section>, or moving sidebars to <aside>. Order the fixes and say what
"done" looks like for each.

[paste HTML here]

تطابق المعالم بنيتك المقصودة

الاختبار: افتح شجرة الإتاحة في DevTools بالمتصفح (في Chrome/Edge: DevTools → Elements → Accessibility) على الصفحة التي حدّثتها. النتيجة المتوقعة: تطابق أدوار المعالم المدرجة (banner وnavigation وmain وcomplementary وcontentinfo) العناصر الدلالية التي كتبتها فعلاً، مع دور main/ “main” واحد ودور banner واحد، وهكذا. تفسير الفشل: يعني دور المعلم المفقود أو المكرر أن الترميز لم ينتج البنية التي قصدتها، مثل وجود <main> ثانٍ أو عنصر <div> كان ينبغي تحويله. نافذة المراقبة: فوراً؛ تحقق مباشرة بعد نشر التحديث. محفز التراجع: وجود أكثر من معلم main/“main”، أو تداخل معلم في موضع لا ينبغي أن يوجد فيه، مثل main داخل article، يعني التراجع وإعادة فحص الترميز.

عنصر <main> واحد بالضبط

الاختبار: شغّل grep -o "<main" page.html | wc -l على HTML المعروض أو view-source، أو ابحث عن <main في لوحة Elements في DevTools. النتيجة المتوقعة: مطابقة واحدة بالضبط. تفسير الفشل: يعني عدم وجود أي مطابقة أن معلم المحتوى الرئيسي لم يُضبط؛ ويعني وجود أكثر من مطابقة أن «أوضح إشارة مفردة» إلى المحتوى الرئيسي أصبحت غامضة. نافذة المراقبة: فوراً، وقت النشر. محفز التراجع: أي عدد غير واحد بالضبط.

ترى الزواحف غير العارضة البنية

الاختبار: اجلب الصفحة بعميل HTTP عادي (curl أو “view page source”، لا DOM المعروض)، وتأكد من وجود العناصر الدلالية في الاستجابة الخام، لا من حقنها لاحقاً بواسطة JavaScript من جهة العميل. النتيجة المتوقعة: تظهر <header> و<nav> و<main> و<article>/<section> و<aside> و<footer> كلها في حمولة HTML الأولية. تفسير الفشل: إذا لم تظهر الوسوم الدلالية إلا بعد تنفيذ JS، فلن ترى الزواحف التي لا تعرض JavaScript، وفق نقطة زواحف AI/LLM أعلاه، البنية إطلاقاً. نافذة المراقبة: فوراً؛ وأعد الفحص كلما غيّر القالب أو إطار JavaScript طريقة عرض الصفحة. محفز التراجع: وجود المعالم الدلالية في DOM المعروض وغيابها من استجابة HTML الخام.

مستويات العناوين صريحة ولا ترث من التداخل

الاختبار: اسرد مستويات العناوين بترتيب المستند في شجرة الإتاحة في DevTools بالمتصفح، أو في إضافة لفحص المخطط، وقارنها بوسوم <h1>–<h6> الفعلية في المصدر، بصرف النظر عن عمق تداخل كل عنوان داخل عناصر <section>/<article>. النتيجة المتوقعة: يطابق مستوى كل عنوان معلن وسمه الحرفي؛ فيُعلن <h2> مثلاً بصفته المستوى 2 مهما بلغ عدد الأقسام التي يتداخل فيها، ولا يحدث خفض ضمني بسبب التداخل. تفسير الفشل: إذا كان قالبك أو مكتبة المكونات تعتمد على تداخل <section> «لخفض» رتبة العنوان تلقائياً، فهذا الافتراض لا يصح؛ فلم تنفذ document outline algorithm القديمة قط، ولا تحسب المواصفة الحالية المخططات بهذه الطريقة. أصلح وسوم العناوين نفسها. نافذة المراقبة: فوراً، وكلما أدخل قالب أو نمط مكونات جديد أقساماً متداخلة. محفز التراجع: ألا يطابق مستوى العنوان المعروض أو المعلن وسمه الحرفي <h1>–<h6>.

الروابط والأزرار الزائفة قابلة للاستخدام بلوحة المفاتيح

الاختبار: تنقل في الصفحة باستخدام لوحة المفاتيح فقط، وحاول تفعيل كل عنصر قابل للنقر بمفتاحي Enter/Space؛ وافحص بصورة منفصلة في شجرة الإتاحة الدور الذي يعلنه كل عنصر قابل للنقر. النتيجة المتوقعة: تعلن العناصر التي تنقل المستخدم الدور link، من عنصر <a href> أصلي، وتعلن العناصر التي تنفذ إجراء في الصفحة الدور button، من عنصر <button> أصلي؛ ويمكن الوصول إلى النوعين وتفعيلهما بلوحة المفاتيح من دون شيفرة إضافية لـrole أو tabindex أو معالج المفاتيح. تفسير الفشل: إذا تعذر الوصول بلوحة المفاتيح إلى عنصر <div> أو <span> ذي معالج نقر، أو أعلن دوراً عاماً بدلاً من link/button، فيجب تحويله إلى العنصر الأصلي بدلاً من ترقيعه بـARIA. نافذة المراقبة: فوراً؛ وأعد الفحص بعد أي تغيير في مكتبة المكونات أو نظام التصميم. محفز التراجع: أي عنصر تحكم قابل للنقر لا يمكن الوصول إليه أو تفعيله بلوحة المفاتيح وحدها.

اختبر نفسك: HTML الدلالي

سبعة أسئلة سريعة عما يفعله HTML الدلالي وما لا يفعله من أجل SEO. اختر إجابة ثم تحقق.

سجل التغييرات