نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 5738
تاریخ بروزرسانی ۹ خرداد ۱۴۰۱

معرفی کامل تگ های معنایی در HTML5

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

 آموزش طراحی سایت با دستورات HTML5

HTML5 جدیدترین زبان برنامه نویسی برای طراحی سایت است که در مقایسه با نسخه های قبلی خود، قابلیت ها و امکانات جدیدی را برای کاربرانش فراهم کرده است و به همین جهت نسبت به سایر نسخه ها برتری دارد. این زبان همچنان در حال پیشرفت است و مرورگرهای Chrome ، Safari ، Firefox ، Opera ،  IE از آن پشتیبانی می کنند.در ادامه خیلی راحت و ساده با هم دستورات html5 را مرور می کنیم.

پرکاربردترین تگ های html5 در طراحی وب سایت

یک وب سایت از 3 قسمت زیر تشکیل شده است:
1-Header
2- Section
3- Footer

در این ورژن HTML به جای استفاده از div ها از این 3 تگ استفاده می کنند ولی به این معنی نیست که چون از تگ header استفاده کردید بدون اینکه در css به آن خصوصیت هایی را نسبت دهید در بالای صفحه قرار بگیرد.

تگ های معنایی در HTML5

یک عنصر معنایی به وضوح معنای خود را برای مرورگر و توسعه دهنده توصیف می کند.

تگ های معنایی یا همان semantic tags ، عناصری هستند که با توجه به نام آن ها می توان به محتوای این عناصر پی برد. به عنوان مثال محتوای تگ های <img> ، <table> و <header> را می توان از روی نام آن ها تشخیص داد ولی محتوای تگ هایی مانند <p> یا  <div> از روی نام مشخص نیست.
استفاده از تگ های معنایی در طراحی سایت باعث می شود تا ساختار صفحه ی وب مشخص باشد. برنامه نویسان و موتورهای جستجو با بررسی این تگ ها به راحتی می توانند ساختار وب و محتویات سایت را شناسایی کنند. استفاده از تگ های معنایی به افزایش سئو سایت نیز کمک می کند.

آموزش دستورات hml5

انواع تگ html

تگ های اچ تی ام ال معرف عناصر صفحه سایت هستند و باید بدانید که برای نمایش عناصر یا به عبارتی elements وب سایت از دو نوع تگ مشخص استفاده می کنیم که عبارتند از

  1. تگ های باز (Opening Tag)
  2. تگ های بسته (Closing Tag)

باید بدانید که برخی از عناصر برای نمایش داده شدن در صفحات وب سایت به هر دو تگ احتیاج داردند و برخی دیگر به تنهایی با تگ باز یا opening نمایش داده می شوند.

DOCTYPE HTML

این تگ باعث می شود تا ما متوجه شویم که کد های HTML با چه ورژنی از آن نوشته شده اند. در جدول زیر DOCTYPE ورژن های مختلف را مشاهده می کنید.

آموزش دستورات hml5

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

9 تگ مهم HTML5

همین طور که در جدول بالا مشاهده کردید در این ورژن از HTML تگ ها بهینه شده اند.

عنصر <section> در html

عنصر <section> یک بخش را در یک سند تعریف می کند. تگ section که یک تگ جدید و از تگ های معنایی HTML5 است، یک بخش مجزا در سند تعریف می کند.

در واقع از این تگ برای محتواهایی استفاده می شود که با هم ارتباط معنایی دارند و معمولاً برای این محتواها می توانیم یک heading تعریف کنیم.

تگ section از ویژگی های عمومی و رویدادهای عمومی در HTML پشتیبانی می کند. در جدول زیر اولین نسخه ای از مرورگرها که از این تگ پشتیبانی می کنند، نشان داده شده است.

FirefoxoperaInternet explorersafarichrome4.011.19.05.06.0

در کد زیر می توانید نحوه ی استفاده از عنصر section را مشاهده کنید.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section>
<h1>What is HTML?</h1>
<p> HTML is the standard markup language for creating Web pages.<br> HTML stands for Hyper Text Markup Language<br> HTML describes the structure of Web pages using markup<br> HTML elements are the building blocks of HTML pages<br> </p>
</section>
</body>
</html>

خروجی کد بالا را می توانید در تصویر زیر مشاهده کنید.

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

با توجه به مستندات HTML W3C: “یک بخش یک گروه بندی موضوعی از محتوا است، معمولا با یک عنوان.”

نمونه هایی از جایی که می توان از عنصر <section> استفاده کرد:

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

عنصر <article>
عنصر <article> محتوای مستقل  را مشخص می کند.

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

نمونه هایی از جایی که می توان از عنصر <article> استفاده کرد:

پست های انجمن
پست های وبلاگ
نظرات کاربران
کارت های محصول
مقالات روزنامه

عنصر header در HTML5

تگ header از تگ های معنایی در HTML5 می باشد که برای اضافه کردن یک هدر به سند از آن استفاده می شود. برای مثال در این عنصر می توانید لوگوی سایت و منویی برای دسترسی به سایر صفحات سایت قرار دهید.
لازم به ذکر است که از این تگ برای اضافه کردن هدر به بخشی از سند هم می توان استفاده کرد و به عبارتی در یک صفحه شما می توانید از چندین عنصر header استفاده کنید.

آموزش برنامه نویسی سایت

در کد زیر از عنصر header استفاده شده است.
خروجی کد بالا:

کلاس آموزش طراحی سایت اصفهان

عنصر footer در HTML5

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

آموزش تخصصی طراحی سایت

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

طراحی سایت حرفه ای

عنصر aside در HTML5

