يحتوي جزء المستند ، جزء الجسم ، على المحتوى الذي يمكن للزوار رؤيته. عادة ما تنظم مستندات HTML التقليدية هياكل المستندات من خلال عناصر Div ، إلى جانب جداول النمط المناسبة. ومع ذلك ، فإن مشكلة DIV تفتقر إلى المعلومات الدلالية. خاصة إذا كان بنية الأنسجة لصفحة HTML غير جيدة ، فسيؤدي ذلك بسهولة إلى الارتباك. في هذا الصدد ، تتم إضافة العديد من العناصر الدلالية إلى HTML5 لاستبدال عناصر Div والدلالات والعرض التقديمي المنفصل.
جميع العناصر الدلالية لها خاصية مهمة: فهي لا تفعل أي شيء حقًا ، ولديها تأثير ضئيل على المحتوى على المظهر ، وحتى ليس لها أي تأثير على الإطلاق. هناك عدة أسباب لوجود العناصر الدلالية:
1) من السهل تعديلها وصيانتها. من خلال العنصر الدلالي لـ HTML5 ، يمكن نقل معلومات منظمة إضافية ، مما يجعل من السهل على الناس فهم التصميم العام للوثيقة ودور الكتل المختلفة.
2) غير المرتبطة. يتمثل إحدى موضوعات تصميم الويب الحديثة في السماح لأي شخص بالوصول إلى صفحة الويب دون عقبات ، أي الأشخاص الذين يستخدمون قراء الشاشة وغيرها من الأدوات المساعدة يمكنهم التنقل بحرية على الصفحة.
3) تحسين محرك البحث. يتيح استخدام HTML5 محركات البحث فهم موقع الويب الخاص بك بشكل أفضل والسماح لهم بجمع المزيد من المعلومات حول صفحات الفهرس الخاصة بهم.
4) وظيفة المستقبل. ستستخدم المتصفحات الجديدة وأدوات تحرير الويب بالتأكيد عناصر دلالية في المستقبل. على سبيل المثال: يتم تقديم الجزء الرئيسي من المستند.
أهم شيء هو أنه إذا كنت تستخدم عناصر الدلالية بشكل صحيح ، فيمكنك إنشاء بنية صفحة أوضح ، ويمكنك التكيف مع اتجاه تطوير المتصفحات المستقبلية وأدوات تصميم الويب. سيؤدي ما يلي إلى تقديم عناصر دلالية لهياكل المستندات التنظيمية.
HTML5 بنية المستندتستخدم صفحة HTML القديمة عناصر Div ، إلى جانب جداول النمط المناسبة ، ولكن مشكلة عنصر DIV هي أنها لا تعكس أي معلومات تتعلق بالصفحة. تتمثل صفحة HTML5 في استبدال عناصر Div بعناصر دلالية وصفية. يحتوي المثال التالي على العناصر الدلالية المستخدمة في HTML5 لوصف بنية المستند.
<Body> <Header> <Hgroup> <h1> الأشياء التي أحبها </h1> <h2> بقلم آدم فريمان </h2> </hgroup> > </address> <nav> <h1> محتويات </h1> <li> <a href =#fruitsilike> الفواكه التي أحبها </a> </li> <ul> <li> <a href =#morefruit> إضافي من </a> </li></ul> <li> <a href =#الأنشطة التي أحبها </a> </li> <li> <li> <li> <li> <li> <li > <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> < li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <ul> <li> <li> <li> <ul > <li> <li> <li> <li> <a href =#tritypes> أنواع الترياتلون </a> </li> <li> <a href =#mytri> نوع الترياتلون الذي أهدف إليه < ؟ > لماذا من صحية </h1> <c. <li> تحتوي الفاكهة على W callies </li> </ol> <section> Section> <p> أحب السباحة والتشغيل /p> <summary> أنواع من الترياتلون </summary> هناك أنواع مختلفة من الترياتلون ، الليمفاوية وما إلى ذلك. li> <li> دورة 40km </li> <li> تشغيل 10km </li> </ol> </celps> </section> </article> </main> <v> مزيد من المعلومات: <a href = http: // fruit .org> تعرف على المزيد حول الفاكهة </a> <a href = http://triathlon.org> تعرف على المزيد حول trithlons </a> </nav> <foloter id = mainfooter> © 2011 ، Adam Freeman. = http://apress.com
تحتوي الوثيقة أعلاه على العديد من عناصر HTML5.
عنوانيعرّف HTML نظام العناصر بعنوان ، من H1 إلى H6 ، و H1 هو الأعلى. عادة ما يتم استخدام عنوان نفس المستوى لتقسيم المحتوى إلى عدة أجزاء ، كل جزء من موضوع واحد. عادة ما يستخدم العنوان على جميع المستويات لتمثيل جميع جوانب نفس الموضوع. يشكلون معًا الخطوط العريضة للوثيقة ، حتى يتمكن المستخدمون في البداية من فهم رعايتهم وهيكلهم طالما أنهم يتصفحون عنوان المستند ، ويمكن للمستخدمين التنقل بسرعة إلى محتوى الاهتمام من خلال نظام العنوان.
<Body> <h1> الفاكهة التي أحبها </h1> ...... </body>الترجمة
يمكن استخدام عنصر HGROUP كمعالجة شاملة (إذا لم يتم استخدام عنصر HGROUP ، فسيتم استخدام العنوان الرئيسي والترجمات كعنوان ، وبعد استخدام HGROUP ، سيتم التعامل مع العنوان والترجمات كعنوان) لتجنب الخطوط العريضة إزعاج وثيقة HTML.
<Body> <hgroup> <H1> الفاكهة التي أحبها </h1> <h2> كيف تعلمت أن أحب الحمضيات </h2> </hgroup> ...... </body> </body> </body >
هنا ، كيف أتعلم أن أحب الحمضيات كقوة فرعية من الفواكه التي أحبها.
المجال الرئيسي لصفحة العلامةعادة ما يكون هناك جزء واحد فقط من الصفحة التي تمثل محتوىها الرئيسي.
<body> ...... <الدور الرئيسي = main> <tricle> ...... </article> </main> ...... </body>
الدور = الرئيسي يمكن أن يساعد المجال الرئيسي لصفحة تحديد موقع قارئ الشاشة.
إنشاء مقاليمثل عنصر المقال محتوى مستقل في عنصر HTML. يمكن أن يكون المقال متداخلًا في مقال آخر. يمكن أن تحتوي صفحة واحدة على عناصر مقالة متعددة ، ويمكن تشكيل كل مقالة بشكل مستقل ، ويمكن أن تحتوي مقالة واحدة على عنصر أو أكثر من عناصر القسم (انظر القسم التالي).
<body> ...... <rom main = main> <artadicle> <header> ...... </header> <sidense> ... </iside> <section> ... </section> </article> <artetern <artader> ...... </header> <sidense> ...... </isplant> <section> .../section> </sittle>. .. </main> ...... </body>قسم
تتم إضافة عنصر القسم حديثًا HTML5 لتمثيل قسم في المستند. لا توجد مواصفات واضحة لاستخدام عنصر القسم ، ولكن عادةً ما يجب استخدام عنصر القسم لتضمينه الذي يجب تضمينه في مخطط المستند أو الدليل. يمكن أن ينتمي القسم إلى مقالة معينة ، ويمكن أن تحتوي المقالة على قسم أو أكثر. عادة ما تحتوي عناصر القسم على فقرات واحدة أو أكثر وعنوان واحد ، ولكن العنوان ليس ضروريًا.
<body> <القسم <hgroup> <H1> أحبها </h1> <h2> كيف تعلمت أن أحب الحمضيات </h2> </hgroup> أحب التفاح والبرتقال. ، المانجو ، الكرز ، المشمش ، الخوخ ، الخوخ والعنب.
يحدد أعلاه 3 أقسام ، طبقات متداخلة ، عنوان كل قسم هو H1. ومع ذلك ، في المتصفحات المختلفة ، سيكون المظهر الافتراضي للبنية الهرمية للقسم مختلفًا ، ويمكن حل هذه المشكلة عن طريق إنشاء نمط مخصص. الفرق بين القسم والمقال هو أن القسم أكثر تنظيماً وهيكليًا في جوهره ويمكن اعتباره فقرة مستقلة ، بينما تمثل المقالة حاوية موجودة.
أولا وذيليمثل عنصر الرأس القسم الأول ، والذي يمكن أن يشمل الرأس والشعار. عادةً ما يحتوي عنصر الرأس على عنصر العنوان أو عنصر HGROUP ، ويمكن أن يحتوي أيضًا على عناصر التنقل في هذا القسم. يمكن أن تحتوي الصفحة على عدد تعسفي لعناصر الرأس ، ويمكن أن يكون معناها مختلفًا وفقًا لسياقها.
يمثل عنصر FOOS ذيل القسم ، والذي يحتوي عادةً على معلومات موجزة من القسم ، ويمكن أن تتضمن أيضًا مقدمة المؤلف ومعلومات حقوق الطبع والنشر والروابط إلى المحتوى ذي الصلة والشعار والإعفاء.
<Body> <header> <hgroup> <h1> الأشياء التي أحبها </h1> <h2> بقلم آدم فريمان </h2> </hgroup> </header> <seader> <hgroup> <h1> أحبها < /h1> <h2> كيف تعلمت أن أحب الحمضيات </h2> </hgroup> </header> ...... </section> <seader> <h1> الأنشطة التي أحبها </h1> </header >...
هذا المثال يحدد 3 عناصر رأس. عنصر رأس عناصر الجسم هو الأول من المستند بأكمله.
ملاحظة: لا يمكن أن تكون متداخلًا برأس أو تذييل آخر في تذييل التذييل ، ولا يمكن التداخل في العنوان أو عنصر العنوان.
منطقة التنقلتمثل عناصر NAV منطقة التنقل في المستند ، والتي تحتوي على روابط إلى أجزاء أخرى من الصفحات الأخرى أو أجزاء أخرى من نفس الصفحة. لا يجب وضع جميع الروابط في عناصر NAV.
<Body> <header> <hgroup> <h1> الأشياء التي أحبها </h1> <h2> بقلم آدم فريمان </h2> </hgroup> <vic> <h1> محتويات </h1> <ul> <li> <a href =#fruitsilike> ثمار أحب </a> </li> <ul> <li> <a href =#morefruit> ثمار إضافية </a> </li> </ul> <li> <a أنشطة href =#activileike> أحب </a> </li> <li> <a href =#tritypes> أنواع الترياتلون </a> </li> <li> <a href =#mytri> نوع من Triathlon أنا أهدف </a> </li></ul> </ul> </vic> </header> <section> ...... </section> <section> .. ... . > </nav> <fool id = mainfooter> ...... </footer> </body>
يتم استخدام عنصرين NAV هنا.
احرص على عدم وضع جميع الروابط في كتلة NAV ، يجب عادةً استخدام NAV في أكبر وأهم منطقة تنقل في الصفحة. على سبيل المثال ، من الضروري وضع الملاحة الوثيقة المذكورة أعلاه لوضعه في كتلة NAV ، ولكن إذا كانت هناك بعض المعلومات فقط حول الترخيص ومعلومات الاتصال ، فليست هناك حاجة لوضعها في كتلة NAV.
شريط التعليقات التوضيحيةيتم استخدام العنصر جانبًا للإشارة إلى المحتوى الملون قليلاً بالمحتوى المحيط ، على غرار الشريط الجانبي في الكتاب أو المجلة. المحتوى الرئيسي.
<Body> <header> ...... </header> <artadicle> <header> ...... </header> <sidence> <h1> لماذا الفاكهة صحية </h1> <section> هنا ar threee quarieseryone shuld اطلب المزيد من الفاكهة: <ol> <li> تحتوي الفاكهة على الكثير من الفيتامينات </li> <li> الفاكهة هي مصدر للألياف </li> <li> تحتوي الفاكهة على عدد قليل من أشعة كاليفورنيا </li> </ ol> <section> </eshive> ...... </article> <fool id = mainfooter> ......
يمكنك استخدام عناصر جانباً مثل شريط الملاحظات في مسألة مطبوعة ، يمكنك تقديم موضوع آخر ذي صلة من خلاله ، أو شرح وجهة النظر المقترحة في المستند الرئيسي. يمكنك أيضًا استخدام العناصر جانباً لتخزين الإعلانات ، وروابط المحتوى ذات الصلة ، إلخ.
معلومات الاتصاليتم استخدام عنصر العنوان لتمثيل معلومات الاتصال الخاصة بعنصر المستند أو المقالة. إذا كان عنصر العنوان بمثابة عنصر فرعي لعنصر المقالة ، فإن معلومات الاتصال التي يوفرها هي المقالة ؛ لا يمكن استخدام عنصر العنوان لتمثيل العنوان خارج معلومات الاتصال الخاصة بالوثيقة أو المقالة ، مثل: لا يمكن استخدامه لتمثيل عنوان العميل أو المستخدم.
<Body> <header> ......منطقة التفاصيل
تقوم عناصر التفاصيل بإنشاء منطقة في المستند ، ويمكن للمستخدمين بدءها لفهم المزيد من التفاصيل حول السمة. تحتوي عناصر التفاصيل عادةً على عنصر ملخص لإنشاء ملصق أو عنوان وصف لمنطقة التفاصيل.
<Body> <header> ...... التدريب على الترياتلون الأول ، لكنه عمل شاق. : <ol> <li> 1.5km Swim </li> <li> دورة 40km </li> <li> 10km تشغيل </li> </ol> </s. </body>
عناصر التفاصيل لها المظهر الافتراضي في المتصفح.
سيتم طي عناصر التفاصيل افتراضيًا فقط.
<التفاصيل مفتوحة> <summary> أنواع الترياتلون < /summary> هناك أنواع مختلفة من الترياتلون ، أولمبيا وما إلى ذلك. بر
التأثير على النحو التالي:
ملخصيتم تعريف العناصر الدلالية لـ HTML5 على أساس مخترعها على دراسة صفحات الويب الحالية. إذا كنت مهتمًا ، فيمكنك عرضه هنا (موقع Google ، لا يمكنك عرضه مباشرة).
في الوقت الحاضر ، تم دعم العناصر الدلالية لـ HTML5 على جميع المتصفحات الحديثة ، ولكن بالنسبة لبعض الإصدارات القديمة من المتصفح (بشكل رئيسي في IE9 Internet Explorer) ، هناك حاجة إلى بعض التدابير العلاجية. نظرًا لأن العناصر الدلالية نفسها لا تفعل أي شيء ، فإنها تحتاج إلى دعمها ، طالما يُسمح للمتصفح بمعاملتها كعناصر عادية ، وبقية المهمة هي إضافة بعض قواعد الأسلوب إليهم. مشكلة. لحسن الحظ ، ساعدت هذه العمل Modernizr في تحقيق ذلك.