معرفی تگ های html

پر کاربردترین تگ های html

html تگ های زیادی دارد که هر کدام کاربرد مشخصی دارند. به همین خاطر شناخت درست تگ ها و کاربردشان و استفاده درست آنها از دید سئو و موتورهای جستجو بسیار حائز اهمیت می باشد. چرا که در طول سالیان اخیر و از زمانی که html5 متولد شد تگ ها به سمت معناگرایی و semantic web رفتند.

تگ ها در زبان نشانه گذاری html

اکثر تگ ها به صورت تگ باز و بسته می باشند اما تعداد کمی از آنها این گونه نیستند که در ادامه به آن اشاره خواهیم کرد. برای نمایش یک تگ می بایست نام تگ را داخل علامت کوچکتر و بزرگتر بگذاریم و برای نمایشه تگ بسته علاوه بر موارد گفته شده از یک اسلش یا (/) همان خط مورب نیز استفاده می کنیم.
برای مثال : تگ باز header به این شکل<header> و تگ بسته آن به صورت </header> می باشد.

برای ساختن ساده ترین حالت یک صفحه HTML شما به این تگ ها نیاز دارید.

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

معرفی تگ های html

اولین تگ، تگ <Doctype!> می باشد که به مرورگر میفهماند این یک سند html می باشد تا بتواند آن را به درستی نمایش بدهد.

تگ <html> به عنوان سند html مورد استفاده قرار می گیرد.

تگ head به عنوان هدر سایت و تگ body به عنوان بدنه سایت می باشد.

برای طراحی سایت با زبان html می توانید با پایدار سامانه تماس حاصل نمایید.

تگ هایی که داخل تگ head استفاده می شوند عبارتند از:

متا تگ ها meta tags که برای توضیحات متا (غیر قابل نمایش برای بیننده و صرفا برای دادن توضیحاتی به موتورهای جستجو می باشد)

برای اتصال کدهای CSS از تگ لینک (link) استفاده می شود:

و برای اتصال فایل های JS (java script) از تگ اسکریپت استفاده می شود:

برای نمایش عنوان سایت در بالای مرور گر نیز از تگ <title> استفاده می شود:

<title>عنوان صفحه</title>

برای نمایش قالب کلی سایت نیز از تگ های معنایی

<header></header>
<main></main>
<aside></aside>
<article></article>
<section></section>
<footer></footer> استفاده می شود.

تگ های HTML چه استفاده ای دارد

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

tag header: تگ هدر برای بیان قسمت بالایی سایت که در تمامی صفحات تکرار می شود
tag foater: تگ فوتر نیز برای بیان قسمت انتهایی و پاورقی سایت که در تمامی صفحات تکرار می شود مورد استفاده قرار می گیرد.
tag main: برای دربرگرفتن محتویات سایت و سایر تگ ها بوده
<aside> و <tag <article: برای نمایش ساختارهایی که دو ستونه و دارای ساید بار می باشند. مثلا صفحات بلاگ سایت ها معمولا به این شکل می باشد که قسمت کناری با تگ <aside> و قسمت اصلی با تگ <article> مشخص می شود. (این دو تگ نیز به صورت معنایی بوده و استایل خاصی ندارند)

همچنین برای نمایش navbar از تگ <nav></nav> استفاده می شود.

اگر سورس کد هر سایتی را ببینید (برای این کار وارد یک وبسایت شده و یک جایی در صفحه آن سایت راست کلیک کرده و گزینه view source را بزنید و یا دکمه های ترکیبی CTLR + U رابزنید) متوجه یک تگ بشدت پرکاربرد به نام division می شوید که به صورت <div> نوشته می شود.
از این تگ برای ساختار و پیکر بندی اجزا سایت استفاده می شود.

tag p: تگ بعدی، تگ پاراگراف می باشد که به صورت تگ باز و بسته <p></p> می باشد و همانطور که گفته شد برای نمایش متن و پاراگراف می باشد.

برای لینک کردن و اتصال بیننده به صفحات دیگر و یا سایت های دیگر از anchor tag استفاده می شود که به صورت تگ باز و بسته <a></a> می باشد به همراه آدرس مقصد (href)
<a href="https://paydarsamane.com/">عنوان لینک</a>

تگ بعدی برای نمایش لیست استفاده می شود، لیست های مرتب و نامرتب که شامل یک parent و تعدادی child می باشد.

tag li: تگ li مخفف لیست نامرتب unordered list و ol مخفف ordered list و li مخفف لیست می باشد.
<ul>
<li></li>
<li></li>
<li></li>
...
</ul>

"برای آشنایی بیشتر با زبان نشانه گذاری html می توانید مقاله ی html چیست را مطالعه فرمایید."

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

معرفی تگ های Heading

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

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

tag b: برای بولد و برجسته کردن عبارت می توانید از تگ <b></b> استفاده کنید اما اگر هم می خواهید عبارت مورد نظر را برجسته کنید و هم می خواهید اهمیت آن را به موتور جستجو بفهمانید برای سئو بهتر از تگ
<strong></strong> استفاده نمایید. (کاربرد این دو تگ یکسان ولی در سئو متفاوت می باشد)

tag italic: برای کج نوشتن و italic کردن متن نیز می توانید از تگ <i></i> استفاده کنید. البته تگ دیگری به نام <em></em> که مخفف emphasize به معنای تاکید می باشد نیز همین کاربرد را دارد با این تفاوت که به لحاظ سئو و در موتورهای جستجو این تگ بسیار حائز اهمیت می باشد.

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

tag img: برای نمایش تصویر نیز از تگ img استفاده می شود که مانند متا تگ ها تگ بسته ندارد و به صورت self closing می باشد. که دارای آدرس تصویر و متن جایگزین (در صورت عدم لود شدن تصویر) و عنوان می باشد.
<img src="/images.slider.png" alt="اسلایدر" title="طراحی سایت" />

همچنین برای نمایش ویدیو از تگ ویدئو با ساختار زیر استفاده می شود.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

نکته آخر اینکه شاید در سورس کدها متوجه این موضوع شده باشید که می توان به تگ های مورد استفاده داخل تگ bodyو حتی خود تگ body کلاس و آی دی داد. (class , id)
کلاس و آی دی برای استایل دهی و یا انتخاب کردن المان ها و انجام عملیات مختلف در کد های اسکریپتی به شدت مورد استفاده قرار میگیرد.

تگ های html تعدادشان بیشتر از تگ های معرفی شده در این مقاله میباشد اما ما در اینجا سعی کردیم که پرکاربردترین تگ های html را به شما به زبان ساده معرفی کنیم. اگر در مورد تگ ها سوال و یا ابهامی داشتید و یا حتی نکات تکمیلی به ذهنتان رسید حتما در قسمت نظرات مطرح کنید تا در سریعترین زمان ممکن به شما پاسخ داده شود.