HTML5 | أداة مدقق العلامات غير المغلقة
ملاحظة: عندما لا يتم إغلاق بعض العلامات بشكل صحيح، قد يؤدي ذلك إلى تأثير كرة الثلج حيث يظهر أن العديد من العلامات لم يتم إغلاقها، وفي معظم الأحيان، يكون الجاني موجودًا في النصف السفلي من قائمة الأخطاء، أو في المنتصف، أو بعد العنصر الأخير في قائمة الأخطاء، وإصلاح العلامات (العلامات) غير المغلقة سيؤدي إلى اجتياز المستند بأكمله للتحقق (بافتراض أن الإدخال المقدم هو رمز HTML5 صالح). إذا كان الكود طويلًا، فقد يكون من المفيد أحيانًا تقسيمه إلى أجزاء أصغر لتضييق نطاق العلامات غير المغلقة.
قم بتبسيط ترميز HTML الخاص بك باستخدام أداتنا المتطورة التي تكتشف بسهولة العلامات غير المغلقة، مما يضمن بقاء التعليمات البرمجية الخاصة بك خالية من الأخطاء وعرض صفحات الويب الخاصة بك بشكل مثالي. الصق الكود الخاص بك في المنطقة أعلاه لمعرفة ما إذا كان هناك أي علامات HTML5 غير مغلقة.
HTML5 هو أحدث معيار للغة توصيف النص التشعبي، ويقدم ميزات وقدرات متقدمة لإنشاء محتوى ويب حديث.
يعد الحفاظ على تعليمات HTML البرمجية الخالية من الأخطاء مع العلامات المغلقة بشكل صحيح أمرًا ضروريًا لأداء SEO القوي، وتعزيز إمكانية الوصول إلى موقع الويب، وضمان تجارب مستخدم سلسة.
علامات HTML
يتميز HTML بعلامات مغلقة ذاتيًا للعناصر الموجزة مثل الصور ('<img>') والعلامات العادية التي تحتوي على محتوى، مثل الفقرات ('<p>')، مما يوفر طرقًا متعددة للهيكل محتوى الويب.
العلامات المغلقة ذاتيا
- '<area />': يحدد منطقة قابلة للنقر داخل خريطة الصورة.
- '<base />': يحدد عنوان URL الأساسي لعناوين URL النسبية في المستند.
- '<br />': لإدراج فاصل أسطر داخل النص أو المحتوى.
- '<circle />': يحدد مسار الدائرة داخل SVG (رسومات متجهة قابلة للتحجيم).
- '<col />': يحدد خصائص العمود لجداول HTML.
- '<embed />': تضمين محتوى خارجي، مثل الوسائط المتعددة أو المكونات الإضافية.
- '<hr />': إنشاء فاصل موضوعي أو خط أفقي.
- '<img />': يقوم بتضمين صورة في المستند.
- '<input />': يحدد عنصر إدخال المستخدم.
- '<link />': يربط الموارد الخارجية مثل أوراق الأنماط أو الرموز.
- '<meta />': يوفر بيانات تعريفية حول المستند.
- '<param />': يحدد معلمات المكونات الإضافية داخل عناصر الكائن.
- '<path />': يحدد مسارًا متجهًا داخل SVG (رسومات متجهة قابلة للتحجيم).
- '<source />': يحدد موارد الوسائط المتعددة لعناصر الوسائط المتعددة.
- '<track />': يوفر مسارات نصية لعناصر الوسائط مثل '<video>' أو '<audio>'.
- '<wbr />': يحدد فرصة فاصل الكلمات داخل النص.
- '<command />': يحدد زر الأمر ضمن menu.
- '<keygen />': يقوم بإنشاء زوج المفاتيح للنماذج المستخدمة في التشفير.
- '<menuitem />': يحدد عنصرًا داخل '<menu>'.
- '<frame />': يحدد نافذة فرعية (مهملة في HTML5).
العلامات العادية
- '<p>': يحدد فقرة.
- '<h1> to <h6>':عناوين من مستويات مختلفة.
- '<strong>': يمثل أهمية قوية.
- '<em>': يمثل النص الذي تم التركيز عليه.
- '<mark>': يسلط الضوء على النص كمرجع.
- '<abbr>': تعريف الاختصار.
- '<blockquote>': يمثل اقتباس كتلة.
- '<ul>': يحدد قائمة غير مرتبة.
- '<ol>': يحدد قائمة مرتبة.
- '<li>': يمثل عنصر القائمة.
- '<dl>': يحدد قائمة الوصف.
- '<dt>': يمثل مصطلحًا في قائمة الوصف.
- '<dd>': يمثل وصفًا في قائمة الوصف.
- '<a>': يحدد الارتباط التشعبي.
- '<nav>': يمثل روابط التنقل.
- '<audio>': تضمين المحتوى الصوتي.
- '<video>': تضمين محتوى الفيديو.
- '<form>': يحدد نموذج HTML.
- '<textarea>': لإنشاء إدخال نص متعدد الأسطر.
- '<select>': إنشاء قائمة منسدلة.
- '<button>': يحدد زرًا قابلاً للنقر.
- '<table>': يحدد جدول HTML.
- '<thead>': يحدد رأس الجدول.
- '<tbody>': تحديد المحتوى الأساسي للجدول.
- '<tr>': يحدد صف الجدول.
- '<th>': يحدد خلية رأس الجدول.
- '<td>': يحدد خلية بيانات الجدول.
- '<caption>': يوفر تسمية توضيحية للجدول.
- '<div>': يحدد حاوية عامة.
- '<span>': يحدد النص ذو النمط المضمن.
- '<header>': يمثل رأس المستند أو القسم.
- '<footer>': يمثل مستندًا أو تذييلًا للقسم.
- '<section>': يمثل مجموعة مواضيعية للمحتوى.
- '<article>': يمثل جزءًا مستقلاً من المحتوى.
- '<aside>': يمثل المحتوى المرتبط بشكل عرضي بالمحتوى المحيط.
- '<button>': يحدد زرًا قابلاً للنقر.
- '<details>': يمثل القطعة الكشف.
- '<summary>': يوفر ملخصًا لعنصر '<details>'.
- '<object>': تضمين محتوى أو موارد خارجية.
- '<iframe>': تضمين سياق تصفح متداخل.
- '<canvas>': يدمج الرسومات عبر البرمجة النصية.
- '<svg>': يتضمن رسومات متجهة قابلة للتطوير.
- '<math>': يدمج المعادلات الرياضية.
- '<time>': يمثل وقتًا أو نطاقًا محددًا.
- '<address>': يمثل معلومات الاتصال.
- '<code>': يمثل نص رمز الكمبيوتر.
- '<pre>': يمثل نصًا منسقًا مسبقًا.
- '<fieldset>': مجموعات عناصر النموذج ذات الصلة.
- '<legend>': يوفر تسمية توضيحية لـ '<fieldset>'.
- '<ruby>': يمثل التعليقات التوضيحية للطباعة في شرق آسيا.
- '<rt>': يمثل نطق الأحرف في عنصر '<ruby>'.
لاحظ أن القوائم أعلاه تتضمن فقط بعض علامات HTML الشائعة ذاتية الإغلاق وغير ذاتية الإغلاق (العادية)، ولكن هناك العديد من العلامات المتوفرة في HTML5 لأغراض مختلفة.
قائمة المصطلحات
- التحقق من كود HTML للعلامات غير المغلقة: الزر الذي يقوم بتشغيل عملية التحقق.
- السطر: النص الذي يسبق رقم (أسطر) السطر، حيث تم اكتشاف العلامات (العلامات) التي لا تحتوي على نظيرات إغلاق.
- لم يتم اكتشاف أي علامات غير مغلقة.: الرسالة التي تظهر عند إغلاق كافة علامات HTML بشكل صحيح.
- الصق كود HTML الخاص بك هنا...: المنطقة التي ينتقل إليها كود HTML، للتحقق من العلامات غير المغلقة/المفقودة.
- لا يبدو أن العلامة التالية مغلقة: في حالة وجود علامة واحدة غير مغلقة في الكود.
- لا يبدو أن العلامات التالية مغلقة: في حالة وجود علامتين غير مغلقتين أو أكثر في الكود.
خاتمة
يعد إغلاق علامات HTML بشكل صحيح ذا أهمية قصوى في تطوير الويب. تعمل كل علامة بمثابة تعليمات مهمة للمتصفحات لتفسير المحتوى وعرضه بدقة. يمكن أن يؤدي إهمال إغلاق العلامات إلى مشكلات تخطيط غير مقصودة، وتفسير خاطئ للمحتوى، وتجارب مستخدم غير متناسقة عبر الأجهزة والمتصفحات المختلفة. لا يضمن هذا الاهتمام الدقيق بالتفاصيل واجهة مستخدم سلسة وممتعة بصريًا فحسب، بل يدعم أيضًا إمكانية الوصول و تحسين محرك البحث. من خلال الالتزام بأفضل الممارسات المتمثلة في إغلاق علامات HTML، يحافظ المطورون على سلامة التعليمات البرمجية الخاصة بهم، ويعززون مواقع الويب الموثوقة، والتي يمكن الوصول إليها، وسهلة الاستخدام والتي تنقل المعلومات بشكل فعال مع الحفاظ على عرض تقديمي مرئي متسق.