freeCodeCamp

12 KiB

Raw Blame History

title	localeTitle
HTML5 Semantic Elements	عناصر دلالية HTML5

عناصر دلالية HTML5

تصف عناصر HTML الدلالية بوضوح معنى ذلك بطريقة بشرية وآلية قابلة للقراءة. تعتبر العناصر مثل <header> و <footer> و <article> جميعًا دلالية لأنها تصف بدقة الغرض من العنصر ونوع المحتوى الموجود فيه.

تاريخ سريع

تم إنشاء HTML في الأصل كلغة ترميزية لوصف المستندات على الإنترنت المبكر. مع نمو الإنترنت واعتماده من قبل المزيد من الأشخاص ، تغيرت احتياجاته. حيث تم تنويع الإنترنت في الأصل لمشاركة المستندات العلمية ، أراد الأشخاص الآن مشاركة أشياء أخرى أيضًا. وبسرعة كبيرة ، بدأ الناس يرغبون في جعل الويب يبدو أجمل. نظرًا لأن الويب لم يتم تصميمه في الأساس ليتم تصميمه ، استخدم المبرمجون الاختراقات المختلفة للحصول على أشياء تم وضعها بطرق مختلفة. بدلاً من استخدام <table></table> لوصف المعلومات باستخدام جدول ، سيستخدمها المبرمجون لوضع عناصر أخرى على الصفحة. مع تقدم استخدام التخطيطات المصممة بصريًا ، بدأ المبرمجون في استخدام علامة "غير دلالية" عامة مثل <div> . كانوا في كثير من الأحيان يعطيون هذه العناصر سمة class أو id لوصف غرضهم. على سبيل المثال ، بدلاً من <header> ، غالبًا ما تمت كتابة هذا كـ <div class="header"> . نظرًا لأن HTML5 لا يزال جديدًا نسبيًا ، فإن هذا الاستخدام للعناصر غير الدلالية لا يزال شائعًا جدًا على مواقع الويب اليوم.

قائمة العناصر الدلالية الجديدة

العناصر الدلالية المضافة في HTML5 هي:

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

تعمل عناصر مثل <header> و <nav> و <section> و <article> و <aside> و <footer> بشكل أو بآخر مثل عناصر <div> . يجمعون عناصر أخرى معًا في أقسام الصفحة. ومع ذلك ، حيث يمكن أن تحتوي العلامة <div> على أي نوع من المعلومات ، يكون من السهل تحديد نوع المعلومات التي ستذهب في المنطقة <header> الدلالية.

مثال على تخطيط العنصر الدلالي عن طريق w3schools

فوائد العناصر الدلالية

للنظر في فوائد العناصر الدلالية ، وهنا قطعتين من رمز HTML. يستخدم هذا الكود الأول من التعليمة البرمجية العناصر الدلالية:

بينما يستخدم هذا الكود الثاني من التعليمات البرمجية عناصر غير دلالية:

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

لديها إمكانية وصول أكبر . أنت لست الوحيد الذي يجد العناصر الدلالية أسهل في الفهم. يمكن لمحركات البحث والتقنيات المساعدة (مثل قارئات الشاشة للمستخدمين الذين يعانون من ضعف البصر) أيضًا فهم السياق ومحتوى موقعك على الويب بشكل أفضل ، مما يعني تجربة أفضل للمستخدمين.

بشكل عام ، تؤدي العناصر الدلالية أيضًا إلى رمز أكثر تناسقًا . عند إنشاء رأس باستخدام عناصر غير دلالية ، قد يكتب المبرمجون المختلفون هذا كـ <div class="header"> أو <div id="header"> أو <div class="head"> أو ببساطة <div> . هناك العديد من الطرق التي يمكنك من خلالها إنشاء عنصر رأس ، وكلها تعتمد على التفضيل الشخصي للمبرمج. من خلال إنشاء عنصر الدلالية الدلالية ، فإنه يجعل من السهل على الجميع.

منذ تشرين الأول 2014 ، تم ترقية HTML4 إلى HTML5 ، إلى جانب بعض العناصر "الدلالية" الجديدة. وحتى يومنا هذا ، قد لا يزال البعض منا مرتبكًا بشأن سبب ظهور العديد من العناصر المختلفة التي لا تظهر أي تغييرات كبيرة.

`<section>` و `<article>`

"ما الفرق؟" ، قد تسأل. كلا هذين العنصرين يستخدمان لتقسيم المحتوى ، ونعم ، يمكن بالتأكيد استخدامهما بالتبادل. انها مسألة في أي وضع. عرض HTML4 نوعًا واحدًا فقط من عناصر الحاوية ، وهو <div> . في حين أن هذا لا يزال مستخدمًا في HTML5 ، فإن HTML5 قد زودنا <section> و <article> بطريقة لاستبدال <div> .

