این آموزش در تاریخ ۱۴۰۲/۰۶/۱۸ آپدیت شده است.

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

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش عناصر معنایی یا Semantic Elements در HTML با من همراه باشید.

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

Free-Learn

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

خب اولین سوالی که اینجا پیش میاد اینه که عناصر معنایی ( یاهم تگ های معنایی ) در HTML یعنی چی!؟ و چرا ما باید ازشون استفاده کنیم!؟ آیا اگه مثلا ازشون استفاده نکنیم اتفاق خاصی برای صفحه وب مون میوفته؟

تعریف عناصر معنایی یا Semantic Elements در HTML : به تگ هایی که یه معنی یا مفهومی رو به ما ( من و شما ) و موتورهای جستجوگر ( مثه گوگل و.. ) یا مرورگرها ( مثه فایرفاکس یا گوگل کروم و.. ) میدن بهشون میگیم تگ های معنایی، همین تموم شد رفت.

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

پس در مجموع و در یه کلام تگ های معنایی یا Semantic Elements یعنی تگ هایی که نام شون ، عملکرد شون و.. یک معنی و مفهوم خاصی رو به ما و بیشتر به موتورهای جستجوگر برسونه.

Free-Learn

تعریف کلی و ساده از موتورهای جستجوگر

موتور جستجوگر یا ربات های جستجوگر یعنی در مجموع سایت یا نرم افزار یا هرچی اسمشو بزاریم، که بتونه بره داخل بقیه سایت ها و محتوارو ( متن ، عکس و.. ) بگیره و بیاره به دیگر کاربران براساس سرچی که زدن نشون بده.

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

یعنی وقتی شما داخلش یه چیزی مینویسی و دکمه اینتر میزنی ، مث این میمونه که گوگل میره و سایت هارو بررسی میکنه و اون سایت هایی که نزدیک ترین مفهوم به چیزی که شما جستجو زدی رو میاره نشون میده.

اینکه چرا یه سایت در نتایج گوگل در رتبه اول قرار داره و دیگری مثلا در رتبه ۵ و.. این مربوط میشه به بحث سئو ، سئو هم دنیای خودشو داره و من اینجا کاری بهش ندارم، فقط سئو در یه کلام یعنی یسری کارها ( ملاک ها یا معیارهایی ) که ما باید انجام بدیم تا سایتمون بتونه پیش گوگل عزیزتر ( مورد اعتمادتر ) واقع بشه.

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

Free-Learn

تگ های غیر معنایی یا Non-Semantic در HTML

خب در ادامه آموزش عناصر معنایی یا Semantic Elements در HTML میخوایم با تگ های غیرمعنایی آشنا بشیم.

خب مشخصه دیگه ، به تگ هایی که معنی و مفهوم خاصی رو نمیرسونن میگیم تگ های بدون معنا یا تگ های غیرمعنایی یا به انگلیسی Non-Semantic

مثلا تگ DIV یا تگ SPAN از تگ های غیرمعنایی در HTML هستن ، این یعنی این تگ ها هیچ معنی و مفهوم خاصی ندارن که بخوان مثلا معنی و مفهوم خاصی رو به موتورهای جستجوگر برسونن، موتورهای جستجوگر میتونن محتواشون رو بخونن ولی خب فقط معنایی نیستن.

ولی خب این درحالیه که تگی مثه Table یا مثلا تگ Img یا مثلا تگ Article یا مثلا تگ Footer از تگ هایی هستن که معنی و مفهوم خاصی رو به ما ( انسان ها ) و موتورهای جستجوگر میرسونه ( یعنی موتور جستجوگر با دیدن این تگ ها کاملا براش مشخصه که یه جدول یا عکس هستش ) و خیلی راحتتر میتونه محتوای داخل این تگ هارو درک کنه.

Free-Learn

تگ های معنایی یا Semantic در HTML

دیگه مشخصه خب، به تگ هایی که اسمشون یا در مجموع خودشون معنی و مفهوم خاصی رومیرسونن بهشون میگیم تگ های معنایی یا Semantic

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

  • Header : یعنی داره میگه اون قسمت هدر صفحه وبمونه
  • Nav : یعنی منوی اصلی سایت
  • Section : یعنی یه بخش از یه چیزی، یا مثلا یه بخش خاص
  • Article : یعنی مطالب یا پست ها یا مقاله های سایت اونجا قرار دارن
  • Aside : یعنی ستون کناری سایت
  • Footer : یعنی بخش پایینی یا فوتر سایت

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

لیست کامل تگ های معنایی در HTML

<abbr> <address> <article>
<aside> <audio> <blockquote>
<body> <button> <caption>
<code> <details> <embed>
<figure> <figcaption> <footer>
<form> <head> <header>
<iframe> <img> <label>
<link> <main> <mark>
<meta> <nav> <output>
<p> <picture> <progress>
<script> <section> <source>
<style> <summary> <table>
<time> <title> <var>
<video>

Free-Learn

نحوه استفاده از تگ های معنایی

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

مثلا من میخوام عکس بزارم داخل صفحه ، خب با استفاده از تگ های Embed و Iframe میشه اینکارو کرد ولی میگه آقا شما اینکارو نکن، میگه اگه میخوای عکس بزاری داخل صفحه خب از تگ img که برای اینکار ایجاد شده و مناسب تره استفاده کن، همین تموم شد رفت.

  • میخوای عکس بزاری از IMG استفاده کن
  • میخوای آهنگ بزاری از Audio استفاده کن
  • میخوای ویدئو بزاری از Video استفاده کن
  • میخوای جدول بزاری از Table استفاده کن
  • میخوای لیست بزاری از ul یا ol استفاده کن
  • میخوای یه چیزی رو جاساز کنی از Embed استفاده کن
  • میخوای یه صفحه دیگه رو بزاری داخل صفحه وبت از Iframe استفاده کن
  • میخوای هدر سایتت مشخص باشه از Header استفاده کن
  • میخوای چندین بخش داخل صفحه درست کنی از Section استفاده کن
  • میخوای مطالب / پست های سایتت رو مشخص کنی از Article استفاده کن
  • میخوای فوتر سایتت مشخص باشه از Footer استفاده کن
  • میخوای نمودار / شکل داخل صفحه بزاری از Figure استفاده کن
  • میخوای عنوان یا تایتل نمودار / شکل رو مشخص کنی از FigCaption استفاده کن
  • و …
  • به همین سادگی ، اینجوری دیگه صفحه شما میشه یه صفحه استاندارد و بهینه از نظر مرورگرها و موتورهای جستجوگر

Free-Learn

دریافت PDF یا پرینت این مطلب