اموزش HTML 5 جلسه دوم

با عرض سلام و خسته نباشید عرفان هستم و با جلسه دوم آموزش HTML 5 در خدمت شما هستیم.
همون طور که در جلسه ی قبل بحث کردیم این بار با یک سری از قابلیت های دیگه جدید HTML5  آشنا میشویم
یکی از قابلیت های جدیدی که به HTML 5 اضافه شده که در گذشته خیلی ضعیف بود قضیه ساختار بندی وبسایت مون بود یعنی برای مثلا ایجاد هدر و بدنه و فوتر و سایدبار باید یه div ایجاد میکردیم و یه کلاسی به عنوان sidebar یا header یا footer یا .. می دادیم که برای SEO تاثیری نداشت. اما با روی کار اومدن HTML5 همه چی تغییر کرد
اولین تگی که بررسی میکنیم header هست
نگ هدر به طور کلی دو نقش اصلی رو میتونه بازی کنه. یکی عنوان و بخش بالایی سایت (لوگو و شعار و ...)
یکی هم برای بخش عنوان هر مقاله (این مورد رو وقتی یکم رفتیم جلوتر خدمتتون توضیح میدم )

<header>
<h1>Company Name</h1>
<h3>My company is Awesome</h3>
<p>Some additional information here</p>
</header>

این یک مثالی از تگ هدر بود همون طور که دیدید میتونید هر چیزی که مرتبط با عنوان وبسایت یا اون پیج باشه رو توی این تگ قرار بدید
تگ footer :‌
این تگ در دوجا کاربرد داره:
۱. فوتر کل صفحه
۲. فوتر یک مقاله (که مثلا شامل اطلاعاتی درباره مقاله میشه )(باز هم تکرار میکنم مقاله رو بررسی کنیم هم فوتر در مقاله رو متوجه خواهید شد هم هدر در مقاله را)

<footer>
<p>Copyright 2015 Karen TM:D</p>
<p>Contact information: <a href="mailto:[e-mail]">
[e-mail]</a>.</p>
</footer>

این هم یک مثال از تگ فوتر  بود که شامل مثلا کپی رایت و اطلاعات تماس و ... بشه
نگ بعدی مورد بررسی تگ section هست
تگ section برای نشان دادن یک بخش از صفحه است
این تگ میشه گفت مادر تگ هدر و فوتر هست و به نوعی هدر و فوتر ازش خاصیت هایی رو به ارث بردند

<section>
<h1>punisher</h1>
<p>Some Info Here....</p>
</section>

حالا میرسیم به تگ مقاله یا همون article که قبلا ازش حرف زدیم :
از این تگ مثلا توی یک بلاگ میتونیم به عنوان جایگاهی برای یک پست از بلاگ به کار برد
ولی به طور کلی بخشی است که اصل مطلب وب پیجتون رو می نویسید
و یه شکل زیر است :

<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
</article>

تگ بعدی برای نشان دادن یک سری اطلاعاتی است که خیلی مهم نیستند بهترین استفاده برای این تگ میتونه به عنوان sidebar باشه :

<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

البته این به این معنا نیست که اطلاعاتی که در این تگ میدید میتونه کاملا خارج از موضوع باشه
همچنین شاید این سوال برای شما پیش اومده باشه که خوب مگه اون تگ هایی که خودمون تعریف می کردیم (div.footer , div.header, ...) مگه مشکلی داشتن ؟
خوب بله از نظر ایندکس کردن خییلییی مشکل داشتن چون که هر کس برای خودش میتونست یه کلاس یا آی دی خاصی برای هدر یا فوتر یا بدنه پیجش تعریف کنه پس کراولر نمیتونه علم غیب باید داشته باشه که بتونه همه ی این مطالب رو خزش کنه و مهم ها رو از غیر مهم ها تشخیص بده بنابراین این تگ ها رو تعریف کردن تا کراولینگ آسون تر بشه (سری به بخش  SEO بزنید )
یک تگ دیگه هم هست که آخرین مبحث امروز هست تگ nav هست :
این تگ برای ایجاد پیج نویگیشن هست یعنی مثلا برای ایجاد یک سری لینک هایی که برای کاربر ها نمایش داده بشه تا توجه اون ها حلب بشه
این تگ به صورت زیر هست :

<nav>
<a href="home.html">Home</a>
<a href="about.html">About Us</a>
<a href="recent.html">Recent Posts</a>
<a href="login.html">Login</a>
<a href="blog.html">Blog</a>
</nav>

موفق باشید

پایان جلسه دوم

جلسه سوم فردا شب