path: root/files/ar/web/html/element/heading_elements/index.html

---
title: '<h1>–<h6>: عناصر العناوين'
slug: Web/HTML/Element/Heading_Elements
translation_of: Web/HTML/Element/Heading_Elements
original_slug: HTML/Element/headings_elements
---
<p dir="rtl"> عناصر <span class="seoSummary"><strong><code>&lt;h1&gt;</code>–<code>&lt;h6&gt;</code></strong></span> تقدم لنا سته مستويات من عناوين الأقسام. حيث أن العنصر<span class="seoSummary"><code>&lt;h1&gt;</code> يمثل العنوان الأعلى مستوى في الأهمية بينما العنصر <code>&lt;h2&gt;</code> هو الأقل.</span></p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">فئات المحتوى </a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, heading content, palpable content.</td>
  </tr>
  <tr>
   <th scope="row">المحتوى المسموح به</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">إغفال الوسوم</th>
   <td>لا شئ، كلاً من وسمّي الفتح والإقفال إجباري</td>
  </tr>
  <tr>
   <th scope="row">الأباء المسموح بهم للعنصر</th>
   <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>; don't use an heading element as a child of the {{HTMLElement("hgroup")}} element — it is now deprecated.</td>
  </tr>
  <tr>
   <th scope="row">Permitted ARIA roles</th>
   <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLHeadingElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 dir="rtl" id="السمات">السمات</h2>

<p dir="rtl">هذه العناصر تتضمن <a href="/en-US/docs/Web/HTML/Global_attributes">السمات العامة</a>.</p>

<div class="note" dir="rtl">
<p>السمة <code>align</code> عفاء عنها الزمن، لا تستخدمها</p>
</div>

<h2 id="ملاحظات_الإستخدام" style="direction: rtl;">ملاحظات الإستخدام</h2>

<ul>
 <li dir="rtl">يمكن إستخدام معلومات العناوين من قبل الـ user agents, على سبيل المثال لإنشاء جدول المحتويات لمستند بشكل تلقائي.</li>
 <li dir="rtl">لا تستخدم عناوين بمستويات منخفضة لتقليل حجم خط العناوين: إستخدم خاصية لغة CSS المسؤولة عن التحكم بأحجام الخطوط <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size">font-size</a> بدلاً من ذلك.</li>
 <li dir="rtl"> تجنب تخطي مستويات العناوين: دائماً إبدا من <code>&lt;h1&gt;</code>، من ثم إستخدم <code>&lt;h2&gt;</code> وهكذا.</li>
 <li dir="rtl">يجب أن تأخذ بعين الإعتبار تجنب إستخدام العنصر &lt;h1&gt; أكثر من مرة في الصفحة. إطلع على <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Defining_sections">تعريف الأقسام</a> في <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">إستخدام الأقسام و وتسلسل العناوين في الـ HTML</a> لمعلومات أكثر.</li>
</ul>

<h2 id="أمثلة" style="direction: rtl;">أمثلة</h2>

<h3 id="جميع_العناوين" style="direction: rtl;">جميع العناوين</h3>

<p style="direction: rtl;">الكود التالي يظهر كل مستويات العناوين، قيد الإستخدام.</p>

<pre class="brush: html">&lt;h1&gt;Heading level 1&lt;/h1&gt;
&lt;h2&gt;Heading level 2&lt;/h2&gt;
&lt;h3&gt;Heading level 3&lt;/h3&gt;
&lt;h4&gt;Heading level 4&lt;/h4&gt;
&lt;h5&gt;Heading level 5&lt;/h5&gt;
&lt;h6&gt;Heading level 6&lt;/h6&gt;
</pre>

<p style="direction: rtl;">هنا نتيجة هذا الكود:</p>

<p>{{ EmbedLiveSample('All_headings', '280', '300', '') }}</p>

<h3 id="مثال_لصفحة" style="direction: rtl;">مثال لصفحة</h3>

<p style="direction: rtl;">الكود التالي يظهر بعض العناوين مع بعض المحتوى بأسفلها.</p>

<pre class="brush: html">&lt;h1&gt;Heading elements&lt;/h1&gt;
&lt;h2&gt;Summary&lt;/h2&gt;
&lt;p&gt;Some text here...&lt;/p&gt;

&lt;h2&gt;Examples&lt;/h2&gt;
&lt;h3&gt;Example 1&lt;/h3&gt;
&lt;p&gt;Some text here...&lt;/p&gt;

&lt;h3&gt;Example 2&lt;/h3&gt;
&lt;p&gt;Some text here...&lt;/p&gt;

&lt;h2&gt;See also&lt;/h2&gt;
&lt;p&gt;Some text here...&lt;/p&gt;
</pre>

<p style="direction: rtl;">هنا نتيجة هذا الكود:</p>

<p>{{ EmbedLiveSample('Example_page', '280', '480', '') }}</p>