تگ aside حاشیه ای در کنار متن اصلی ایجاد می کند و برای نمایش ستون های چپ و راست در صفحه استفاده می شود. همچنین از این تگ می توان در تگ های دیگر استفاده کرد. برای مثال می توانید در تگ article از عنصر aside استفاده کنید اما دقت داشته باشید که محتوایی که برای aside در نظر می گیرید باید با محتوای تگ article ارتباط معنایی داشته باشد.

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

Firefox opera Internet explorer safari chrome 4.0  11.1    9.0    5.0    6.0

در کد زیر از دستور aside استفاده شده است.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<aside>
<h4>Learn HTML5 </h4>
<p>Tabs<br> Dropdowns<br> Accordions<br> Convert Weights<br> Animated Buttons<br> Side Navigation<br>Top Navigation</p>
</aside>
</body>
</html>

خروجی کد بالا به صورت زیر است.

آموزش تگ aside

آموزش عنصر nav در HTML5

تگ nav نیز از تگ های معنایی و از تگ های جدید در HTML5 است که جهت قرار دادن گروهی از لینک ها در کنار هم از آن استفاده می شود. لازم به ذکر است که از این تگ فقط برای لینک های اصلی صفحه استفاده می شود.

عنصر nav از رویدادها و ویژگی های عمومی در HTML پشتیبانی می کند. در جدول زیر اولین نسخه ی مرورگرهایی که از این تگ پشتیبانی می کنند را می توانید مشاهده کنید.

FirefoxoperaInternet explorersafarichrome  4.0  11.1   9.0   5.0   6.0

کد زیر کاربرد تگ ها را نشان می دهد.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<a href="#" >HTML</a> | <a href="#" >CSS</a> | <a href="#">JavaScript</a> | <a href="#">jQuery</a> |
</nav>
</body>
</html>

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

آموزش تگ معنایی nav

عنصر 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 اضافه کنید.

عنصر figure و figcaption در html5

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

Firefox opera Internet explorer safari chrome
4.0 11.1 9.0 5.0 6.0

تگ figure از تگ های جدید و تگ های معنایی در HTML5 است. این عنصر از ویژگی های عمومی و رویدادهای عمومی در html پشتیبانی می کند.
تگ figcaption توضیحی برای تگ figure ارائه می دهد. از این تگ هم در ابتدای عنصر figure و هم در انتهای آن می توان استفاده کرد.
در مثال زیر می توانید نحوه ی استفاده از این دو تگ را مشاهده کنید.

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

تگ معنایی figure

عنصر article در HTML5

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

Firefox opera Internet explorer safari chrome
4.0 11.1 9.0 5.0 6.0

در کد زیر از تگ article استفاده شده است.

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

تگ article

آموزش عنصر time در HTML5

تگ time از تگ های معنایی و جدید در HTML5 است. از این عنصر برای تعریف تاریخ و زمان استفاده می شود. این تگ یک روش است که زمان و تاریخ را به صورت رمز در می آورد تا برای ماشین قابل فهم باشد. در صورت استفاده از این تگ، موتورهای جستجو می توانند جستجوی دقیق تر و هوشمندانه تری را ارائه دهند. عنصر time از ویژگی ها و رویدادهای عمومی در HTML پشتیبانی می کند.
ویژگی datetime در تگ time یک تاریخ و زمان قابل خواندن برای ماشین ارائه می دهد.
اولین نسخه ی مرورگرهایی که از این عنصر پشتیبانی می کنند، در جدول نوشته شده است.

Firefox opera Internet explorer safari chrome
4.0 11.1 9.0 5.0 6.0

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

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

آموزش HTML5-تگ معنایی time

عناصر معنایی در HTML

در زیر لیستی از برخی از عناصر معنایی در HTML آمده است.

<article>   محتوای مستقل و مستقل را تعریف می کند
<aside>     محتوا را جدا از محتوای صفحه تعریف می کند
<details>   جزئیات بیشتری را که کاربر می تواند مشاهده یا پنهان کند را تعریف می کند
<figcaption> یک عنوان برای عنصر <figure> تعریف می کند
<figure> محتوای مستقل مانند تصاویر، نمودارها، عکس‌ها، فهرست کدها و غیره را مشخص می‌کند.
<footer> یک پاورقی برای یک سند یا بخش تعریف می کند
<header> یک هدر برای یک سند یا بخش مشخص می کند
<main> محتوای اصلی یک سند را مشخص می کند
<mark> متن علامت گذاری شده/برجسته شده را تعریف می کند
<nav> پیوندهای ناوبری را تعریف می کند
<section> یک بخش را در یک سند تعریف می کند
<summary> یک عنوان قابل مشاهده برای عنصر <details> تعریف می کند
<time> تاریخ/زمان را تعریف می کند

برخی از تگ های مهم html را تحت عنوان تگ های معنایی در HTML5 معرفی کردیم. برای طراحی سایت های خود به بهینه ترین شکل با یک تیم متخصص همکاری کنید. تا مشکلاتی که به دلیل استفاده از قالب های آماده و سئو نشده وجود دارد برای شما رخ ندهد. مجموعه وب یار در 20 سال گذشته در زمینه طراحی وبسایت چه وب سایت های وردپرسی و یا سامانه های اختصاصی خدمات قوی و حرفه ای را به شما ارائه داده و همچنان نیز در خدمت شما عزیزان است. جهت آگاهی از آخرین مقالات منتشر شده در سایت صفحه اینستاگرام وب یار را دنبال کنید.

مقالات مرتبط

نشانی ایمیل شما منتشر نخواهد شد.