اموزش و بحث در مورد Html5 و عناصر ان

[armin_]

سلام
من در پی اموزش Html 5 بر امدم حالا خودم یک چیز های یاد گرفتم از طرفی هم بنا به به بررسی های خودم چیز های هم نوشتم.
می خواستم مطالبی که یاد گرفتم این جا بنویسم تا افراد دیگه هم استفاده کنن و سوال های خودم هم به پاسخ برسه و کلا همه با هم مشارکت کنیم دیگه.
تو ارسال بعدیم می خوام عنصر header بررسی کنم
من طبق بررسی هام و چیز های که دیدم اختلاف نظر هست انگاری کجا این عنصر استفاده بشه
مثلا یک سایت فقط تو بخش هدر صفحه استفاده کرده یک سایت دیگه هم تو هدر هم تو تایتل مقالت صفحه Single
یک سایت دیگه تو دو تای بالا + تایتل پست های سایت تو صفحه اول
من اطالاعات خودم در زمینه بررسی برچسب header قرار می دم و سوالم اینه که ایا به جز
1.هدر صفحات
2.تایتل مقالات یا پست ها در صفحه single
3.تایتل پست های صفحه اول سایت
جای دیگه هم از عنصر header استفاده می کنند؟
تو یک سایتی دیدم دو بخش امتیاز دهی به سایت و تعداد کتاب ها و ویدیو های اموزش هم تو عنصر header بود حس کردم باید کل بخش های مهم سایت تو عنصر header باشه درسته؟

 

[armin_]

در ابتدا باید گفت که دلیل استفاده از عناصر جدید چیست؟
* این عناصر نشان می دهند که چه محتوایی درون انها قرار دارد.یعنی عناصر جدید اچ تی ام ال 5 معرف محتوایی می باشند که در درون انهاست.برای مثال وقتی با عنصر
header
برخورد می کنیم می دانیم که درون این عنصر بخش هدر سایت بعلاوه بخش منو ها یا ناوربری سایت قرار دارد.
عنصر header
این عنصر را در بالای کد خود در زیر عنصر
Body
قرار می دهیم به عبارتی زمانی که می خواهیم هدر سایت خود را طراحی کنیم با این عنصر اغاز می کنیم و پایان این عنصر زمانی هست که کار ساخت هدر سایت به پایان می رسد.
در مثال ساده باید گفت می خواهیم سایت درست کنیم که یک شعار یک لوگو و یک منو یا همان بخش ناوبری در خود دارد و این ها قسمت هدر سایت را تشکیل می دهند.
در قدیم یعنی قبل از نسخه اچ تی ام ال 5 برای اینکه این بخش را بسازیم ابتدا یک
Div
می ساختیم و به ان کلاس یا ایدی می دادیم و کار را شروع می کردیم.
حال با استفاده از عنصر
header
شروع می کنیم و کد های بخش هدر را می نویسیم و در پایان عنصر را می بندیم.
تعریف علمی تر و بهتر این عنصر را می توان اینگونه نوشت : گروهی از اطلاعات ابتدایی و یا لینک های پیمایش کمکی (برگرفته از کتاب اموزش اچ تی ام ال 5 و سی سی اس 3 در قالب پروزه).
عنصر
header
معرف تیتر مطلب نیز هست یعنی ما می توانیم به دفعات از این عنصر استفاده کنیم برای مثال در یک سایت خبری در صفحه اول سایت 5 خبر داریم ما می توانیم از 6 عنصر
header
استفاده کنیم به عبارتی یک عنصر برای کل صفحه که همان قسمت هدر سایت است و 5 عنصر دیگر برای تیتر هر خبر یعنی تیتر و هر انچه که مربوط به تیتر می شود مانند نویسنده خبر ساعت انتشار و ... را درون این عنصر قرار می دهیم شکل بستن عنصر نیز به این صورت می باشد.
</header>
باید توجه داشت که تنها تیتر مطلب و هر انچه که در تیتر نوشته می شود درون این عنصر قرار می گیرد نه کل محتویات مطلب
برای مثال :

