بررسی سریع تگ های HTML5

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

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

تگ ها

توضیحات

<canvas>

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


تگ ها

توضیحات

<audio>

فایل های صوتی را به وسیله این تگ معرفی می کنیم و تظیمات آن را مشخص می کنیم.

<video>

جهت تنظیم و معرفی فایل تصویری به مرورگر استفاده می شود.

<source>

محل قرارگیری فایل صوتی یا تصویری را که در 2 تگ قبلی معرفی کردیم بر روی هاست مشخص می کنیم.

<embed>

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

<track>

می توان با استفاده از این تگ مقدار زیرنویس و یا کپشن را برای فایل ویدئویی و یا صوتی مشخص کرد.


تگ ها

توضیحات

<datalist>

می توان مقادیر پیش فرضی را برای یک تگ ورودی متن مشخص کرد.

<keygen>

میتوان برای فرم های یک key-pair تعریف نمود.

<output>

نمایش نتیجه یک محاسبه .


تگ ها

توضیحات

<article>

تعریف یک بخش مجزا برای تولید محتوا

<aside>

برای تعریف کردن محتوایی در کنار محتوای اصلی و لزوماً به معنای سایدبار نیست!

<bdi>

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

<command>

یک کلید جهت صدور فرمان به مرورگر ایجاد می کند (فعلاً در مرورگرها ساپورت نمی شود)

<details>

قابلیت ایجاد متن توضیحی را برای یک المان فراهم می کند که کاربر قادر به مخفی کردن و نمایش آن می باشد.

<dialog>

یک پنجره برای نمایش متن ایجاد می کند (فعلاً در مرورگرها ساپورت نمی شود).

<summary>

عنوان متنی را که می خواهیم در مورد آن توضیحات بدهیم در درون تگ <details> می نویسیم.

<figure>

محلی برای نمایش نمودارها و تصاویر و ...

<figcaption>

توضیح برای تگ بالایی ایجاد می کند.

<footer>

برای یک section و یا یک article می توان فوتر تعریف کرد.

<header>

تعریف یک بخش هدر برای یک section و یا یک article.

<mark>

می توان یک متن و یا بخشی از آن را مارک کرد (همانند کاری که مارکر ها در نوشتن بر روی کاغذ انجام می دهند.)

<meter>

ایجاد یک نمای گرافیکی برای نمایش یک مقدار ، مثل اینکه با نمودار گرافیکی مقدار 2 از 10 نمایش داده شود!

<nav>

ایجاد یک منوی افقی

<progress>

ایجاد یک نوار پیشرفت همانند همان نواری که هنگام کپی کردن یک فایل می بینید و روند پیشرفت را نشان می دهد!

<ruby>

روشی برای نمایش تلفظ کلمات در زبان های آسیای شرق

<rt>

توضیح طرز تلفظ حرف یا کلمه در زبان های آسیای شرق که در تگ ruby استفاده می شود و مقدار تلفظ در بین این علامت قرار می گیرد.

<rp>

اگر مرورگر تگ ruby را ساپورت نکند این تگ به مرورگر می گوید که چه چیزی را نشان دهد

<section>

تعریف یک بخش در محتوا

<time>

تعریف تاریخ و زمان در محتوا

<wbr>

از شکسته شدن خط یعنی ایجاد یک line-break به خاطر طول نوشته جلوگیری می کند.


همچنین بد نیست اشاره ای داشته باشیم به تگ های حذف شده در زبان HTML5 :

  •     <acronym>
  •     <applet>
  •     <basefont>
  •     <big>
  •     <center>
  •     <dir>
  •     <font>
  •     <frame>
  •     <frameset>
  •     <noframes>
  •     <strike>
  •     <tt>

 

ناحیه کاربری