آموزش HTML5 – قسمت چهارم

آخرین بروز رسانی: شهریور ۱۸, ۱۳۹۶

آموزش HTML5 – آموزش تگ های معنایی

امروز در راستای آموزش HTML5 با آموزش تگ های معنایی details، summary، main و mark همراه شما عزیزان هستیم. در آموزش های قبلی سایر تگ های معنایی در HTML5 توضیح داده شد. در این مقاله آموزش تگ های معنایی را به پایان می رسانیم پس با ما همراه باشید.

عنصر main در HTML5

تگ main از تگ های معنایی در HTML5 است که برای مشخص کردن محتوای اصلی سند استفاده می شود. این عنصر نمی تواند داخل تگ های <aside>، <nav>، <footer>،<header> و <article> قرار گیرد و در هر سند فقط می توان از یک تگ main استفاده کرد.
تگ main در HTML5 جدید است و از ویژگی های عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
در جدول زیر می توانید اولین نسخه ی مرورگرهایی که از عنصر main پشتیبانی می کنند را ببینید.

Firefox

 

opera Internet explorer safari chrome
4.0 11.1 پشتیبانی نمی شود 5.0 6.0

به کد زیر دقت کنید.

خروجی کد بالا:

تگ معنایی main

عنصر mark در HTML5

تگ mark برای هایلایت کردن قسمتی از متن به کار می رود. این تگ از تگ های معنایی و جدید در HTML5 است و از ویژگی های عمومی و رویدادهای عمومی در html پشتیبانی می کند.
اعدادی که در جدول مشاهده می کنید، اولین نسخه از مرورگرهایی است که از این عنصر پشتیبانی می کنند.

Firefox

 

opera Internet explorer safari chrome
4.0 11.1 9.0 5.0 6.0

نحوه ی استفاده از این تگ را می توانید در مثال زیر ببینید.

 

خروجی کد بالا:

تگ معنایی mark

عنصر details و summary در HTML5

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

Firefox

 

opera Internet explorer safari chrome
49.0 15.0 پشتیبانی نمی شود 6.0 12.0

به کد زیر توجه کنید.

 

خروجی کد بالا:

تگ details

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

تگ معنایی details

به صورت پیش فرض توضیحات مخفی هستند اگر بخواهید از همان ابتدا توضیحات را هم ببینید باید خاصیت open را به تگ details اضافه کنید.

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

مطالب مرتبط

کلیه حقوق مادی و معنوی این اثر متعلق به طراحی سایت اصفهان وب یار می باشد CopyRight 2017

بالا