<headerer> 
<h2><a href="http://html5doctor.com/taking-web-audio-offline-in-ios-6-safari/">Taking Web Audio Offline in iOS 6 Safari</a></h2> 
<small> <time datetime="2010-12-08" pubdate>November 27th, 2012</time> by <a href="http://html5doctor.com/author/alexg/" title="Posts by Alex Gibson" rel="author">Alex Gibson</a></small> </headerer> <div class="entry"> 
<p>Playing cached audio for offline use on iOS Safari has long been a challenge that has proved to be mission impossible. But with the advent of the WebKit-only, it is now finally achievable — although you still need to jump through a few hoops.</p> 
</div> 
</article> 
<!-- end .post --> 
<article class="post"> 
<headerer> 
<h2><a href="http://html5doctor.com/interview-with-robin-berjon-html5-editor/">Interview with Robin Berjon, HTML5 editor</a></h2> 
<small> <time datetime="2010-12-08" pubdate>November 13th, 2012</time> by <a href="http://html5doctor.com/author/brucel/" title="Posts by Bruce Lawson" rel="author">Bruce Lawson</a></small>

همان طور که شاهد هستید قسمت تیتر و تاریخ پست و ... دروع عنصر
headerer
قرار گرفته است سپس عنصر بسته شده و محتویات مطلب
entry
نوشته شده است.
در یک تعریف کلی می توان گفت از عنصر
header
برای تیتر و سربرگ و بخش اغازی صفحه یا نوشته(پست) استفتده می کنیم

 

[armin_]

کسی نظری نداره؟

 

[armin_]

عنصر section
این عنصر یکی دیگر از عناصر جدید اچ تی ام ال 5 به حساب می اید.
چه زمان و در کجا می توانیم از این عنصر استفاده کنیم؟
در ابتدا باید گفت که این عنصر برای مشخص کردن محتوای درونش به کار می رود یعنی زمانی که بخشی از محتوا را درون عنصر
section
استفاده می کنیم به این معناست که ان محتوا با هم ارتباط دارند.
چه زمان از عنصر
section
استفاده نماییم؟
شما یک بخش از سایت خود را نگاه کنید برای مثال بخش نظرات در یک جمله می توان گفت که این نوشته ها با هم در ارتباط هستند یعنی همه انها نظرات هستند و در مورد مطلب ارسال شده در سایت داده شده اند.
پس نتیجه می گیریم که نظرات سایت با هم در ارتباط هستند یعنی این محتوا(منظور نظرات) با هم ارتباط دارند پس می توانند داخل عنصر
section
باشند.
مثال دیگر
صفحه یک سایت خبری را در نظر بگیریم که 5 خبر در ان نوشته شده است.
می توانیم این پنج خبر را درون یک عنصر
section
قرار دهیم زیرا همه انها پست های ارسالی سایت هستند و با هم ارتباط دارند.
کمی دقیق تر می شویم این پنچ خبر در مورد فوتبال ایران است و اخبار فوتبال ایران می باشد پس داخل عنصر قرار می گیرند
سپس از این 5 خبر دو خبر مربوط به استقلال دو خبر سپاهان و یک خبر تراکتور سازی می باشد.
حال ما نوشته های که با هم در ارتباط هستند را درون عناصر خود قرار می دهدیم به این صورت
مثال :

<section>
iran  football news
<section>
esteglal news
news 1
news 2
</section>
<section>
sepahan news
news 1
news 2
</section>
<section>
teraktorl news
news 1
</section>
</section>

همان طور که شاهد هستید ما این عناصر را به صورت تو در تو نیز می توانیم استفاده نماییم.
باید توجه داشت که این عنصر نوع محتوای درون خود را نشان نمی دهد یعنی با دیدن عنصر
section
نمی توان گفت که این یک ارسال سایت یا یک منو یا یک نظر سایت است بلکه با دیدن این عنصر می فهمیم که مطالبی درون ان است که با هم ارتباط دارند .
عنصر
Section
یک عنصر با معنای عمومی و کلی است از این رو اگر به دنبال عنصری هستید که به شکل خاص تر محتوا را دسته بندی کند از عنصر های مناسب دیگر مانند:
artical ,nav,aside
استفاده کنید.
در پایان باید گفت هر موقع توانستید ارتباط محتوا را در یک جمله ساده بیان کنید این محتوا درون عنصر یا عنصر
Section
قرار می گیرد.

 

[armin_]

کسی اطالعات بیشتر و بهتر نداره درباره عنصر Section?

 

[ahmadelahi]

ممنون خیلی مفید بود .
انشالله موفق باشی .

 

[coder.developer]

ببین اگه بخوایم یه تعریف کلی از section بگیم در واقع اینه که بسیار شبیه div عمل می کنه و بیشتر برای تقسیم بندی صفحه در html5 هستش