html b tag

<b> </b>

b هي اختصار ل bold وتعنى سَميك وبالتالي المُحتوى داخل هذا العنصر يكون بخط سميك عن بقية النص .

html strong tag

<strong> </strong>

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

html i tag

<i> </i>

i هي اختصار ل italic وتعنى مائل وبالتالي المُحتوى داخل هذا العنصر يكون بخط مائل عن بقية النص

html em tag

<em> </em>

أيضا المُحتوى بداخل هذا العنصر يكون ذو خط مائل بالإضافة الى ان المُحتوى داخل هذا العنصر يُعتبر محتوى مهم عن باقي النص

html mark tag

<mark> </mark>

المُحتوى داخل هذا العنصر يكون ذو خلفية مُميزة وغالبا تكون صفراء ويُمكن تغيير لونها ب اكواد لغة CSS وكما ترى اللون هنا احمر

html small tag

<small> </small>

المُحتوى داخل هذا العنصر يكون بخط أصغر عن بقية النص

html del tag

<del> </del>

Del هي اختصار ل delete وتعنى ان المُحتوى بداخل هذا العنصر تم حذفة وذلك بوضع خط على المُحتوى الذى بداخل هذا العنصر

html ins tag

<ins> </ins>

Ins هي اختصار ل insert وتعنى إدراج وتعنى ان المُحتوى بداخل هذا العنصر تم إضافته وذلك
بوضع خط أسفل المُحتوى الذي بداخل هذا العنصر

html sub tag

<sub> </sub>

Sub هي اختصار ل subscript وتعنى نص _منخفض
وأكثر استخداماتها عند كتابة الصيغ الكيمائية مثل co ₂
مثال على ذلك:

 
<p> co<sub>2</sub> </p>

html sup tag

<sup> </sup>

Sub هي اختصار ل superscript وتعنى نص ^مُرتفع
واكثر استخداماتها عند كتابة الاس في الرياضيات مثل 4³
مثال على ذلك:

 
<p> 4<sup>3</sup> </p> 

html abbr tag

<abbr> </abbr>

Abbr هي اختصار ل abbreviation وترجمتها اختصار وبالتالي المُحتوى بداخلها هو اختصار لشيء ما
ولها attributes خاص بها هو title
مثال على ذلك:
عندما نريد ان نكتب HTML فهذا اختصار ل Hyper Text Markup Language
مثال على ذلك:

 
<P>
  Tim Berners-Lee invented <abbr title="Hyper Text Markup Language">HTML</abbr> language
</P> 

html address tag

<address> </address>

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

 
<address>
  Written by ali hassan <br>
  Visit us at: courses4arab.com <br>
  Cairo <br>
  Egypt
</address> 

html bdi tag

<bdi> </bdi>

Bi اختصار ل Bi-Directional Isolation ومعناها انها تقوم ب تغيير اتجاه المحتوى الذى بداخلها
وتستخدم كثيرا عند كتابة اللغة العربية والإنجليزية في نفس الصفحة لان اللغة العربية تُكتب من اليمين لليسار ولكن اللغة الإنجليزية تُكتب من اليسار الى اليمين
مثال على ذلك:

 
<!-- لازم تجرب بنفسك عشان تفهمه -->
<p> على : 90 % </p>
<p> <bdi>على</bdi>: 90 % </p> 

html bdo tag

<bdo> </bdo>

Bdo اختصار ل Bi-Directional Override و معناها انها تقوم ب عكس اتجاه النص وذلك باستخدام attribute يُسمى dir وهو اختصار ل direction وله قيمتان هما:

• ltr : وهى اختصار ل left to right وتعنى عكس النص من اليسار الى اليمين
• rtl : وهى اختصار ل right to left وتعنى عكس النص من اليمين الى اليسار

 
<p>
    <bdo dir="rtl">ali</bdo> VS ali
</p> 

html blockquote tag

<blockquote> </blockquote>

quote ترجمتها اقتباس و block ترجمتها كُتله
وبالتالي المُحتوى داخل هذا العنصر يكون اقتباس طويل من موقع اخر وبالتالي نستخدم له attribute خاص به يُسمى cite والقيمة بداخل هذا ال attribute تكون عبارة عن رابط الموقع الذى يحتوى على الاقتباس
مثال على ذلك:

 
<blockquote cite="https://www.w3.org/TR/html52/introduction.html#introduction-history">
    With the creation of the W3C, HTML’s development changed venue again. A first abortive attempt at extending HTML in 1995 known as HTML 3.0 then made way to a more pragmatic approach known as HTML 3.2, which was completed in 1997. HTML 4.01 quickly followed
    later that same year.
</blockquote> 

html q tag

<q> </q>

q اختصار ل quotation وتعنى اقتباس
ولكن اقتباس قصير
ويُمكن ايضا اضافة cite attribute الى هذا العنصر
مثال على ذلك:

 
<q cite="https://www.awakenthegreatnesswithin.com/35-inspirational-quotes-on-patience/">
  Stay patient and trust the journey.
</q> 

html cite tag

<cite> </cite>

cite ترجمتها: يستشهد بقول شخص
والمُحتوى بداخل هذا العنصر يكون عبارة عن عمل قام به شخص مثل اسم كتاب او اغنية او فيلم او لوحة فنية او نحت
مثال على ذلك:

 
<p>
    <cite>Rich Dad Poor Dad </cite> is a 1997 book written by Robert Kiyosaki and Sharon Lechter.
</p>

html code tag

<code> </code>

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

html pre tag

<pre> </pre>