<h2 id="سهولة_الوصول" style="direction: rtl;">سهولة الوصول</h2>

<h3 id="التنقل_بين_الأجزاء_والصفحات" style="direction: rtl;">التنقل بين الأجزاء والصفحات</h3>

<p style="direction: rtl;">من الأساليب الشائعة للتنقل بين أجزاء الصفحة من قبل مستخدمي قارئات الشاشات هو القفز من عنوان لأخر لتحديد محتوى الصفحة بشكل سريع. </p>

<p style="direction: rtl;">لهذا السبب، من المهم عدم تخطي أحد مستويات العناوين فالقيام بذلك قد يسبب ارتباك للشخص الذي يقوم بالتنقل بين أجزاء الموقع بهذه الطريقة وربما يترك لدية نوع من الحيرة عن أين هو العنوان المفقود.</p>

<h4 id="لا_تقم_بالتالي" style="direction: rtl;">لا تقم بالتالي:</h4>

<pre class="brush: html example-bad">&lt;h1&gt;Heading level 1&lt;/h1&gt;
&lt;h3&gt;Heading level 3&lt;/h3&gt;
&lt;h4&gt;Heading level 4&lt;/h4&gt;
</pre>

<h4 id="قم_بالتالي" style="direction: rtl;">قم بالتالي:</h4>

<pre class="brush: html example-good">&lt;h1&gt;Heading level 1&lt;/h1&gt;
&lt;h2&gt;Heading level 2&lt;/h2&gt;
&lt;h3&gt;Heading level 3&lt;/h3&gt;
</pre>

<h4 id="تسلسل_العناوين_-_Nesting" style="direction: rtl;">تسلسل العناوين -  Nesting</h4>

<p style="direction: rtl;">قد يتم عمل تسلسل لبعض العناوين لتبدو كعناوين أقسام فرعية لعكس تنظيم محتوى الصفحة. أغلب قارئات الشاشات تستطيع أيضا تكوين قائمة مرتبة لكل العناوين التي في الصفحة، ما قد يساعد الشخص لتحديد التسلسل الهرمي للمحتوى بسرعة :</p>

<ol>
 <li><code>h1</code> Beetles

  <ol>
   <li><code>h2</code> Etymology</li>
   <li><code>h2</code> Distribution and Diversity</li>
   <li><code>h2</code> Evolution
    <ol>
     <li><code>h3</code> Late Paleozoic</li>
     <li><code>h3</code> Jurassic</li>
     <li><code>h3</code> Cretaceous</li>
     <li><code>h3</code> Cenozoic</li>
    </ol>
   </li>
   <li><code>h2</code> External Morphology
    <ol>
     <li><code>h3</code> Head
      <ol>
       <li><code>h4</code> Mouthparts</li>
      </ol>
     </li>
     <li><code>h3</code> Thorax
      <ol>
       <li><code>h4</code> Prothorax</li>
       <li><code>h4</code> Pterothorax</li>
      </ol>
     </li>
     <li><code>h3</code> Legs</li>
     <li><code>h3</code> Wings</li>
     <li><code>h3</code> Abdomen</li>
    </ol>
   </li>
  </ol>
 </li>
</ol>

<p>When headings are nested, heading levels may be "skipped" when closing a subsection.</p>

<ul>
 <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Headings • Page Structure • WAI Web Accessibility Tutorials</a></li>
 <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
 <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html">Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h3 id="Labeling_section_content">Labeling section content</h3>

<p>Another common navigation technique for users of screen reading software is to generate a list of <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">sectioning content</a> and use it to determine the page's layout.</p>

<p>Sectioning content can be labeled using a combination of the <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> and {{htmlattrxref("id")}} attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.</p>

<h4 id="Example">Example</h4>

<pre class="brush: html">&lt;header&gt;
  &lt;nav aria-labelledby="primary-navigation"&gt;
    &lt;h2 id="primary-navigation"&gt;Primary navigation&lt;/h2&gt;
    &lt;!-- navigation items --&gt;
  &lt;/nav&gt;
&lt;/header&gt;

&lt;!-- page content --&gt;

&lt;footer&gt;
  &lt;nav aria-labelledby="footer-navigation"&gt;
    &lt;h2 id="footer-navigation"&gt;Footer navigation&lt;/h2&gt;
    &lt;!-- navigation items --&gt;
  &lt;/nav&gt;
&lt;/footer&gt;
</pre>

<p>In this example, screen reading technology would announce that there are two {{HTMLElement("nav")}} sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each <code>nav</code> element's contents to determine their purpose.</p>

<ul>
 <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li>
 <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby">Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials</a></li>
</ul>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("html.elements.h1")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{HTMLElement("p")}}</li>
 <li>{{HTMLElement("div")}}</li>
 <li>{{HTMLElement("section")}}</li>
</ul>

<div>{{HTMLRef}}</div>