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

? منظور از تگ‌های معنایی در html، تگ‌هایی هستن که مرورگر معنی اونها رو متوجه میشه. بنابراین استفاده از این تگ‌ها باعث میشه هدف و منظور شما به شکل دقیق‌تری برای گوگل مشخص بشه و به واسطه این موضوع گوگل به سایت شما امتیاز مثبت میده?.

سلام دوستان امیدوارم خوب باشید و پر انرژی و مثل همیشه آماده یادگیری?. توی این جلسه از آموزش html قراره درمورد یه مبحث مهم با هم صحبت کنیم و اون هم تگ‌های معنایی یا سمنتیک تگ‌ها هستن. سمنتیک تگ‌ها از html5 به بعد اضافه شدن و در نسخه‌های اولیه html وجود نداشتن. تا قبل از اون طراح‌های سایت با استفاده از تگ table و در مراحل بعدی با استفاده از تگ div، ساختار و چهارچوب صفحات وب رو طراحی می‌کردن. اما با رونمایی از html5 یه سری تگ‌ها به طراحان وب معرفی شد که بتونن طراحی اصولی‌تر و دقیق‌تری داشته باشن. تگ‌های معنایی یکی از مباحث مهمی هست که به عنوان یه طراح سایت باید بهش مسلط باشید و بتونید از این تگ‌ها استفاده کنید. پس در ادامه این مطلب همراه من باشید تا خیلی کامل و جامع این مبحث رو بهتون آموزش بدم?.

 

اصلاً تگ‌‌های معنایی در html چی هستن؟!

همونطور که توی اولین جمله این مقاله گفتم، تگ‌های معنایی یعنی تگ‌هایی که موتور جست و جو معنی اون‌ها رو متوجه میشه. احتمالاً بلافاصله این سوال واستون پیش اومده که مگه موتور جست و جو معنی بقیه تگ‌ها رو متوجه نمیشه؟؟?. یا اینکه اگه موتور جست و جو متوجه معنی تگ‌های دیگه نیست چطور اونها رو نمایش میده؟. اگه هم متوجه تگ‌های دیگه html هست، تفاوت تگ‌های معمولی و سمنتیک تگ‌ها چیه؟؟.

? در جواب همه این سوالات باید بهتون بگم که موتور جست و جو معنی همه تگ‌ها رو متوجه میشه و همین باعث میشه که بتونه یه صفحه وب رو به درستی نمایش بده. اما مسئله ارزشیه که موتور جست و جو برای سمنتیک تگ‌ها قائله. بذارید با یه مثال این موضوع رو بهتون توضیح بدم. یادتونه وقتی نحوه کار با تگ‌های h1 تا h6 رو بهتون آموزش دادم، گفتم اگه متنی رو توی تگ h1 بنویسید نسبت به متنی که توی تگ h3 نوشته شده، اهمیت بیشتری پیدا میکنه؟؟. در رابطه با تگ‌های معنایی هم قضیه به همین شکله. وقتی شما یک منو رو به کمک تگ div طراحی می‌کنید، این تگ برای موتور جستجو صرفاً یه تگ div هست. اما وقتی از تگ معنایی nav استفاده می‌کنید، موتور جست و جو متوجه میشه که سایت شما دارای منو مشخصی هست و این باعث کسب امتیاز مثبت میشه.

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

 

انواع تگ‌های معنایی در html:

تگ header : 

از این تگ برای پیاده‌سازی قسمت هدر یا سربرگ سایت استفاده میشه. یعنی به جای اینکه هدر رو با یه تگ div که آیدی یا کلاس header داره پیاده‌سازی کنیم، مستقیماً از تگ header استفاده میکنیم. همونطور که خودتون هم متوجه شدید، استفاده از این تگ، علاوه بر اینکه باعث میشه سند html شما خلوت‌تر بشه و کدهای کمتری بنویسید، خوانایی کدتون رو هم افزایش میده. نحوه استفاده از این کد هم به شکل زیر هست.

<header>
<h1>عنوان سایت</h1>
</header>

 

تگ footer : 

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

<footer>
<p>تمام حقوق این سایت متعلق به ………. می‌باشد</p>
</footer>

 

تگ section: 

برای مشخص کردن یک بخش از سایت، از تگ section استفاده می‌کنیم. برای مثال فرض کنید قصد داریم پنج تا از پرفروش‌ترین محصولات سایت رو در یک کادر نمایش بدیم. در این شرایط کادر مورد نظر رو به کمک تگ section کدنویسی می‌کنیم.

<section>
<div>
محصول شماره 1
</div>

    <div>
محصول شماره 2
</div>
</section>

تگ article : 

تگ article هم مثل تگ section برای نمایش بخشی از سایت استفاده میشه. فرق این تگ با تگ section در این هست که، اگه بخوایم پنج محصول پر فروش رو در یک کادر نمایش بدیم، برای کدنویسی کادر از تگ section و برای کدنویسی هر یک از پنج محصول از تگ article استفاده می‌کنیم.

<section>
     <article>
محصول شماره 1
    </article>

    <article>
محصول شماره 2
    </article>
</section>

 

تگ aside : 

از این تگ برای پیاده‌سازی سایدبار (همون ستون کناری سایت) استفاده می‌کنیم. وجود سایدبار در سایت اختیاری هست و ممکنه توی بعضی از صفحات وجود داشته باشه و توی بعضی از صفحات نه. سایدبار معمولا حاوی یه سری اطلاعات مثل پست‌ها یا نظرات اخیر، جست و جو و… هست.

<aside>
<h4>جدیدترین نوشته‌ها</h4>

     <div>آموزش کار با متن در html </div>

    <div>آموزش کار با لینگ‌ها  </div>
</aside>

تگ nav : 

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

<nav>
<ul>
<li><a href=”#”>لینک شماره 1</a></li>
<li><a href=”#”>لینک شماره 2</a></li>
<li><a href=”#”>لینک شماره 3</a></li>
</ul>
</nav>

مقایسه تگ‌های معنایی در html و سایر تگ‌ها:

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

 

 

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

 

 

امیدوارم این جلسه از آموزش html براتون مفید بوده باشه و حسابی به دردتون بخوره?.