Pre هي اختصار ل preformatted وتعنى ان العنصر تم تنسيقة مسبقا.
ويُستخدم كثيرا مع وسم <code> لأننا عندما نقوم بعرض كود على الموقع ك كود نقوم بتنسيقة مسبقا
مثال على ذلك:

 
<!-- python code -->
<pre>
  <code> 
  if b > a:
    print("b is greater than a")
  else:
    print("a is greater than b")
  </code>
</pre>

html dfn tag

<dfn> </dfn>

dfn هي اختصار ل define او definition وترجمتها تعريف
والمُحتوى بداخل هذا العنصر يكون تقريبا كلمة او كلمتين يتم شرحهم بعد ذلك فى الجملة القادمة.
مثال على ذلك:

 
<p>
    <dfn>Django </dfn> is a Python-based free and open-source web framework.
</p>

html Kbd tag

<Kbd> </Kbd>

Kbd اختصار ل Keyboard
ونستخدمها عندما نريد كتابة امر من اومر الكيبورد keyboard input يحتاج الى شرح او توضيح مثل ctrl+s وبالتالي ctrl+s يتم وضعها داخل هذا العنصر.
مثال على ذلك:

 
<p>
    Most applications let you press <kbd>Ctrl+S</kbd> to save the current document
</p>

html samp tag

<samp> </samp>

Samp هي اختصار ل sample وترجمتها عينه او نموذج.
وتُستخدم لعرض عينه من مُخرجات برنامج كمبيوتر Sample output from a computer program
مثال على ذلك أحيانا نواجه مشكله عند فتح الكمبيوتر فتظهر هذه الرسالة Press F1 to continue؛ هذا المُحتوى يتم وضعة داخل هذا العنصر
مثال على ذلك:

 
<p>
    The <samp> press F1 to continue </samp> error is commonly caused by a device being added to the server and not enabled
</p> 

html meter tag

<meter> </meter>

Meter ترجمتها اله قياس
ولديه ثلاث attributes أساسيين هم:

• min وهي أصغر قيمة يمكن ان يصل اليها العنصر
• max وهي أكبر قيمة يمكن ان يصل اليها العنصر
• value وهي القيمة الحالية للعنصر

ونستخدمها عندما يكون لدينا بيانات قابلة للقياس في نطاق معين (range) بمعنى اننا نعلم بداية ونهاية هذا النطاق

 
<meter min="0" max="10" value="2"> </meter> 

html progress tag

<progress> </progress>

وترجمتها في تقدم
واستخدامها: عندما يكون لديك مهمة معينه جارى العمل عليها وقد انهيت مثلا 30% من هذه المهمة فهذا هو الوسم المناسب لتمثيل هذه المهمة. لذلك دائما ما يُستخدم هذا الوسم عندما تريد تحميل ملف ف إنك ترى هذا ال progress bar الذي يُعطى لك مؤشر لعملية التحميل الذي تقوم بها.
ويُستخدم كثيرا عند عمل progress bar
ولديه اثنان attributes أساسيين هم:

• max : وهي القيمة النهائية التي يُمكن ان يصل اليها العنصر
• value : وهي القيمة الحالية للعنصر

 
<progress value="30" max="100"></progress> 

html s tag

<s> </s>

s اختصار ل strikethrough وترجمتها يتوسطه خط
والمُحتوى بداخل هذا العنصر كان صحيحا ولكن في الماضي؛ والان هذه المعلومات بداخل هذا العنصر لم تعد صحيحه.
ويتم وضع خط في منتصف المُحتوى الذي بداخله.
مثال على ذلك:

 
<p>
    my car's color is <s> white</s> gray
</p>

html template tag

<template> </template>

Template ترجمتها قالب
وهذا العنصر يحتوي على مجموعة من الوسوم؛ وجميع محتويات هذا العنصر تكون مخفيه ولا تظهر لزائر الموقع مباشرة.
ودائما نستخدم لغة JavaScript لإظهار هذا العنصر عندما يقوم زائر الموقع بعمل فِعل معين داخل الموقع.
مثال على ذلك:

 
<template>
    <h1>heading</h1>
    <p>content ... </p>
</template> 

html time tag

<time> </time>

Time ترجمتها وقت.
وبالتالي هذا العنصر يُستخدم عندما نريد كتابة وقت معين فيجب عليك استخدام هذا العنصر.
مثال على ذلك

html u tag

<u> </u>

u اختصار ل Underline وترجمتها وضع خط تحت شيء ما.
ونستخدم هذا العنصر فقط لوضع خط تحت المُحتوى الذي بداخله وهو ليس له معنى.
مثال على ذلك:

html var tag

<var> </var>

Var هي اختصار ل variable وترجمتها مُتغير.
وتستخدم عندما يكون لدينا معادلة رياضية وبها متغيرات مثل x و y
مثال على ذلك:

 
<h1>find X </h1>
<p>
    <var>X</var> = <var>y</var> + 2 <br>
    <var>y</var> = 2<var>X</var> + 4
</p> 

html wbr tag

<wbr> </wbr>

Wbr هي اختصار ل Word Break وتعنى فاصل للكلمة.
هذا العنصر نادر الاستخدام؛ ولكن يُستخدم عندما تكون الكلمة طويلة جدا وتخشى ان هذه الكلمة تخترق المساحة التي بداخلها.
وإذا أردنا فعلا عملا ذلك فإننا نستخدم خاصية في لغة ال CSS لعمل ذلك بدلا من استخدام هذا العنصر تُسمى word-break