HTML Semantic Elements

-

في هذا الدرس بنتعرف على Semantic Elements والمقصود فيها : هي عبارة عن elements يكون اسمها دلاله على نوع المحتوى المستخدم فيها مثل : header, footer, table ... الخ. يقدم HTML5  مجموعه من هذه elements الامر الذي سهل الكتابة والفهم للمبرمج والمتصفح. 

من الأمثلة على ذلك:

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

من الاسم بتلاحظ ان هذه elements لها معني واضح يمكن استخدامها له. مثال لإضافة مقال يمكن استخدام article> element> 

تمام نطبق مثال على <article>


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <article>
        <h1>يقول صباح الحكيم في قصيدته لغة الضاد</h1>    
            <pre>
                أنا لا أكتبُ حتى أشتهرْ
                لا ولا أكتبُ كي أرقى القمرْ
                أنا لا أكتب إلا لغة
                في فؤادي سكنت منذ الصغرْ
                لغة الضاد وما أجملها
                سأغنيها إلى أن أندثرْ
                سوف أسري في رباها عاشقاً
                أنحتُ الصخر وحرفي يزدهرْ
            </pre>
     </article>
</body>
</html>

النتيجة: 67

طبقنا في المثال السابق <article> وفي الداخل استخدمنا pre> element> لكتابة الشعر. 

استخدام 

<aside> element 

يحدد <element <aside بعض المحتوى بصرف النظر عن المحتوى الذي تم وضعه فيه (مثل الشريط الجانبي).

يجب أن يكون المحتوى <aside> مرتبطًا بشكل غير مباشر بالمحتوى المحيط.

مثال :


<!DOCTYPE html>
<html dir="rtl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    aside {
        top: 10px;
  width: 15%;
  padding-left: 15px;
  margin-left: 15px;
  margin-right: 15px;
  padding-right: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>
    <article>
        <h1>يقول صباح الحكيم في قصيدته لغة الضاد</h1>    
            <pre>
                أنا لا أكتبُ حتى أشتهرْ
                لا ولا أكتبُ كي أرقى القمرْ
                أنا لا أكتب إلا لغة
                في فؤادي سكنت منذ الصغرْ
                لغة الضاد وما أجملها
                سأغنيها إلى أن أندثرْ
                سوف أسري في رباها عاشقاً
                أنحتُ الصخر وحرفي يزدهرْ
            </pre>
            <aside>
                <p>للمزيد من اشعار صباح الحكيم انقر هنا</p>
                </aside>
     </article>
</body>
</html>

النتيجة:


استخدام figure> and <figcaption> Elements>

من الاسم < figure> واضح ان هذا element يستخدم مع الرسوم التوضيحية، الرسوم البيانية، الصور ... الخ

بينما <figcaption> يستخدم لإضافة تسميه توضيحيه ل < figure> 

طبق المثال التالي لفهم الموضوع:


<!DOCTYPE html>
<html dir="rtl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
     <figure>
        <img src="mercedes-benz-s-class.jpg" alt="mercedes">
        <figcaption>Fig1. - mercedes-benz-s-class.</figcaption>
      </figure>
</body>
</html>

النتيجة :



استخدام nav> element> 

يستخدم هذا element مع مجموعة من الروابط navigation links، لكن يجب الانتباه الى ان مش كل الروابط في الصفحه توضع داخل <nav> . يستخدم <nav> مع major block ل مجموعة الروابط navigation links مثل المنيو الرئيسة في الموقع

طبق المثال التالي في صفحة HTML لفهم الموضوع:


<!DOCTYPE html>
<html>
   <head>
      <title>nav Tag</title>
      <style>
         h1 {
         color:#006400;
         }
      </style>
   </head>
   <body>
      <h1>Navigation Bar</h1>
      <nav>
         <a href="/home/">Home</a> |
         <a href="/about-us/">About Us</a> |
         <a href="/Courses-DataStructure/">Data Structure</a> |
         <a href="/Courses-operating-system/">Operating System</a>
      </nav>
   </body>
</html>

النتيجة :


تطبيق <Header> 

واضح من الاسم استخدام هذا element، يستخدم في رأس الصفحه .

مثال :


<!DOCTYPE html>
<html>
   <head>
      <title>nav Tag</title>
      <style>
         h1 {
         color:#006400;
         }
      </style>
   </head>
   <body>
      <h1>Navigation Bar with header</h1>
      <header>
      <nav>
         <a href="/home/">Home</a> |
         <a href="/about-us/">About Us</a> |
         <a href="/Courses-DataStructure/">Data Structure</a> |
         <a href="/Courses-operating-system/">Operating System</a>
      </nav>
    </header>
   </body>
</html>

استخدمنا هذا element هنا في شريط الروابط الرئيسي . 


واكيد ال header> element> يستخدم في اكثر من مكان، يعني ممكن نستخدم <header> داخل <article> او غيرها. 

استخدام Footer> element> 
من الاسم واضح ان هذا الجزء مخصص للمعلومات التي بتكون عاده اسفل الصفحة في التذييل ومن هذه المعلومات : 
حقوق النشر، معلومات الاتصال، خريطة الموقع، روابط ثانيه ... الخ
طبق المثال التالي في صفحة HTML 

<!DOCTYPE html>
<html>
   <head>
      <title>nav Tag</title>
      
      <style>
          
         h1 {
         color:#006400;
         }
body {
    margin: 0;
    height: 100%;
    display: flex;
    min-height: 100vh;
    text-align: center;
    flex-direction: column;
    font-family: "Muli", sans-serif;
}
.main-content {
    flex: 1;
}
footer {
    padding: 30px;
    background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73);
}
      </style>
   </head>
   <body>
    <main class="main-content">
      <h1>Navigation Bar</h1>
      <header>
      <nav>
         <a href="/home/">Home</a> |
         <a href="/about-us/">About Us</a> |
         <a href="/Courses-DataStructure/">Data Structure</a> |
         <a href="/Courses-operating-system/">Operating System</a>
      </nav>
    </header>
    </main>
    <footer >footer here</footer>
   </body>
</html>
النتيجة :