HTML5 Document

تم تطوير شكل مستند HTML للأفضل فى هذا الإصدار، وتم إضافة عناصر جديدة أكثر دلالية وتفاعلية، سوف نتعرف عليها فى هذا الفصل.

شكل ترميز مستند HTML5:

<!DOCTYPE html> 

<html> 
   <head>
      <meta charset = "UTF-8"> 
      <title>Your Page title</title> 
   </head> 
  
   <body> 
      <header>
          Your Header
      </header> 

      <nav>
          Your Links
      </nav> 
      
      <article> 
         <section> 
            Your section content
         </section> 
      </article>

      <aside>
          Your aside content
      </aside> 
      
      <footer>Your Footer content</footer> 
   </body> 
</html>

العناصر الجديدة التى تم إضافتها لبنية أفضل لصفحات الويب:

العنصر	وصفه
header	يُستخدم هذا العنصر كحاوية للمحتوى التمهيدي أو روابط التنقل.
nav	يأخذ هذا العنصر قسمًا من المستند مخصصًا للتنقل بين صفحات الموقع.
article	يأخذ هذا العنصر جزءًا مستقلاً من محتوى المستند ، مثل مقال صحفي أو ..إلخ.
section	يُستخدم هذا العنصر لتعريف أقسام في المستند.
aside	يأخذ هذا العنصر جزءًا من المحتوى وثيق الصلة ببقية الصفحة فقط.
dialog	يمكن استخدام هذا العنصر لترميز محادثة.
figure	يمكن استخدام هذا العنصر لربط تسمية توضيحية ببعض المحتويات المضمنة، مثل الفيديو.

مثال كامل على مستند HTML5

<html> 
   <head>
      <meta charset = "UTF-8"> 
      <title>HTML5 Document Example</title> 
   </head> 
  
   <body> 
      <nav>
        <ul> 
            <li><a href="https://www.albashmoparmeg.com/">Home</a></li> 
            <li><a href="https://www.albashmoparmeg.com/blog/">Articles</a></li> 
            <li><a href="https://www.albashmoparmeg.com/courses/">Courses</a></li> 
         </ul> 
      </nav> 

      <header>
          <h2>HTML Document Example</h2>
      </header> 
      
      <article> 
         <section> 
            <h3>Head section 1</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
         </section> 
         <section> 
            <h3>Head section 2</h3>
            <p>orem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
         </section>
      </article>

      <aside>
          You can learn anything in programming with us.
      </aside> 
      
      <footer> All Copyright © Saved </footer> 
   </body> 
</html>

HTML Document Example

Head section 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Head section 2

lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.

HTML5 Syntax HTML5 Attributes

الإبلاغ عن خطأ

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!