التعليق: نظرًا لعدم وجود بنية ، يصعب التعامل مع صفحات HTML الجيدة. يجب تحليل مستوى العنوان لمعرفة كيف ينقسم كل جزء. يتم تمثيل الشريط الجانبي ، تذييل ، رأس ، شريط التنقل ، منطقة المحتوى الرئيسية والمقالات بعناصر DIV المشتركة. أضافت HTML 5 عناصر جديدة لتحديد هذه الهياكل المشتركة: · Sectio
نظرًا لعدم وجود بنية ، يصعب التعامل مع صفحات HTML الجيدة. يجب تحليل مستوى العنوان لمعرفة كيف ينقسم كل جزء. يتم تمثيل الشريط الجانبي ، تذييل ، رأس ، شريط التنقل ، منطقة المحتوى الرئيسية والمقالات بعناصر DIV المشتركة. يضيف HTML 5 عناصر جديدة لتحديد هذه الهياكل المشتركة:
· القسم: يمكن أن يكون هذا فصلًا أو قسمًا في الكتاب ، ويمكن أن يكون في الواقع أي شيء بعنوانه الخاص في HTML 4
· الرأس: الرأس المعروض على الصفحة ؛ يختلف عن عنصر الرأس
تذييل: تذييل. يمكن عرض التواقيع في رسائل البريد الإلكتروني
NAV: مجموعة من الروابط إلى صفحات أخرى
المقال: مقال في المدونة ، المجلة ، مجموعة المقالات ، إلخ.
دعونا نفكر في صفحة رئيسية مدونة نموذجية ، والتي لها رأس في الأعلى وتذييل في الأسفل ، بالإضافة إلى العديد من المقالات ، ومنطقة التنقل والشريط الجانبي ، انظر صفحة المدونة النموذجية للرمز 1
<html>
<head>
<title> Mokka MIT Schlag </title>
</head>
<body>
<div id = page>
<div id = header>
<h1> <a href => mokka mit schlag </a> </h1>
</div>
<div id = container>
<div id = center class = column>
<div class = post id = post-1000572>
<h2> <a href =
/Blog/Birding/2007/04/33/Spring-Comes-and-Goes-in-Sussex-County/>
الربيع يأتي (ويذهب) في مقاطعة ساسكس </a> </h2>
<Div Class = Entry>
<p> بالأمس انضممت إلى نادي بروكلين للطيور من أجلنا
رحلة سنوية إلى غرب نيو جيرسي ، وتحديدا فائقة
الدبال ، وهو نقطة ساخنة المكتشفة مؤخرًا نسبيًا. هو - هي
بدأ في صباح شتوي جميل عندما وصلنا
في الموقع في الساعة 7:30 صباحًا ، تقدم إلى الربيع
10:00 صباحًا ، ووصلت إلى أوائل الصيف بحلول الساعة 10:15. </p>
</div>
</div>
<div class = post id = post-1000571>
<h2> <a href =
/Blog/Birding/2007/04/33/but-does-it-count-for-your-list/le-list/>
ولكن هل تحسب قائمة حياتك؟ </a> </h2>
<Div Class = Entry>
<p> يبدو أنه يمكنك الآن الذهاب <a
HREF =
2007/04/CONE_SF> مشاهدة الطيور عبر الإنترنت </a>. أنا
لم أتمكن من اختباره بعد (20 مستخدم
الحد على ما يبدو) ولكن هذا بالتأكيد رائع.
شخصيا ، لا أستطيع أن أتخيل أنه يحل محله
في الواقع يجري خارج في الحقل بأي كمية صغيرة.
من ناحية أخرى ، لقد وجدت ذلك دائمًا تمامًا
من المحزن مقابلة كبار الطيور الذين لم يعودوا قادرين على ذلك
عقد مناظير ثابتة أو وصلت إلى الحديقة. أنا استطيع
تخيل أن هذا قد يكون ذا أهمية بالنسبة لهم. في
قام بيرد كبار السن على الأقل بسنة كبيرة على شاشة التلفزيون ، بعد ذلك
لم يعد بإمكانه الخروج كثيرًا. هذا بالتأكيد
يتصدر ذلك. </p>
</div>
</div>
</div>
<div class = navigation>
<div class = alignleft>
<a href =/blog/page/2/> «_fcksavedurl =/blog/page/2/>« الإدخالات السابقة </a>
</div>
<div class = AlignRight> </viv>
</div>
</div>
<div id = class = column>
<ul id = الشريط الجانبي>
<li> <h2> Info </h2>
<ul>
<li> <a href =/blog/comment-police/> سياسة التعليق </a> </li>
<li> <a href =/blog/todo-list/> todo list </a> </li>
</ul> </li>
<li> <h2> المحفوظات </h2>
<ul>
<li> <a href = '/blog/2007/04/'> April 2007 </a> </li>
<li> <a href = '/blog/2007/03/'> مارس 2007 </a> </li>
<li> <a href = '/blog/2007/02/'> February 2007 </a> </li>
<li> <a href = '/blog/2007/01/'> يناير 2007 </a> </li>
</ul>
</li>
</ul>
</div>
<div id = footer>
<p> حقوق الطبع والنشر 2007 Elliotte Rusty Harold </p>
</div>
</div>
</body>
</html>
حتى مع المسافة البادئة الصحيح ، لا تزال هذه divs المتداخلة تشعر بالارتباك الشديد. في HTML 5 ، يمكن استبدال هذه العناصر بعناصر دلالية ، انظر رمز 2 صفحات المدونة النموذجية المكتوبة في HTML5
<html>
<head>
<title> Mokka MIT Schlag </title>
</head>
<body>
<header>
<h1> <a href => mokka mit schlag </a> </h1>
</header>
<section>
<article>
<h2> <a href =
/Blog/Birding/2007/04/33/Spring-Comes-and-Goes-in-Sussex-County/>
الربيع يأتي (ويذهب) في مقاطعة ساسكس </a> </h2>
<p> بالأمس انضممت إلى نادي بروكلين للطيور من أجلنا
رحلة سنوية إلى غرب نيو جيرسي ، وتحديدا فائقة
الدبال ، وهو نقطة ساخنة المكتشفة مؤخرًا نسبيًا. هو - هي
بدأ في صباح شتوي جميل عندما وصلنا إلى
الموقع في الساعة 7:30 صباحًا ، تقدم إلى الربيع حوالي الساعة 10:00
صباحا ، ووصلت إلى أوائل الصيف بحلول 10:15. </p>
</article>
<article>
<h2> <a href =
/Blog/Birding/2007/04/33/but-does-it-count-for-your-list/le-list/>
ولكن هل تحسب قائمة حياتك؟ </a> </h2>
<p> يبدو أنه يمكنك الآن الذهاب <a
HREF =
2007/04/CONE_SF> مشاهدة الطيور عبر الإنترنت </a>. أنا
لم أتمكن من اختباره بعد (20 مستخدم
الحد على ما يبدو) ولكن هذا بالتأكيد رائع.
شخصيا ، لا أستطيع أن أتخيل أنه يحل محله
في الواقع يجري خارج في الحقل بأي كمية صغيرة.
من ناحية أخرى ، لقد وجدت ذلك دائمًا تمامًا
من المحزن مقابلة كبار الطيور الذين لم يعودوا قادرين على ذلك
عقد مناظير ثابتة أو وصلت إلى الحديقة. أنا استطيع
تخيل أن هذا قد يكون ذا أهمية بالنسبة لهم. في
قام بيرد كبار السن على الأقل بسنة كبيرة على شاشة التلفزيون ، بعد ذلك
لم يعد بإمكانه الخروج كثيرًا. هذا بالتأكيد
يتصدر ذلك. </p>
</article>
<v>
<a href =/blog/page/2/> «_fcksavedurl =/blog/page/2/>« الإدخالات السابقة </a>
</nav>
</القسم>
<v>
<ul>
<li> <h2> Info </h2>
<ul>
<li> <a href =/blog/comment-police/> سياسة التعليق </a> </li>
<li> <a href =/blog/todo-list/> todo list </a> </li>
</ul> </li>
<li> <h2> المحفوظات </h2>
<ul>
<li> <a href = '/blog/2007/04/'> April 2007 </a> </li>
<li> <a href = '/blog/2007/03/'> مارس 2007 </a> </li>
<li> <a href = '/blog/2007/02/'> February 2007 </a> </li>
<li> <a href = '/blog/2007/01/'> يناير 2007 </a> </li>
</ul>
</li>
</ul>
</nav>
<Tower>
<p> حقوق الطبع والنشر 2007 Elliotte Rusty Harold </p>
</tower>
</body>
</html>
الآن لا توجد حاجة إلى DIV. لم تعد بحاجة إلى تعيين سمة الفصل بنفسك ، ويمكنك استنتاج معنى كل جزء من اسم العنصر القياسي. هذا مهم بشكل خاص لمتصفحات الصوت ومتصفحات الهاتف المحمول وغيرها من المتصفحات غير القياسية.
(يتبع)