9 چیز که باید در مورد HTML5 بدانید
1396/09/13 16:51 , شایان مسلمی

9 چیز که باید در مورد HTML5 بدانید

HTML5 آخرین و بزرگترین نسخه از زبان گسترده ی وب است.تغییرات زیادی در این نسخه نسبت به نسخه ی قبل صورت گرفته است و اگر شما از آن ها استفاده نمیکنید، مطمئناً عملکردهای خوبش را از دست خواهید داد.

ما در این مقاله نمیتوانیم تمامی اصول موجود در HTML5 را پوشش بدهیم،اما این نه اصل ، جزو مهمترین عناصر هستند:

معرفی اصل سمانتیک

مانند بیشتر فضای اینترنت، HTML5نیز بیشتر تمرکز برروی سمانتیک است.حالا، به جای تگ هایی که برای فرمت به کار برده میشود، آن ها را برای اینکه به مرورگر ها و موتورهای جست و جو بگویید که چه چیزی احاطه شان کرده، میتوانید استفاده کنید.

برای مثال، <p>، به یک مرورگر میگوید که این شامل یک پاراگراف است.<article>، به یک مرورگر میگوید که شامل محتوای اصلی صفحه است.

وب سمانتیک هنوز هم در حال توسعه است و ما تنها قسمتی از آن را میگوییم. HTML5 کمک میکند که سمانتیک بخش بیشتری از اینترنت را شامل بشود و این برای آینده ی پردازش سمانتیکی میتواند خوب باشد.

1.<article>

تگ <article> نشان دهنده ی "محتوای مستقل " است .آسان ترین مثال یک مقاله است.برای این مقاله، تگ را قبل از معرفی باز میکنید و پس از جمع بندی آن را میبندید.

<article>

 All of the text in your self-contained section.

</article>

اما راه های دیگری نیز وجود دارد که میتوانید از آنها نیز استفاده کنید.برای مثال، بسیاری از وبلاگ های آشپزی شامل داستان های شخصی هستند درباره ی اینکه دستورالعمل درست یک چیز چگونه است و چرا این برای نویسنده اهمیت دارد؟میتوانید ببینید که این 9 اصل چگونه میتوانند کار خود را انجام دهند.

در یک انجمن، هر پست میتواند به صورت مستقل در نظر گرفته بشود و هرکدام نیز با تگ <article> نشخص میشوند.در بیشتر قسمت ها،میتواند روی محتوای اصلی صفحه استفاده بشود.اما بدانید که میتوانید از آنها برای روش های خلاقانه دیگری نیز استفاده کنید.

2.<section>

تگ مشابه به<article> ، <section> است.این به معنی گروه ریشه ای آسان است،که اغلب با یک هِدینگ همراه است.پس <section>  نیز داخل <article> قرار میگیرد.

نیازی نیست.W3نشان میدهد که این بستگی به ساختار سایت دارد و شما ممکن است که محتواهای زیادی در بخش های زیادی از صفحه تان داشته باشید. پس از آن، قسمت <section>  درون <article> قرار میگیرد.

<article>

 <section>

 <h2>Why You Need a DAC</h2>

 <p>Everything sounds better.</p>

 </section>

 <section>

 <h2>How to Set up a DAC</h2>

 <p>Here's what you need to do . . .</p>

 </section>

شما میتوانید در صورت مطابقت با صفحه تان، قسنت های بیشتری نیز داشته باشید.به یاد داشته باشید که یک بخش به سادگی به معنی “thematic grouping of content" است و میتواند استفاده های زیادی داشته باشد.

3.<header>

این اصل باید به عنوان"محفظه ای برای محتوای مقدماتی" کاربرد داشته باشد.به طور خلاصه، این قسمتی از صفحه تان است که به مردم کمک میکند تا موضوع را بشناسند.

اما مراقب باشید! میتوانید این محفظه را بیش از یک بار استفاده کنید.برای مثال، ممکن است از آن برای شناسایی عنوان صفحه و پاراگراف مقدماتی از پست وبلاگتان  استفاده کنید .اما میتوانید از آن برای شناسایی محتوای مقدماتی هر بخش نیز استفاده کنید.

<article>

 <header>

 <h1>Everything You Need to Know about DACs</h1>

 <p>Here's a useful introduction to DACs...</p>

 </header>

 The rest of your article goes here.

بخش هِدِر معمولاً دارای حداقل یک تگ heading است.H1 و H2 و شبیه به این دو. به طور کلی، اگر شما از یک تگ رأسی استفاده میکنید، پس حتماً محتوای هدر نیز دارید.

4.<footer>

W3 میگوید که تگ های footer معمولاً شامل " نویسنده ی مطالب، اطلاعات کپی رایت، لینک های شرایط استفاده و غیره است. شما میتوانید به این تگ ها مثل عوامل "خانه دار" حساب کنید.

