عرض مصدر HTML/span

<noinclude>{{DISPLAYTITLE:العنصر <code>&lt;span&gt;</code>}}</noinclude>
العنصر <code><nowiki><span></nowiki></code> هو حاوية سطرية (inline container) عامة، والتي لا تُمثِّل نوعًا معيّنًا من المحتوى، ويمكن أن تستعمل تجميع العناصر من أجل التنسيق (إما باستخدام الخاصية <code>id</code> أو <code>class</code>) أو لأن تلك العناصر تتشارك في خاصيةٍ ما مثل الخاصية <code>lang</code>.

لا يجب أن يستعمل هذا العنصر إلا إذا لم يكن أيُّ عنصرٍ آخر مناسبًا؛ إذ إنَّ العنصر <code><nowiki><span></nowiki></code> يشبه العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> كثيرًا، لكن العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> هو عنصر كتلي (block-level element) بينما العنصر <code><nowiki><span></nowiki></code> هو عنصر سطري (inline element).

مثال عن استخدام العنصر <code><nowiki><span></nowiki></code> داخل فقرة (العنصر <code>[[HTML/pre|<nowiki><p></nowiki>]]</code>):
<syntaxhighlight lang="html">
<p><span>محتوى نصي</span></p>
</syntaxhighlight>مثال آخر يستعمل العنصر <<code>span></code> لاحتواء رابط مع إضافة الخاصية <code>class</code> إليه لتنسيقه لاحقًا:<syntaxhighlight lang="html">
<li>
  <span class="link">
    <a href="#">HTML</a>
  </span>
</li>
</syntaxhighlight>شيفرة CSS لتنسيق العنصر <code><nowiki><span></nowiki></code> السابق:<syntaxhighlight lang="css">
.link {
  background-color: #F0F0F0;
}
</syntaxhighlight>
{{Course|course=frontend}}
__TOC__
== بطاقة العنصر ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" | تصنيفات المحتوى
| عنصر تنظيمي أو عنصر عادي.
|-
! scope="row" | المحتوى المسموح
| محتوى عادي.
|-
! scope="row" | الوسم المختصر
| لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
|-
! scope="row" | العناصر الأب
| أي عنصر يقبل المحتوى العادي.
|-
! scope="row" | واجهة DOM
| <code>HTMLSpanElement</code>
|}
== دعم المتصفحات ==
{| class="wikitable" style="width: 50%;"
 !| Chrome
 ! Firefox
 ! Edge
 ! Safari
 ! Opera
|-
|مدعوم
|مدعوم
|مدعوم
|مدعوم
|مدعوم
|}

== الخاصيات ==
يمكن استخدام [[HTML/Global Attributes|الخاصيات العامة]] في هذا العنصر.

==مصادر ومواصفات==
*معيار [https://html.spec.whatwg.org/multipage/semantics.html#the-span-element HTML Living Standard].
*مواصفة [http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element HTML5]، تحولت واجهة DOM من <code>HTMLElement</code> إلى <code>HTMLSpanElement</code>.
*مواصفة [http://www.w3.org/TR/html401/struct/global.html#edef-SPAN HTML 4.01].
[[تصنيف:HTML|{{SUBPAGENAME}}]]
[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
[[تصنيف:HTML Inline text semantics|{{SUBPAGENAME}}]]