مشخصات مقاله
-
2882
-
0.0
-
5680
-
0
-
0
آموزش Semantic section
آموزش Semantic section
ویژگی های خوانده های W3C - عنصر بخش (section) یک بخش کلی از یک داکیومنت یا یک برنامه را مشخص می کند. در این متن، بخش گروه بندی معنایی محتوا با یک تیتر می باشد.
در تصویر زیر قسمت های مشخص شده بهترین استفاده برای <section> را نشان می دهند.
توجه داشته باشید که عنصر section در اینجا برای جایگزین کردن عنصر div به کار نمی رود.
شما نباید از عنصر بخش برای موارد زیر استفاده کنید.
- برای یک محتوای منسجم. شما نباید از بخش برای محتوا در RSS feed استفاده کنید. اگر درحال ایجاد وب سایت وبلاگ می باشید از عنصر section برای ورودی وبلاگ خود استفاده نکنید، بلکه باید از عنصر آرتیکل استفاده کنید. به هرحال یک عنصر آرتیکل می تواند دارای عناصر section نیز باشد.
- صرفا به هدف لی اوت. از عنصر <div> به عنوان ظرف عمومی به هدف طراحی استفاده کنید.
1 | <section> <h1>Application</h1> <ul> <li>Education</li> <li>Entertainment</li> <li>Family</li> <li>Games</li> <li>News and Weather</li> </ul> </section> <button></button> |
شاید متوجه شده باشید که من از <h1> برای عنوان در عنصر بخش استفاده میکنم. عنصر بخش در واقع نوعی تقسیم بندی محتوا در HTML5 می باشد.
تقسیم بندی محتوا
- همیشه زیرمجموعه ای از نزدیک ترین پیش گام آن مانند <body> ، <article> یا یک عنصر <section> دیگر می باشد.
- اوت خود را دارد که می تواند از داکیومنت های اصلی مستقل باشند. شما به استفاده از h1 تا h6 در داخل عنصر بخش تشویق می شوید، بدون اینکه در مورد آنچه در بیرون بخش اتفاق افتاده اذیت شوید.
- می توانند <header>، <hgroup> و <footer> خود را داشته باشند.
بنابراین اگر آن را مانند زیر بنویسید بسیار خوب است. درواقع شما برای انجام چنین کاری بسیار تشویق می شوید.
1 | <body> <h1>Apples</h1> <p>Apples are fruit.</p> <section> <h1>Taste</h1> <p>They taste lovely.</p> <section> <h1>Sweet</h1> <p>Red apples are sweeter than green ones.</p> </section> </section> <section> <h1>Color</h1> <p>Apples come in various colors.</p> </section> </body> <button></button> |
اگر شما در حال طراحی داکیومنت HTML5 می باشید، پیشنهاد می کندم را HTML5 Outliner مشاهده کنید، که اگر اوت لاین شما درست نباشد به شما می گوید.