HTML لغة بسيطة ، لكن مفرداتها أكبر مما قد تدركه. تعرف على كل شيء عن بعض العلامات الأكثر غرابة التي يمكنك استخدامها.

الماخذ الرئيسية

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

بصفتك مطور ويب ، يجب أن تكون على دراية جيدة بعلامات HTML الشائعة مثل, ، و التي تمثل هيكل ومحتوى صفحات الويب الخاصة بك. ومع ذلك ، فإن لغة HTML تقدم أكثر من ذلك بكثير!

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

1.
و

تخيل أن لديك معلومات أو محتوى واسع النطاق لا تريد أن يربك القارئ به على الفور. ال و العلامات تأتي لانقاذ!

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

instagram viewer

يمكن للزائرين النقر بسهولة على الملخص للوصول إلى المعلومات المخفية.

<details>
<summary>Click to reveal more informationsummary>
<p>This content will be hidden by default but will appear when the user
 clicks the summary.p>
details>

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

2.

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

هذه الميزة مفيدة بشكل خاص عندما تريد التأكيد على الكلمات الأساسية أو العبارات المهمة أو نتائج البحث على صفحة الويب الخاصة بك.

<p>
 You can use the <mark>markmark> tag to highlight important words or
 phrases.
p>

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

3.

هل سبق لك أن واجهت مواقف أصبح فيها المحتوى قديمًا أو لم يعد ذا صلة ، ولكنك لا تزال ترغب في عرضه لأغراض تاريخية أو للإشارة إلى التغييرات بمرور الوقت؟

دخول بطاقة شعار! انها تقف ل يتوسطه خط ويعرض أي محتوى داخل العنصر بخط يتوسطه.

<p>
 This product is <s>out-of-stocks> currently available at a discounted
 price!
p>

في هذا المثال ، فإن ملف إنتهى من المخزن سيتم عرض نص يتخلله سطر يشير إلى أن حالة مخزون المنتج قد تغيرت.

4.

عندما تريد إضافة معنى دلالي للتواريخ والأوقات في المحتوى الخاص بك ، فإن ملف العلامة في متناول يدي.

باستخدام التاريخ والوقت السمة ، يمكنك تحديد إصدار قابل للقراءة آليًا للتاريخ أو الوقت ، مما يساعد المتصفحات ومحركات البحث وقارئات الشاشة على فهم السياق.

<p>
 The Declaration of Independence was signed on
<timedatetime="1776-07-04">July 4, 1776time>.
p>

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

5.

قد تكون إدارة النص بلغات متعددة على صفحة الويب الخاصة بك أمرًا صعبًا في بعض الأحيان ، خاصة عندما يتطلب كل جزء تنسيقًا مختلفًا.

ال يتم إنقاذ العلامة عن طريق عزل جزء من النص الذي يجب أن يعامله المتصفح بشكل مختلف بسبب متطلبات اللغة المختلفة.

<p>
<bdi>5,000bdi> people attended the conference.
p>

في هذا المثال ، فإن ملف عنصر يلتف الرقم 5,000. هذا يضمن أنه إذا كان النص المحيط بلغة مختلفة أو يتطلب تنسيقًا مختلفًا ، فلن يتداخل مع الرقم.

6. , ,

بالنسبة لطباعة شرق آسيا ، حيث يتم استخدام أدلة النطق أو furigana أو التعليقات التوضيحية الأخرى بشكل شائع أعلى أو أسفل الأحرف ،, ، و تدخل العلامات في اللعب.

<p>
 I'm learning
<ruby>漢<rt>かんrt>ruby>字<rp>(rp><rt>Kanjirt><rp>)rp>.
p>

في هذا المثال ، فإن ملف يحتوي العنصر على الحرف 漢 (كانجي) و يحتوي العنصر على النطق かん (كان). ال توفر العناصر أقواسًا احتياطية للمتصفحات التي لا تدعم التعليقات التوضيحية ذات الياقوت الأحمر.

7.

عندما يكون لديك كلمات طويلة قد تؤدي إلى تعطل التنسيق الخاص بك ، فإن ملف العلامة هنا للمساعدة. يقترح فرصة لفاصل سطر (فرصة كسر الكلمات) في كلمة طويلة ، حيث قد يختار المتصفح التفاف النص.

<p>
 This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a? query=string.
p>

في المثال أعلاه ، يتضمن عنوان URL الطويل ملف عنصر يتيح للمتصفح تقسيمه إلى سطرين إذا لزم الأمر ، مع الحفاظ على تنسيق المحتوى المحيط.

8. و

بالنسبة إلى الرموز العلمية أو الرياضية ، أو الصيغ الكيميائية ، أو الحواشي السفلية ، يمكنك استخدام و العلامات للنص المنخفض والمرتفع ، على التوالي.

<p>
 The chemical formula for water is H<sub>2sub>O,
 and the Pythagorean theorem is
 a<sup>2sup> + b<sup>2sup> = c<sup>2sup>.
p>

يستخدم هذا المثال الامتداد علامة لعرض 2 في H2O باعتباره منخفضًا ، في حين أن ملف تعرض العلامات الأس في نظرية فيثاغورس.

9.

هل تحتاج إلى تمثيل القياسات العددية ضمن نطاق معروف ، مثل استخدام القرص أو التقييمات أو درجات الاختبار؟ ال لقد جعلتك العلامة مغطاة.

باستخدام قيمة, دقيقة، و الأعلى السمات ، يمكنك تحديد القيمة الحالية ، والحد الأدنى للقيمة ، والحد الأقصى لقيمة القياس ، على التوالي.

<metervalue="75"min="0"max="100">75%meter>

في هذا المثال ، فإن ملف يمثل العنصر درجة امتحان 75%.

10.

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

<dialogopen>
<p>This is a dialog box!p>
<button>Closebutton>
dialog>

في هذا المثال ، يظهر مربع حوار بسيط يحتوي على فقرة وزر إغلاق عند تحميل الصفحة ، وذلك بفضل ملف يفتح يصف. يمكنك تخصيص محتوى مربع الحوار وسلوكه باستخدام JavaScript لمزيد من التفاعلات المتقدمة.

11.

استخدم ال علامة لتجميع الخيارات ذات الصلة داخل ملف عنصر القائمة المنسدلة. يسمح لك بتنظيم الخيارات وتصنيفها لتسهيل التنقل والاختيار.

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

على سبيل المثال:

<select>
<optgrouplabel="Asia">
<optionvalue="kr">South Koreaoption>
optgroup>
<optgrouplabel="Europe">
<optionvalue="de">Germanyoption>
optgroup>
select>

يقوم هذا المثال بتجميع قائمة التحديد المنسدلة في قسمين: آسيا، و أوروبا. تحتوي كل مجموعة على علامات تمثل بلدانًا مختلفة داخل تلك المنطقة.

عزز كفاءتك في تطوير الويب

يمكن أن يؤدي تعلم علامات HTML الأقل شهرة إلى تحسين مهاراتك في تطوير الويب بشكل كبير. على الرغم من عدم اعترافهم ، إلا أنهم يقدمون ميزات قيمة لسياقات محددة.

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