معرفی و بررسی ۹ تگ جدید در HTML5

۳۸۰ بازدید

آخرین به‌روزرسانی: ۵ اردیبهشت ۱۳۹۷

زمان مطالعه: ۴ دقیقه

دانلود PDF مقاله

فهرست مطالب این نوشته

مقدمه‌ای بر تگ‌های متنی

HTML5 آخرین و بزرگ‌ترین نسخه از زبان نشانه‌گذاری در وب است. برخی از تغییرات این نسخه بسیار کارآمد هستند، که اگر از آن‌ها استفاده نکنید، خیلی چیزها را از دست خواهید داد. برای تشریح تغییرات آخرین نسخه HTML5 زمان زیادی لازم است، مقاله‌های بسیاری نیز می‌توان در این مورد نوشت. اما به طور حتم ۹ مورد زیر، مهم‌ترین آن‌ها هستند.

مقدمه‌ای بر تگ‌های متنی

همانند بسیاری از زمینه‌های کامپیوتر، تغییرات HTML5 بیشتر متمرکز بر معنا و متن است. به عنوان مثال تگ <p> به زبان ساده به مرورگر می‌گوید که این متن حاوی یک پاراگراف است. تگ <article> به مرورگر می‌گوید که این متن حاوی محتوای اصلی صفحه است. وب بر پایه معنا هنوز در حال توسعه است و تکنولوژی تازه شروع به استفاده از آن کرده است. HTML5 کمک می‌کند تا علامت‌گذاری متنی به بخش‌هایی بسیار بزرگتر از اینترنت راه پیدا کند و این امر برای آینده پردازش‌های معنایی بسیار مهم است.

1. <article>

تگ <article> محتوای مستقل یک متن را به طور مشخص نشان می‌دهد. مثال ساده آن یک مقاله است، برای این مقاله خاص قبل از شروع تگ را باز کنید و بعد از پایان آن را ببندید.

1<article>
2 All of the text in your self-contained section.
3</article>

راه دیگری برای این کار وجود دارد که می‌توانید از آن استفاده کنید. به عنوان مثال بسیاری از وبلاگ‌های پخت و پز شامل دستورپخت‌ها و داستان‌هایی درباره تهیه مواد اولیه غذا است. پس از آن متنی درباره نحوه طبخ غذا وجود دارد. ممکن است بگویید هر کدام از این مطالب می‌توانند به عنوان یک عنصر با یک تگ خاص نوشته شوند. اما هر پست یا موضوعی که در هر صفحه یا هر انجمن نوشته می‌شود، می‌تواند به صورت خودکار با تگ <article> مشخص شود.

2. <section>

تگ بعدی که به طور مستقیم با <article> ارتباط دارد، <section> است. برای تعریف موضوعی یک محتوا در یک بند، در میان محتوا اصلی می‌توانید از این تگ استفاده کنید. البته W3 اشاره می‌کند که استفاده از تگ <section> بستگی به نوع وب‌سایت شما دارد. مثلا اگر یک وب‌سایت خبری را مدیریت می‌کنید که در بخش‌های مختلف صفحه خبرهای گوناگونی عنوان می‌شود، می‌توانید از این تگ استفاده کنید.

1<article>
2 <section>
3 <h2>Why You Need a DAC</h2>
4 <p>Everything sounds better.</p>
5 </section>
6 <section>
7 <h2>How to Set up a DAC</h2>
8 <p>Here's what you need to do . . .</p>
9 </section>

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

3. <header>

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

1<article>
2 <header>
3 <h1>Everything You Need to Know about DACs</h1>
4 <p>Here's a useful introduction to DACs...</p>
5 </header>
6 The rest of your article goes here.

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

W3 می‌گوید بخش <footer> برای نوشتن پاورقی‌ها، اطلاعات نویسنده و هر اطلاعات تکمیلی است که متن را کامل می‌کند. می‌توانید از این بخش برای نمایش اطلاعات کلی وب‌سایت، آدرس‌ها و شماره تماس استفاده کنید.

1<footer>
2 Copyright: MakeUseOf, 2017.
3 <a href="//www.makeuseof.com/contact/">Contact Us</a>
4</footer>

همین‌طور می‌توانید چند پاورقی مختلف داشته باشید. اما از آن‌جا که پاورقی‌ها شامل اطلاعات کلی هستند، نیازی به تکرار دوباره آن‌ها نخواهد بود.

5. <nav>

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

1<nav>
2 <a href="//www.makeuseof.com/>Home</a>
3 <a href="//www.makeuseof.com/about">About</a>
4</nav>

6. <aside>

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

توجه داشته باشید که این تگ می‌تواند بدون ارتباط با متن اصلی نیز اضافه شود. مثلا اطلاعات اصلی سایت را می‌توانید با این تگ به قسمت کناری وب‌سایت اضافه کنید.

1<article>
2 The main article goes here.
3 <aside>MakeUseOf is focused on bridging the connection between users,
4 computers, devices and the internet through education.</aside>
5 The article continues here.

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

7. <details>

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

1<details>
2 <summary>
3 Click here to see information.
4 </summary>
5 Here's more detailed information you don't need right away.
6</details>

تگ <summary> محتوای داخل باکس مخفی را بیان می‌کند. در حالی که از تگ <details> برای مخفی کردن این مطلب استفاده می‌کنید. نکته دیگر این‌که می‌توانید تگ‌های دیگری را به جای تگ <summary> در این قسمت اضافه کنید.

8. <figure>

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

اگر یکی از تگ‌های <figure> حذف شود به محتوای اصلی آسیبی وارد نمی‌شود.

9. <figcaption>

<figcaption> تگی است که یک عنوان یا یک توضیح برای عکس و تصویر شما مشخص می‌کند و می‌تواند به صورت زیر اجرا شود.

1<figure>
2 <img src="makeuseoflogo.png" width="800px">
3 <figcaption>This is our logo!</figcaption>
4</figure>

این راه به شما این امکان را می‌دهد که یک عنوان به تصویر خود اضافه کنید بدون اینکه پیچیدگی‌های برنامه‌نویسی را تجربه کنید.

برتری‌های HTML5 را تجربه کنید

تگ‌های جدیدی که به HTML5 اضافه شده، قابلیت‌های جدیدی برای ترکیب‌بندی و ایجاد باکس‌های متنی اضافه کرده است. اگر بتوانید از این 9 تگ که در اینجا توضیح داده شده استفاده کنید، به طور موثری در کار خود پیشرفت خواهید کرد. اگر به این مقاله علاقه‌مند بوده‌اید، شاید مقاله‌های زیر نیز برای شما جذاب و مفید باشد: