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

آخرین بروز رسانی: شهریور ۱۹, ۱۳۹۶
آموزش 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
۴٫۰ ۱۱٫۱ پشتیبانی نمی شود ۵٫۰ ۶٫۰

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

<main> <article> <h1 >New HTML5 Elements</h1> <p> The most interesting new HTML5 elements are:<br> New semantic elements like header, footer, article, and section.<br> New attributes of form elements like number, date, time, calendar, and range.<br> New graphic elements: svg and canvas.<br> New multimedia elements: audio and video. </p> </article> </main>

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

تگ معنایی main

عنصر mark در HTML5

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

Firefox

 

opera Internet explorer safari chrome
۴٫۰ ۱۱٫۱ ۹٫۰ ۵٫۰ ۶٫۰

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

<p> HTML tags normally come in pairs like <p> and </p><br> The start tag is also called the <mark>opening tag </mark> , and the end tag the <mark> closing tag </mark>. </p>

 

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

تگ معنایی mark

عنصر details و summary در HTML5

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

Firefox

 

opera Internet explorer safari chrome
۴۹٫۰ ۱۵٫۰ پشتیبانی نمی شود ۶٫۰ ۱۲٫۰

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

<details> <summary> HTML details Tag </summary> <p>The details tag specifies additional details that the user can view or hide on demand.< / p > <p>The details tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the details tag.< / p > </details>

 

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

تگ details

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

تگ معنایی details

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

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

نوشته آموزش HTML5 – قسمت چهارم اولین بار در طراحی سایت اصفهان | سئو سایت در اصفهان پدیدار شد.

طراحی سایت اصفهان | سئو سایت در اصفهان

پربازدیدترین اخبار

صنعت خودروسازی روسیه در سطح جهانی حال و روز خوشی ندارد و خودروهای روسی حتی نمی توانند رضایت مردمان ساکن در این کشور سردسیر را بدست آورند اما به دلیل روابط نزدیک ایران و روسیه طی چند سال اخیر هر از چند گاهی اخباری در رابطه با همکاری ایران و روسیه برای احداث خط تولید […]

طراحی سایت

طراحی سایت در اصفهان   طراحی سایت و سئو سایت در اصفهان   تیم طراحی سایت و سئو سایت وب یار به آدرس ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت , سئو سایت در گوگل ، ارسال […]

حواص برگ انبه انبه هم مانند سایر میوه ها و مواد خوراکی دیگر,فواید و طعم خاص خود را دارد. بار ها اتفاق افتاده است که بی توجه,برگ میوه هایی که میخوریم را,دور می اندازیم. اما این نمی توان از برگ این میوه گذشت. چگونه از آن استفاده کنیم؟ می توانید به سادگی با شستن برگ ها […]

اهمیت فروشگاه اینترنتی یا ای کامرس e-commerce حتما همه ی شما تاکنون واژه ی " ای کامرس " یا " فروشگاه اینترنتی " را شنیده اید و حداقل یک بار از فروشگاه های اینترنتی خرید نموده اید. اما هنوز خیلی از کاربران هستند که با ماهیت " ای کامرس " یا " فروشگاه اینترنتی " […]

آموزش دستوراتhtml5 در اولین جلسه آموزش html 5 به معرفی html 5  و مزایای کدنویسی با html5 ‌و حل مشکل ناسازگاری مرورگرها با دستورات html5  پرداختیم. با آموزش دستورات html5 جهت بهینه سازی گام به گام طراحی صفحات وب سایت همراه شما هستیم.   دستورات html5 شامل یک سری تگ است که هر کدام کاربرد […]