The <section> و <article> العناصر متشابهة من الناحية المفاهيمية وقابلة للتبادل. لتحديد أيها يجب عليك اختيار ، قم بتدوين ما يلي:

تهدف المقالة إلى أن تكون قابلة للتوزيع أو القابلة لإعادة الاستخدام بشكل مستقل.
القسم هو تجميع موضوعي للمحتوى.

<section>
  <p>Top Stories</p>
  <section>
    <p>News</p>
    <article>Story 1</article>
    <article>Story 2</article>
    <article>Story 3</article>
  </section>
  <section>
    <p>Sport</p>
    <article>Story 1</article>
    <article>Story 2</article>
    <article>Story 3</article>
  </section>
</section>

`<header>` و `<hgroup>`

<header> عنصر موجود بشكل عام في أعلى مستند أو قسم أو مقالة ويحتوي عادةً على العنوان الرئيسي وبعض أدوات التنقل والبحث.

<header>
  <h1>Company A</h1>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact us</a></li>
  </ul>
  <form target="/search">
    <input name="q" type="search" />
    <input type="submit" />
  </form>
</header>

<hgroup> يجب استخدام عنصر حيث تريد عنوان رئيسي مع واحد أو أكثر من العناوين الفرعية.

<hgroup>
  <h1>Heading 1</h1>
  <h2>Subheading 1</h2>
  <h2>Subheading 2</h2>
</hgroup>

تذكر ، أن رأس <header> عنصر يمكن أن يحتوي على أي محتوى ، ولكن <hgroup> لا يمكن أن يحتوي العنصر إلا على رؤوس أخرى ، وهي <h1> إلى <h6> بما في ذلك <hgroup> .

`<aside>`

The <aside> عنصر مخصص للمحتوى الذي ليس جزءًا من تدفق النص الذي يظهر فيه ، ومع ذلك لا يزال مرتبطًا بطريقة ما. هذا <aside> كشريط جانبي للمحتوى الرئيسي الخاص بك.

<aside>
  <p>This is a sidebar, for example a terminology definition or a short background to a historical figure.</p>
</aside>

قبل HTML5 ، تم إنشاء قوائمنا باستخدام <ul> 's و <li> الصورة. الآن ، مع هذه ، يمكننا فصل عناصر القائمة لدينا باستخدام <nav> للتنقل بين صفحاتك. يمكنك الحصول على أي عدد من <nav> العناصر على الصفحة ، على سبيل المثال ، من الشائع أن يكون لديك نظام ملاحة عمومي عبر الجزء العلوي (في <header> ) والتنقل المحلي في شريط جانبي (في عنصر <aside> ).

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact us</a></li>
  </ul>
</nav>

`<footer>`

إذا كان هناك رأس <header> يجب أن يكون هناك <footer> . A <footer> بشكل عام في أسفل مستند أو قسم أو مقالة. تمامًا مثل <header> المحتوى عبارة عن معلومات عامة ، مثل تفاصيل المؤلف ، أو المعلومات القانونية ، و / أو روابط إلى المعلومات ذات الصلة. تسري أيضًا على تضمين <section> عناصر داخل تذييل الصفحة.

<footer>&copy;Company A</footer>

`<small>`

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

<footer><small>&copy;Company A</small> Date</footer>

`<time>`

The <time> يسمح عنصر لا لبس فيها ISO 8601 تاريخ لإرفاق نسخة الإنسان من ذلك التاريخ.

<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>

لماذا تهتم بـ <time> ؟ في حين يستطيع البشر قراءة الوقت الذي يمكن أن يفسد من خلال السياق بالطريقة العادية ، يمكن لأجهزة الكمبيوتر قراءة تاريخ ISO 8601 ورؤية التاريخ والوقت والمنطقة الزمنية.

`<figure>` و `<figcaption>`

<figure> لتغليف محتوى الصور حوله ، و <figcaption> هو تسمية صورتك.

<figure>
  <img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" />
  <figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption>
</figure>

تعرف على المزيد حول عناصر HTML5 الجديدة:

توفر w3schools أوصافاً بسيطة وواضحة للعديد من عناصر الأخبار وكيفية / أين يجب استخدامها.
يوفر MDN أيضًا مرجعًا رائعًا لكل عناصر HTML ويتعمق في كل عنصر.

12 KiB Raw Blame History

عناصر دلالية HTML5

تاريخ سريع

قائمة العناصر الدلالية الجديدة

فوائد العناصر الدلالية

&#60;section&#62; و &#60;article&#62;

&#60;header&#62; و &#60;hgroup&#62;

&#60;aside&#62;

&#60;footer&#62;

&#60;small&#62;

&#60;time&#62;

&#60;figure&#62; و &#60;figcaption&#62;