عناصر HTML الدلالية
العناصر الدلالية = العناصر ذات المعنى.
ما هي العناصر الدلالية؟
يصف العنصر الدلالي بوضوح معناه لكل من المتصفح والمطور.
أمثلة على العناصر غير الدلالية : <div>و <span>- لا تخبر شيئًا عن محتواها.
أمثلة على العناصر الدلالية : <form>، <table>و <article>- تحدد بوضوح محتواها.
العناصر الدلالية في HTML
تحتوي العديد من مواقع الويب على كود HTML مثل: <div id = "nav"> <div class = "header"> <div id = "footer"> للإشارة إلى التنقل والعنوان والتذييل.
توجد في HTML بعض العناصر الدلالية التي يمكن استخدامها لتحديد أجزاء مختلفة من صفحة الويب:
- <مقالة>
- <جانب>
- <التفاصيل>
- <figcaption>
- <تكوين>
- <footer>
- <رأس>
- <رئيسي>
- <علامة>
- <ناف>
- <القسم>
- <ملخص>
- <الوقت>
عنصر <section> HTML
يحدد <section>العنصر قسمًا في المستند.
وفقًا لوثائق HTML الخاصة بـ W3C: "القسم هو تجميع موضوعي للمحتوى ، عادةً مع عنوان."
أمثلة على مكان استخدام <section>العنصر:
- فصول
- مقدمة
- الاخبار
- معلومات التواصل
يمكن عادةً تقسيم صفحة الويب إلى أقسام للمقدمة والمحتوى ومعلومات الاتصال.
مثال
قسمان في المستند:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an
international organization working on issues regarding the conservation,
research and restoration of the environment, formerly named the World
Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF.
The well-known panda logo of WWF originated from a panda named Chi Chi that
was transferred from the Beijing Zoo to the London Zoo in the same year of
the establishment of WWF.</p>
</section>
عنصر <article> في HTML
يحدد <article>العنصر محتوى مستقلًا قائمًا بذاته.
يجب أن يكون للمقال معنى من تلقاء نفسه ، ويجب أن يكون من الممكن توزيعه بشكل مستقل عن باقي موقع الويب.
أمثلة على مكان استخدام <article>العنصر:
- مشاركات المنتدى
- مشاركات المدونة
- تعليقات المستخدم
- بطاقات المنتجات
- مقالات الصحف
مثال
ثلاث مقالات ذات محتوى مستقل ومستقل:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular
web browser today!</p>
</article>
<article>
<h2>Mozilla
Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed
by Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
مثال 2
استخدم CSS لتصميم عنصر <article>:
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers
> h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2,
p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most
Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an
open-source web browser developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
هل تتداخل <article> في <section> أو العكس بالعكس؟
يحدد <article>
العنصر محتوى مستقلًا قائمًا بذاته.
يحدد <section>العنصر القسم في المستند.
هل يمكننا استخدام التعريفات لنقرر كيفية تداخل هذه العناصر؟ لا لانستطيع!
لذلك ، ستجد صفحات HTML بها <section>عناصر تحتوي على <article>عناصر ، <article>وعناصر تحتوي على <section>عناصر.
عنصر <header> HTML
يمثل <header>العنصر حاوية لمحتوى تمهيدي أو مجموعة من روابط التنقل.
يحتوي <header>العنصر عادةً على:
- عنصر عنوان واحد أو أكثر (<h1> - <h6>)
- شعار أو رمز
- معلومات التأليف
ملاحظة: يمكن أن يكون لديك عدة <header>عناصر في مستند HTML واحد. ومع ذلك ، <header>لا يمكن وضعها داخل عنصر <footer>أو عنصر <address>آخر <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>
عنصر <footer> HTML
يحدد <footer>العنصر تذييلًا لمستند أو قسم.
يحتوي <footer>العنصر عادةً على:
- معلومات التأليف
- معلومات حقوق التأليف والنشر
- معلومات التواصل
- خريطة الموقع
- العودة إلى أعلى الروابط
- الوثائق ذات الصلة
يمكن أن يكون لديك عدة <footer>عناصر في وثيقة واحدة.
مثال
مقطع تذييل في مستند:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
عنصر HTML <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>
عنصر HTML <aside>
يحدد <aside>العنصر بعض المحتوى بخلاف المحتوى الذي يتم وضعه فيه (مثل الشريط الجانبي).
يجب <aside>أن يكون المحتوى مرتبطًا بشكل غير مباشر بالمحتوى المحيط.
مثال
اعرض بعض المحتوى بخلاف المحتوى الذي تم وضعه فيه:
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme
park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
مثال 2
استخدم CSS لتصميم عنصر <aside>:
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot
center this summer. The weather was nice, and Epcot was amazing! I had a great
summer together with my family!</p>
<aside>
<p>The Epcot center is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
</body>
</html>
عناصر HTML <figure> و <figcaption>
تحدد العلامة <figure>المحتوى القائم بذاته ، مثل الرسوم التوضيحية والمخططات والصور وقوائم الرموز وما إلى ذلك.
<figcaption>تحدد العلامة تسمية توضيحية لعنصر <figure>. يمكن <figcaption>وضع العنصر باعتباره العنصر الأول أو الأخير <figure>للعنصر.
يحدد <img>العنصر الصورة / الرسم التوضيحي الفعلي.
مثال
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
لماذا العناصر الدلالية؟
وفقًا لـ W3C: "تسمح شبكة الويب الدلالية بمشاركة البيانات وإعادة استخدامها عبر التطبيقات والمؤسسات والمجتمعات."
العناصر الدلالية في HTML
فيما يلي قائمة ببعض العناصر الدلالية في HTML.
| Tag | Description |
|---|---|
| <article> | Defines independent, self-contained content |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | Defines a footer for a document or section |
| <header> | Specifies a header for a document or section |
| <main> | Specifies the main content of a document |
| <mark> | Defines marked/highlighted text |
| <nav> | Defines navigation links |
| <section> | Defines a section in a document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
للحصول على قائمة كاملة بجميع علامات HTML المتاحة ، تفضل بزيارة مرجع علامات HTML الخاص بنا .