اتش.تي.إم.إل الدلالية

أ. متى يجب استخدام عنصر التأكيد The Emphasis Element بدلًا من عنصر النص الاصطلاحي The Idiomatic Text Element ؟

ترتبط هذه العناصر ارتباطًا وثيقًا بمفاهيم The concepts "اتش.تي.إم.إل" العرضية Presentational HTML والدلالية Semantic HTML. استُخدم عنصر النص الاصطلاحي The idiomatic text ، i ، في الأصل "لأغراض العرض" for presentational purposes لعرض النص بخط مائل italics. أما الآن، فيُستخدم بكثرة لإبراز أسلوب mood أو حالة بديلة alternative voice، أو مصطلحات اصطلاحية idiomatic terms من لغة أخرى، أو مصطلحات تقنية technical terms، أو أفكار thoughts.

فيما يلي مثال من مواصفات "اتش.تي.إم.إل" الرسمية The Official HTML، باستخدام عنصر i لإظهار عبارة اصطلاحية an idiomatic phrase باللغة الإنجليزية:

<p>.في الهواء<i lang="en"> I don't know what </i>هناك شيء معين</p>
			

تُستخدم سمة اللغة lang داخل وسم <i> المفتوح لتحديد لغة المحتوى. في هذه الحالة، اللغة هي الانجليزية. لا يُشير عنصر i إلى أهمية النص، بل يُظهر فقط اختلافه somehow different عن النص المحيط به from the surrounding text.

إذا كنتَ بحاجةٍ إلى التأكيد to emphasize على أهمية النص، يمكنكَ استخدام عنصرٍ دلاليٍّ مشابه a similar semantic element يُسمى عنصر التوكيد The Emphasis Element ، em . يُنصح عادةً بهذا العنصر إذا كنتَ بحاجةٍ إلى توفير سياقٍ أوسع. يُنصح باستخدامه لأجزاء النص التي تتطلب توكيدًا خاصًا special emphasis مقارنةً بالنص المحيط. عادةً ما يقتصر استخدامه على بضع كلماتٍ فقط، لأنه قد يُغيّر معنى الجملة.

هذا مثال لعنصر التأكيد The emphasis element داخل الفقرة:

<p>
	<em>.أحلامك</em> لا تتخلى أبدًا عن
</p>
			

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

حتى لو كان يبدو الأمر نفسه عندما كان النص داخل عنصر النص الاصطلاحي The idiomatic text element، فإن عنصر التأكيد الدلالي The semantic emphasis element ينقل معناه وأهميته خلف الكواليس the scenes.

من المهم معرفة أن هذه العناصر لا تُستخدم لأغراض العرض presentational purposes فقط. إذا كنتَ بحاجة لعرض النص بخط مائل italics، ولكن ليس للنص غرض purpose أو نمط style أو معنى خاص a special meaning في الفقرة، فعليك استخدام CSS.

ب. متى يجب استخدام عنصر التشديد القوي The Strong Element بدلًا من عنصر لفت الانتباه The Bring Attention To Element ؟

يُستخدم عنصر "لفت الانتباه إلى" bring attention to , b عادةً لتسليط الضوء على الكلمات الرئيسية في الملخصات، أو أسماء المنتجات في المراجعات. عادةً ما تعرض المتصفحات browsers هذا النص بخط عريض boldface.

فيما يلي مثال لاستخدام عنصر b لتسليط الضوء على أسماء المنتجات في هذه المراجعة:

<p>
	،لجودة الصوت <b>SuperSound 3000</b> لقد قمنا باختبار العديد من المنتجات، بما في ذلك 
	،للشحن السريع <b>QuickCharge Pro</b>
	.للتنظيف <b>EcoClean Vacuum</b> ومكنسة
	.لم يلبِّ التوقعات <b>EcoClean Vacuum</b> لقد حقق الجهازان الأولان أداءً جيدًا، ولكن جهاز
</p>
			

يعرض المتصفح browser هذه الأجزاء من النص بخط عريض bold text. هذا التركيز البصري This visual emphasis يجذب انتباه القراء إلى أسماء المنتجات.

إذا كنت بحاجة إلى التأكيد to emphasize على أهمية النص، فيجب عليك استخدام العنصر strong بدلاً من عنصر b.

strong هو عنصر "اتش.تي.إم.إل" دلالي a semantic HTML element يسلط الضوء على النص الذي يعتبر بالغ الأهمية Crucial أو عاجلاً Urgent.

هذا مثال حيث يتم استخدام العنصر strong لوضع علامة على تحذير مهم للغاية بشأن ردود الفعل التحسسية المحتملة The potential allergic reactions التي قد يعاني منها العملاء Customers تجاه منتج ما:

<p>
	.قد يسبب هذا المنتج ردود فعل تحسسية <strong>:تحذير</strong>
</p>
			

العنصر strong ينقل هذا الشعور بالإلحاح.

كلاهما متشابهان بصريًا Visually، لأنهما يُعرَضان بخط عريض bold افتراضيًا by default. لكن معانيهما مختلفة تمامًا. فبينما يلفت عنصر "لفت الانتباه" bring attention to الانتباه إلى النص فقط، دون الإشارة إلى مستوى أهميته، فإن العنصر strong يفعل أكثر من ذلك. فهو ينقل شعورًا بالأهمية أو الإلحاح. وهذا هو الفرق الرئيسي بينهما.

ولكي تختار بينهما، عليك أن تأخذ بعين الاعتبار غرض النص The purpose of the text وأهميته Its importance ضمن المحتوى المحيط به.

ج. ما هي قوائم الوصف Description Lists، ومتى يجب استخدامها؟

تعتبر قوائم الوصف Description lists مثالية لتقديم المصطلحات terms والتعريفات definitions بتنسيق منظم organized وسهل القراءة، كما هو الحال في المسرد a glossary أو القاموس الحقيقي، حيث يمكنك العثور على الكلمات مع تعريفاتها المقابلة.

هذا مثال لقائمة وصف description list في "اتش.تي.إم.إل" HTML تحتوي على مصطلحين وتفاصيلهما المقابلة:

<dl>
	<dt>HTML اتش.تي.إم.إل</dt>
	<dd>HyperText Markup Language لغة ترميز النص الفائق</dd>
	<dt>CSS سي.أس.أس</dt>
	<dd>Cascading Style Sheets أوراق الأنماط المتتالية</dd>
</dl>
			

في هذه الحالة، المصطلحان هما اختصارا "اتش.تي.إم.إل" HTML و"سي.أس.أس" CSS، والتفاصيل هي امتدادات لهما their expansions. قد تكون التفاصيل أيضًا تعريفات أو معلومات أخرى متعلقة بالمصطلحين.

ستحتاج إلى ثلاثة عناصر "اتش.تي.إم.إل" HTML لتعريف قائمة وصف description list. أولًا، عنصر قائمة الوصف، dl، وهو الحاوية the container للقائمة بأكملها. كما هو موضح في المثال، فهو يلتف حول جميع عناصر قائمة الوصف الأخرى.

ثم، عنصر وصف واحد description term dt، لكل مصطلح. في هذه الحالة، تحتوي قائمة الوصف description list على مصطلحين، "اتش.تي.إم.إل" HTML و "سي.أس.أس" CSS، لذا فهي تحتوي على عنصرين منهما.

وأخيرًا، بعد كل مصطلح، ستجد عنصر "وصف التفاصيل" description detail، dd، للوصف أو التفاصيل المرتبطة به. في هذا المثال، هذه هي لغة ترميز النص الفائق وأوراق الأنماط المتتالية.

في المتصفح In the browser، ستجد كل مصطلح each term متبوعًا بوصفه. افتراضيًا By default، تكون الأوصاف متباعدة قليلاً نحو اليمين لتمييزها بصريًا.

لكن "قوائم الوصف" Description lists لا تقتصر على المصطلحات والتعريفات فحسب، بل هي أكثر تنوعًا من ذلك بكثير.

لدينا هنا وصفة مكونة من ثلاثة مكونات three ingredients:

<dl>
	<dt>دقيق</dt>
	<dd>كوبان</dd>
	<dt>سكر</dt>
	<dd>نصف كوب</dd>
	<dt>زيت نباتي</dt>
	<dd>ملعقتان كبيرتان</dd>
</dl>
			

قائمة الوصف الكاملة The entire description list موجودة ضمن عنصر قائمة الوصف description list element. المكون الأول، دقيق، موجود ضمن عنصر" مصطلح الوصف" description term element. بعد ذلك، يمكنك معرفة الكمية المطلوبة من هذا المكون: كوبان. هذا موجود ضمن عنصر "تفاصيل الوصف" description details element مباشرةً بعد مكوناته المقابلة.

في المتصفح In the browser، سوف ترى المكونات محاذية إلى اليسار، والقياسات متباعدة indented لفصلها بصريًا visually.

تشمل حالات الاستخدام الأخرى لقوائم الوصف description lists مواصفات المنتج product specifications، والأسئلة الشائعة frequently asked questions، ومعلومات الاتصال contact information، والبيانات الوصفية metadata. في الأساس، عندما يكون لديك معلومتان مرتبطتان في صيغة مفتاح-قيمة key-value، حيث تعمل إحداهما كعلامة "المفتاح" the key، والأخرى كمعلومات إضافية ذات صلة "القيمة" the value، يمكنك استخدام قائمة وصف description list.