<footer>

 Copyright: MakeUseOf, 2017.

 <a href="//www.makeuseof.com/contact/">Contact Us</a>

</footer>

شما میتوانید بیش از یک بخش فوتر برروی صفحه تان داشته باشید.این احتمالاً یک ایده ی خوب محسوب میشود، به علاوه ی اینکه تمامی این اطلاعات در یک لوکیشن و فضای تکی است.

5.<nav>

این تگ شامل لینک های هدایت شونده برای صفحه ی موردنظر است.در نظر داشته باشید که فقط بخش هدایتی این تگ را میگیرد، نه تمامی لینک های روی صفحه تان.این تگ برای نوارهای نویگیشن و ابزارهای هدایتی است.

<nav>

 <a href="//www.makeuseof.com/>Home</a>

 <a href="//www.makeuseof.com/about">About</a>

</nav>

این تگ واقعاً ساده است.از این برای معین سازی بخش نویگیشن استفاده کنید و تنها یکبار آن را به کار ببرید.

6.<aside>

یکی از جذاب ترین اصل های موجود در HTML5 ، aside است.W3 میگوید که این تگ چیزی غیرکاربردی از " محتوای گوشه ای قرار داده شده" است.

به طور خلاصه، aside هرچیزی است که مرتبط با محتوا (اما جدا از هم) باشد .این تگ میتواند در نوارهای کناری استفاده شود و باعث جزئیات بخشی به محتوایتان بشود.زمانی که تحت تگ های <article> استفاده بشود، اطلاعاتی اضافه تری فراهم میکند که نیازی به درک محتوای اصلی نباشد.

برای مثال، اگر ما در این مقاله یک نوار جانبی داشتیم و در آن از تاریخچه ی HTML5 صحبت می شد، میتوانست به عنوان aside باشد.

اما تگ <aside> ، میتواند در خارج از محتوا نیز مورد استفاده قرار بگیرد.در این مورد باید گفت که این تگ برای اطلاعات اضافی درباره ی سایت کاربرد دارد.ما میتوانیم نوار کناری نیز داشته باشیم.مثلاً مانند این:

<article>

 The main article goes here.

 <aside>MakeUseOf is focused on bridging the connection between users,

 computers, devices and the internet through education.</aside>

 The article continues here.

به دلیل این که کاربردهای متعددی برای این تگ وجود دارد،میتواند گیج کننده باشد.اگر در نظر داشته باشید که این تگ "محتوای ثانویه " است و همیشه نباید در سایدبار باشد،ایده ی بهتری درباره ی استفاده از آن ها خواهید داشت.

7.<details>

بسیاری از وب سایت ها اطلاعاتی دارند که نیاز است نمایش داده بشوند، اما نه به صورت دائمی.مثلاً اطلاعات کپی رایت برای یک عکس.این نوع از اطلاعات دقیقاً چیزی است که تگ جزئیات برای آن ها ایجاد شده است.

زمانی که شما از یک تگ detail استفاده میکنید شما متن های مخفی ایجاد میکنید که به راحتی میتوانند نمایش داده بشوند.مثال:

<details>

 <summary>

 Click here to see information.

 </summary>

 Here's more detailed information you don't need right away.

</details>

 

تگ <summary> جمله ای که نشان داده میشود را معین میکند، در حالی که سایر محتوا پنهان اند.نکته این است که میتوانید از سایر تگ ها در بخش جزئیات استفاده کنید:headings،sections و مشابه.

 

8-9. <figure> و <figcaption>

نگران نباشید، تگ <img> که سال ها از آن استفاده میکردید جایی نرفته است.<figure> برای تگ عکس به کار میرود و اجازه میدهد که مرورگر شما بداند که این عکس،جدول، لیست کد یا سایر اشکال است یا خیر.

اگر یک فیگور از صفحه حذف شود،اثری بر جریان محتوا ندارد.

<figcaption> به داخل تگ فیگور میرود و یک عنوان را برای یک عکس تعریف میکند.این تگ شبیه به این است:

<figure>

 <img src="makeuseoflogo.png" width="800px">

 <figcaption>This is our logo!</figcaption>

</figure>

از مزایای HTML5 استفاده کنید

عناصر جدیدی که در HTML5 استفاده شده اند،قدرت زیادی به این زبان اضافه کرده اند،مخصوصاً برای اهداف سمانتیک.عناصر اضافه ی دیگری برای فرمتینگ، اندازه گیری اسکالر،فرآیندها و غیره نیز وجود دارد.

اگر بتوانید در 9 اصلی که بیان شد، حرفه ای شوید، استفاده ی خوبی از HTML5  برده اید و اگر با HTML آشنایی ندارید، مثال های بیشتری را ببینید.

 

 

 

 

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات