دلالات هو دراسة معاني الكلمات والعبارات في اللغة.
عناصر الدلالي هي عناصر مع معنى.
HTML الدلالات هو استخدام ترميز HTML لتعزيز معاني الكلمات، أو معنى من المعلومات في صفحات الويب وتطبيقات الويب بدلا من مجرد تحديد عرضها أو البحث.
تتم معالجة HTML الدلالات التي كتبها متصفحات الويب التقليدية فضلا عن العديد من وكلاء مستخدم آخر. يستخدم CSS تشير إلى عرضه للمستخدمين البشري.
ما هي عناصر الدلالي؟
وثمة عنصر الدلالي يصف بوضوح معناه أن كل من متصفح والمطور.
أمثلة من العناصر غير الدلالي: <div> و <span> - يحكي شيئا عن مضمونه.
أمثلة على العناصر الدلالية: <form> ، <table> و <img> - يحدد بوضوح محتواه.
دعم المتصفح
| نعم فعلا | نعم فعلا | نعم فعلا | نعم فعلا | نعم فعلا |
ويدعم HTML5 العناصر الدلالية في جميع المتصفحات الحديثة.
وبالإضافة إلى ذلك، يمكنك "teach" المتصفحات القديمة كيفية التعامل مع "unknown elements" .
قرأت عن ذلك في دعم متصفح HTML5 .
عناصر الدلالي جديدة في HTML5
العديد من المواقع على شبكة الإنترنت تحتوي على كود HTML مثل: <div id="nav"> <div class="header"> <div id="footer">
للإشارة الملاحة، رأس، وتذييل الصفحة.
تقدم HTML5 العناصر الدلالية جديدة لتحديد أجزاء مختلفة من صفحة ويب:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML5 <section> العنصر
و <section> عنصرا يعرف قسم في وثيقة.
ووفقا لتوثيق HTML5 W3C ل: "A section is a thematic grouping of content, typically with a heading."
الصفحة الرئيسية لموقع ويب يمكن تقسيمها إلى أقسام للمقدمة، والمحتوى، ومعلومات الاتصال.
مثال
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section> انها محاولة لنفسك » HTML5 <article> العنصر
و <article> يحدد عنصر محتوى مستقلة، قائمة بذاتها.
مقال يجب أن يكون له معنى من تلقاء نفسه، وينبغي أن يكون من الممكن قراءتها بشكل مستقل عن بقية موقع على شبكة الإنترنت.
أمثلة من حيث ل <article> عنصر يمكن استخدامها:
- منتدى آخر
- مشاركة مدونة
- مقالة جريدة
مثال
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article> انها محاولة لنفسك » عناصر الدلالي التعشيش
في معيار HTML5، و <article> عنصر يحدد لذلك، كتلة كاملة من العناصر ذات الصلة مكتفية ذاتيا.
و <section> يعرف عنصر ككتلة من العناصر ذات الصلة.
يمكننا استخدام تعريفات لاتخاذ قرار بشأن كيفية عناصر العش؟ لا لانستطيع!
على شبكة الإنترنت، وسوف تجد صفحات HTML مع <section> العناصر التي تحتوي على <article> العناصر، و <article> العناصر التي تحتوي على <sections> العناصر.
سوف تجد أيضا صفحات مع <section> العناصر التي تحتوي على <section> العناصر، و <article> العناصر التي تحتوي على <article> العناصر.
صحيفة: والرياضية articles في الرياضة section ، لديها الفني section في كل article .
HTML5 <header> العنصر
و <header> يحدد عنصر رأس لمستند أو المقطع.
و <header> وينبغي أن تستخدم عنصر كوعاء لمحتوى استهلالي.
هل يمكن أن يكون عدة <header> العناصر في وثيقة واحدة.
يحدد المثال التالي رأس مقال:
مثال
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article> انها محاولة لنفسك » HTML5 <footer> العنصر
و <footer> يحدد عنصر تذييل لمستند أو المقطع.
A <footer> يجب أن يحتوي على عنصر المعلومات حول عنصر يحتوي على.
تذييل يحتوي عادة المؤلف من معلومات وثيقة حقوق الطبع والنشر، وصلات لشروط الاستخدام، ومعلومات الاتصال، الخ
هل يمكن أن يكون عدة <footer> العناصر في وثيقة واحدة.
مثال
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer> انها محاولة لنفسك » HTML5 <nav> العنصر
و <nav> يعرف عنصر مجموعة من ارتباطات التنقل.
و <nav> المقصود عنصر لكتل كبيرة من ارتباطات التنقل. ومع ذلك، لا ينبغي أن تكون جميع الروابط في وثيقة داخل <nav> العنصر!
مثال
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav> انها محاولة لنفسك » HTML5 <aside> العنصر
و <aside> عنصر يحدد بعض المحتويات وبصرف النظر عن محتوى يتم وضعه في (like a sidebar) .
يجب أن تكون متعلقة محتوى جانبا لمحتوى المحيطة بها.
مثال
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside> انها محاولة لنفسك » HTML5 <figure> و <figcaption> عناصر
في الكتب والصحف، فمن الشائع أن يكون تعليق مع الصور.
الغرض من التسمية التوضيحية لإضافة التفسير البصري للصورة.
مع HTML5، صور وتعليق يمكن تجميعها معا في <figure> عناصر هي:
مثال
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure> انها محاولة لنفسك » و <img> عنصر يحدد صورة، و <figcaption> عنصر يحدد التسمية التوضيحية.
لماذا الدلالية HTML5 عناصر؟
مع HTML4، وتستخدم للمطورين المفضلة الخاصة بهم ويعزو أسماء لعناصر الصفحة على غرار:
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...
وهذا جعل من المستحيل على محركات البحث لتحديد الصحيح محتوى صفحة ويب.
مع عناصر HTML5 مثل: <header> <footer> <nav> <section> <article> ، وهذا سوف تصبح أسهل.
وفقا لW3C، والويب الدلالي:
"يسمح البيانات لتتم مشاركتها وإعادة استخدامها عبر التطبيقات، والشركات، والمجتمعات المحلية."
الاعتبارات
في الحالات التي تتطلب وثيقة دلالات أكثر دقة من تلك التي أعرب عنها في حدها HTML، قد تكون مرفقة أجزاء من الوثيقة خلال فترة أو شعبة العناصر مع أسماء فئة ذات مغزى مثل <تمتد الطبقة = "الكاتب"> و<div الطبقة = "فاتورة" >. أين هذه الأسماء الطبقة هي أيضا جزء معرف ضمن مخطط أو الأنطولوجيا، فإنها قد تصل إلى معنى أكثر تحديدا. التنسيقات المصغرة إضفاء الطابع الرسمي على هذا النهج لدلالات في HTML.
أحد أهم هذه القيود الهامة لهذا النهج هو أن هذه العلامات بناء على إدراج عنصر يجب أن تستوفي شروط formedness جيدا. ولما كانت هذه الوثائق هي على نطاق واسع منظم شجرة، وهذا يعني أن شظايا متوازنة فقط من شجرة فرعية يمكن أن تكون علامة حتى في هذه الطريقة. سيكون وسيلة لوضع علامات متابعة أي قسم التعسفي من HTML يتطلب آلية مستقلة للهيكل العلامات نفسها، مثل XPointer.
كما يحسن HTML الدلالات جيدة إمكانية الوصول إلى الوثائق على شبكة الإنترنت (انظر أيضا إرشادات الوصول محتوى ويب). [بحاجة لمصدر] على سبيل المثال، عندما قارئ الشاشة أو متصفح الصوت يمكن التأكد بنية المستند بشكل صحيح، فإنه لن يضيع المستخدم ضعاف البصر ل الوقت بقراءة المعلومات المتكررة أو غير ذات صلة عندما تم وضع علامة بشكل صحيح.
عناصر الدلالي في HTML5
وفيما يلي قائمة أبجدية من العناصر الدلالية الجديدة في HTML5.
الروابط اذهب إلى موقعنا الكامل HTML5 المرجعي .
| بطاقة | وصف |
|---|---|
| <article> | تعرف مقال |
| <aside> | عرف المحتوى بجانب صفحة المحتوى |
| <details> | تعرف التفاصيل الإضافية التي يمكن للمستخدم عرض أو إخفاء |
| <figcaption> | تعرف توضيحية ل <figure> العنصر |
| <figure> | يحدد محتوى بذاتها، مثل الرسوم التوضيحية والرسوم البيانية والصور وقوائم الرموز، الخ |
| <footer> | تعرف تذييل للمستند أو قسم |
| <header> | يحدد رأس لمستند أو قسم |
| <main> | يحدد المحتوى الرئيسي من وثيقة |
| <mark> | تعرف تميز / النص المميز |
| <nav> | تعرف ارتباطات التنقل |
| <section> | يعرف قسم في وثيقة |
| <summary> | يعرف عنوان واضح ل <details> العنصر |
| <time> | يحدد وقت / زمن |