أحد الأخطاء الأكثر شيوعًا التي يرتكبها الأشخاص عند استخدام العلامات هو مساواة <section> في HTML5 مع <div> - على وجه التحديد، استخدامه مباشرة كبديل (لأغراض التصميم). في XHTML أو HTML4، غالبًا ما نرى تعليمات برمجية مثل هذا:
<!-- كود HTML 4-style --><div id=wrapper> <div id=header> <h1>صفحتي المخادعة الرائعة</h1> محتوى الرأس </div> <div id=main> محتوى الصفحة < /div> <div id= Secondary> المحتوى الثانوي </div> <div id=footer> محتوى التذييل </div></div>
الآن في HTML5، سيبدو الأمر كما يلي:
من فضلك لا تنسخ هذا الرمز! هذا خطأ!
<section id=wrapper> <header> <h1>صفحتي المخادعة للغاية</h1> <!-- محتوى الرأس --> </header> <section id=main> <!-- محتوى الصفحة --> </ قسم> <section id= Secondary> <!-- محتوى ثانوي --> </section> <footer> <!-- محتوى التذييل --> </footer></section>
هذا الاستخدام غير صحيح:**
إنها ليست حاوية نمط. يمثل عنصر القسم ** الجزء الدلالي من المحتوى المستخدم للمساعدة في إنشاء ملخص المستند. يجب أن يحتوي على رأس. إذا كنت تبحث عن عنصر يعمل كحاوية صفحة (مثل نمط HTML أو XHTML)، ففكر في كتابة النمط مباشرةً إلى عنصر النص، كما يقترح Kroc Camen. إذا كنت لا تزال بحاجة إلى حاويات أنماط إضافية، فالتزم باستخدام div.
بناءً على الأفكار المذكورة أعلاه، فيما يلي أمثلة على الاستخدام الصحيح لـ HTML5 وبعض ميزات أدوار ARIA (لاحظ أنه اعتمادًا على تصميمك الخاص، قد تحتاج أيضًا إلى إضافة divs)
<body><header> <h1>صفحتي المخادعة</h1> <!-- محتوى الرأس --></header><div role=main> <!-- محتوى الصفحة --></div>< Side role=comlementary> <!-- محتوى ثانوي --></aside><footer> <!-- محتوى التذييل --></footer></body>2. استخدم الرؤوس ومجموعات hgroup فقط عند الحاجة
ليس هناك بالطبع أي فائدة من كتابة تسميات لا تحتاج إلى كتابتها. لسوء الحظ، كثيرا ما أرى الرؤوس ومجموعات hgroup يساء استخدامها دون أي غرض. يمكنك قراءة المقالتين حول عناصر الرأس وhgroup للحصول على فهم تفصيلي، وسألخص المحتويات بإيجاز على النحو التالي:
نظرًا لأنه يمكن استخدام الرؤوس عدة مرات في المستند، فقد يجعل هذا نمط الترميز هذا شائعًا:
من فضلك لا تنسخ هذا الرمز! ليست هناك حاجة إلى رأس هنا ->
<header> <h1>أفضل مشاركة في مدونتي</h1> </header> <!-- محتوى المقالة --></article>
إذا كان عنصر الرأس يحتوي على عنصر رأس واحد فقط، فتجاهل عنصر الرأس. نظرًا لأن عنصر المقالة يضمن بالفعل ظهور الرأس في ملخص المستند، ولا يمكن أن يحتوي الرأس على عناصر متعددة (كما هو موضح أعلاه)، فلماذا تكتب رمزًا إضافيًا. ببساطة اكتبها هكذا:
<article> <h1>أفضل مشاركة في مدونتي</h1> <!-- محتوى المقالة --></article>
الاستخدام غير الصحيح ل
فيما يتعلق بموضوع الرؤوس، غالبًا ما أرى أيضًا استخدام مجموعات hgroup بشكل غير صحيح. في بعض الأحيان لا ينبغي استخدام hgroup والرأس معًا:
عادة ما يبدو السؤال الأول كما يلي:
من فضلك لا تنسخ هذا الرمز! ليست هناك حاجة إلى hgroup هنا -> <hgroup> <h1>أفضل مشاركة في مدونتي</h1> </hgroup> <p>بواسطة Rich Clark</p></header>
في هذا المثال، ما عليك سوى إزالة hgroup وترك العنوان يأخذ مجراه.
<header> <h1>أفضل مشاركة في مدونتي</h1> <p>بقلم ريتش كلارك</p></header>
السؤال الثاني هو مثال آخر غير ضروري:
من فضلك لا تنسخ هذا الرمز لا يوجد رأس مطلوب هنا ->
<hgroup> <h1>شركتي</h1> <h2>تأسست عام 1893</h2> </hgroup></header>
إذا كان العنصر الفرعي الوحيد للرأس هو hgroup، فماذا يفعل الرأس أيضًا؟ إذا لم تكن هناك عناصر أخرى في الرأس (مثل مجموعات hgroup المتعددة)، فما عليك سوى إزالة الرأس مباشرة.
<hgroup> <h1>شركتي</h1> <h2>تأسست عام 1893</h2></hgroup>3. لا تضع جميع الروابط المشابهة للقائمة في التنقل
مع تقديم 30 عنصرًا جديدًا في HTML5 (اعتبارًا من وقت النشر الأصلي)، أصبحت خياراتنا في إنشاء العلامات الدلالية والمنظمة مهملة إلى حد ما. ومع ذلك، لا ينبغي لنا أن نسيء استخدام العناصر الدلالية المفرطة. لسوء الحظ، التنقل هو مثال على مثل هذا الإساءة. يتم وصف مواصفات عنصر التنقل على النحو التالي:
يمثل عنصر التنقل كتلة في الصفحة ترتبط بصفحات أخرى أو أجزاء أخرى من هذه الصفحة؛ وهي كتلة تحتوي على اتصالات التنقل.
ملاحظة: لا يلزم وضع جميع الروابط الموجودة على الصفحة في عنصر التنقل - هذا العنصر مخصص للاستخدام ككتلة التنقل الرئيسية. لإعطاء مثال محدد، غالبًا ما يكون هناك العديد من الروابط في التذييل، مثل شروط الخدمة، والصفحة الرئيسية، وصفحة بيان حقوق الطبع والنشر، وما إلى ذلك. يعد عنصر التذييل بحد ذاته كافيًا للتعامل مع هذه المواقف، على الرغم من إمكانية استخدام عنصر التنقل هنا أيضًا، إلا أننا نعتقد عادةً أنه غير ضروري.
الكلمات الرئيسية هي التنقل الأساسي. بالطبع يمكننا أن نتبادل الحديث مع بعضنا البعض طوال اليوم حول ما هو مهم. هذه هي الطريقة التي أعرفها شخصيا:
لتسهيل الوصول، هل ستضيف رابطًا إلى علامة التنقل هذه في قفزة مختصرة؟
إذا كانت الإجابة على هذه الأسئلة هي لا، فما عليك إلا أن تنحني وتنطلق بمفردك.
4. الأخطاء الشائعة في عناصر الشكلمن الصعب بالفعل إتقان الاستخدام الصحيح للشكل والتسميات التوضيحية. دعونا نلقي نظرة على بعض الأخطاء الشائعة،
ليست كل الصور هي أرقام
أعلاه، أخبرتك بعدم كتابة تعليمات برمجية غير ضرورية. الشيء نفسه ينطبق على هذا الخطأ. لقد رأيت العديد من مواقع الويب تصنف جميع الصور على أنها أرقام. من أجل الصورة، يرجى عدم إضافة علامات إضافية إليها. أنت تؤذي نفسك فقط ولا تجعل صفحتك أكثر وضوحًا.
يتم وصف الأشكال في المواصفات كمحتوى متدفق، وأحيانًا مع وصف العنوان الخاص بها. بشكل عام، تتم الإشارة إليها كوحدات مستقلة في تدفق المستند. هذا هو جمال الشكل - حيث يمكن نقله من صفحة المحتوى الرئيسية إلى الشريط الجانبي دون التأثير على تدفق المستند.
تمت تغطية هذه المشكلات أيضًا من خلال المخطط الانسيابي لعنصر HTML5 المذكور سابقًا.
إذا كان الرسم التخطيطي مخصصًا للعرض فقط ولم تتم الإشارة إليه في أي مكان آخر في المستند، فمن المؤكد أنه ليس كذلك
. يعتمد الباقي على الموقف، لكن ابدأ بسؤال نفسك: هل يجب أن تكون هذه الصورة ذات صلة بالسياق؟ إذا لم يكن الأمر كذلك، فمن المحتمل ألا يكون كذلك (ربما يكون كذلك). المضي قدمًا: هل يمكنني نقل هذا إلى الملحق؟ إذا كان كلا السؤالين ينطبقان، فمن المحتمل أن يكون كذلك.
الشعار ليس شخصية
علاوة على ذلك، لا تنطبق الشعارات على الأشكال أيضًا. فيما يلي بعض مقتطفات التعليمات البرمجية الشائعة التي أستخدمها:
<!-- يرجى عدم نسخ هذا الرمز! هذا خطأ--><header> <h1> <figure>  </figure> اسم شركتي </h1 > </header><!-- يرجى عدم نسخ هذا الرمز! وهذا خطأ أيضًا--><header> <figure>  </figure></header>
ليس هناك المزيد ليقوله. وهذا خطأ شائع جداً. يمكننا أن نتجادل مع بعضنا البعض حتى تعود الأبقار إلى المنزل حول ما إذا كان الشعار يجب أن يكون علامة H1، ولكن هذه ليست النقطة هنا. المشكلة الحقيقية هي الإفراط في استخدام عنصر الشكل. يجب أن تكون الأشكال مرجعية فقط داخل المستند، أو محاطة بعناصر القسم. أعتقد أنه من غير المحتمل أن تتم الإشارة إلى شعارك بهذه الطريقة. الأمر بسيط، لا تستخدم الشكل. كل ما عليك فعله هو القيام بذلك:
<header> <h1>اسم شركتي</h1> <!-- المزيد من الأشياء هنا --></header>
الشكل ليس مجرد صورة
هناك مفهوم خاطئ شائع آخر حول الشكل وهو أنه يتم استخدامه فقط عن طريق الصور. يمكن أن يكون الشكل عبارة عن فيديو أو صوت أو مخطط أو اقتباس أو جدول أو رمز أو نثر أو أي مزيج من هذه أو غيرها. لا تقصر الأرقام على الصور. إن مهمة معايير الويب هي وصف المحتوى بدقة باستخدام العلامات.
5. لا تستخدم سمات الكتابة غير الضروريةهذه مشكلة شائعة، ولكنها ليست خطأ، وأعتقد أننا يجب أن نتجنب هذا الأسلوب من خلال أفضل الممارسات.
في HTML5، لم تعد عناصر البرنامج النصي والنمط تتطلب سمة النوع. ومع ذلك، من المحتمل أن تتم إضافة هذه العناصر تلقائيًا بواسطة نظام إدارة المحتوى لديك، لذلك ليس من السهل إزالتها. ولكن إذا كنت تقوم بالبرمجة يدويًا أو لديك سيطرة كاملة على القوالب الخاصة بك، فلا يوجد سبب حقيقي لتضمين سمة النوع. تعتقد جميع المتصفحات أن البرامج النصية هي جافا سكريبت والأنماط هي أنماط CSS، لذلك لا تحتاج إلى القيام بذلك بعد الآن.
<!-- من فضلك لا تنسخ هذا الرمز! إنه زائد عن الحاجة --><link type=text/css rel=stylesheet href=css/styles.css /><script type=text/javascript src=js/ scripts /></سكربت>
في الحقيقة، كل ما عليك فعله هو أن تكتب:
<link rel=stylesheet href=css/styles.css /><script src=js/scripts /></script>
حتى الكود الذي يحدد مجموعة الأحرف يمكن حذفه. يشرح مارك بيلجريم ذلك في فصل علم الدلالات من الغوص في HTML5.
6. الاستخدام غير الصحيح لسمة النموذجيقدم HTML5 بعض السمات الجديدة للنموذج، وإليك بعض الملاحظات حول الاستخدام:
الخصائص المنطقية
بعض عناصر الوسائط المتعددة والعناصر الأخرى لها أيضًا خصائص منطقية. تنطبق نفس القواعد هنا.
بعض سمات النموذج الجديدة هي منطقية، مما يعني أنه طالما أنها تظهر في التسمية، فسيتم ضمان تعيين السلوك المقابل. تشمل هذه الخصائص:
بصراحة، نادراً ما أرى هذا. على سبيل المثال، المتطلبات الشائعة هي كما يلي:
<!-- يرجى عدم نسخ هذا الرمز! --><input type=email name=email require=true /><!-- مثال آخر على الخطأ --><input type=email name = البريد الإلكتروني مطلوب = 1 />
بالمعنى الدقيق للكلمة، هذه ليست مشكلة كبيرة. طالما أن محلل HTML للمتصفح يرى السمة المطلوبة تظهر في علامة، فسيتم تطبيق وظيفتها. ولكن ماذا لو كتبت "required=false" في الاتجاه المعاكس؟
<!-- من فضلك لا تنسخ هذا الرمز! --><input type=email name=email require=false />
سيظل المحلل اللغوي يعامل السمة المطلوبة على أنها صالحة وينفذ السلوك المقابل، حتى لو حاولت إخباره بعدم تنفيذها. ومن الواضح أن هذا ليس ما تريد.
هناك ثلاث طرق صالحة لاستخدام الخصائص المنطقية. (الأخيران صالحان فقط في xthml)
الطريقة الصحيحة لكتابة المثال أعلاه هي:
<نوع الإدخال=اسم البريد الإلكتروني=البريد الإلكتروني مطلوب />تلخيص
ما ورد أعلاه هو ما يقدمه لك المحرر حول كيفية تجنب 6 استخدامات غير صحيحة شائعة لـ HTML5، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!