031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » html » آموزش HTML5 – قسمت چهارم

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

تاریخ:۱۹ام شهریور ۱۳۹۶
مرضیه خیرخواه
21

آموزش 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>
<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
4.0 11.1 9.0 5.0 6.0

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

<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
49.0 15.0 پشتیبانی نمی شود 6.0 12.0

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

<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 را ادامه خواهیم داد پس با ما همراه باشید.

درباره نویسنده :
مرضیه خیرخواه

مطالب مرتبط

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

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

طراحی سایت فروش و تبلیغات مبلمان حراجی مبل طراحی سایت فروش و تبلیغات مبلمان سایت حراجی مبل ، با طراحی ساده و زیبای خود ، به معرفی انواع و دسته بندی های مبلمان پرداخته و با درج گالری عکس ها ، قیمت و جنس مبلمان ، محصولات خود را برای کاربران به نمایش گذاشته است. […]

طراحی فروشگاه اینترنتی تحریر20

طراحی فروشگاه اینترنتی تحریر20

طراحی فروشگاه اینترنتی تحریر20 طراحی فروشگاه اینترنتی تحریر20 با خدمات فروش و عرضه انواع لوازم تحریر در اصفهان ، اخیرا توسط تیم طراحی سایت وب یار با رعایت تمامی المان های استاندارد سئو در آن طراحی شده است. طراحی گرافیکی کاملا اختصاصی و امکانات پیشرفته ای که در طراحی فروشگاه اینترنتی تحریر20 قرار گرفته است ، باعث […]

طراحی فروشگاه اینترنتی پخش پسته

طراحی فروشگاه اینترنتی پخش پسته

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

طراحی سایت آموزشی AZ کنکور

طراحی سایت آموزشی AZ کنکور

طراحی سایت آموزشی AZ کنکور یکی از نمونه کارهای طراحی سایت وب یار، طراحی سایت آموزشی AZ کنکور می باشد که زمینه ی کاری آن مشاوره تحصیلی، برگذاری کلاس های آنلاین، آزمون آنلاین و فروش محصولات آموزشی است. اصول سئو در کدنویسی طراحی سایت AZ کنکور رعایت شده است همچنین در طراحی گرافیک قالب سایت […]

ارسال دیدگاه

*    

*    

ارتباط با تیم پشتیبانی وب یار

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

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید