المحتوى في HTML

العناصر الضمنية ذات الدلالات Inline Semantics

عناصر صغيرة تعيش بين الكلمات :)

تقديم

كتب هذا المقال أشرف عبدالدايم مطور واجهة المستخدم في TieLabs سابقاً، 95% من كود CSS الموجود في قالب جنة من كتابة أشرف :)

يمكنك إنشاء أجزاء مربعات النصوص بإستخدام الفقرات النصية <p> والقوائم <ul> و <ol>  و <dl> لكن ماذا لو أردنا تميير بعض الكلمات الموجودة ضمن هذه النصوص وإعطائها مدلول آخر أو أهمية أكثر مما حولها من الكلمات؟

لذلك تحتاج إلى عناصر أخرى، وهذا ما توفره HTML

الكلمات الهامة Strong

لتمييز الكلمات الهامة، استخدم الوسم <strong>

<p>
The Internet is a giant&nbsp;<strong>network</strong>&nbsp;of computers.
</p>

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

الكلمات المشددة Emphasis

لتمييز الكلمات المؤكدة/المشددة، استخدم الوسم <em>

<p>
Don’t use it <em>only</em> to put some text in italic, but rather to give it <em>stress emphasis</em>.
</p>

أيضاً الوسم <em> يجعل الكلمات التي بداخله تظهر بخط مائل (italic)، لكن تذكر أن هذا هو الوضع الإفتراضي لمتصفح الويب، لا تستخدم الوسم <em> فقط لجعل بعض الكلمات تظهر بالخط المائل، بل للدلالة على أن هذة الكلمات كلمات مؤكدة.

الإختصارات Abbreviations

تستخدم لتمييز اختصارات المصطلحات الكبيرة، مثل WWW و IEEE و W3C

<p>
<abbr>W3C</abbr> is an international community that work together to develop Web standards.
</p>

أيضاً يمكنك وضع وصف الإختصار كقيمة للخاصية title يظهر عندما تقوم بتمرير مؤشر الفأرة على الإختصار. كالتالي:

<p>
<abbr title="The World Wide Web Consortium">W3C</abbr> is an international community that work together to develop Web standards.
</p>

الإقتباسات الضمنية Inline Quotes

ذكرنا من قبل العنصر <blockquote>  وهو ضمن النوع block-level وهناك نوع أخر من الإقتباسات من النوع inline-level أي ضمني، يمكنك استخدمه ضمن الكلمات الموجودة في نفس السطر وهو العنصر <q>

<p>
He said <q>Hello World”</q> and just left.
</p>

الأكواد Code

مثل العنصر <code> مجموعة من أكواد الكمبيوتر، تظهر بالخط الإفتراضي لأكواد الكمبيوتر.

<p>This is how we declare a Javascript variable:<br/>
<code>var i = 0;</code>
</p>

الكلمات الصغيرة <small>

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

<p>This is the first sentence. <small>This whole sentence
is in small letters.</small></p>

أشرف عبدالدايم

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