آموزش تگ های html

تگ (Tag) چیست؟


تگ (Tag) از نظر لغوی به معنی برچسب و اتیکت است، اما در دنیای برنامه نویسی و از جمله در صفحات وب و کدنویسی HTML تگ ها به معنی نشانه های دستوری از پیش تعریف شده این زبان هستند که معمولا به صورت دو قسمتی به کار می روند، قسمت اول نشانگر شروع تگ و قسمت دوم نشانگر پایان آن است به طور مثال:

<div>متن</div>

هر قسمت نیز بین علامت های <> محصور شده است، ذکر این نکته نیز ضروری است که بعضی تگ های HTML تک قسمتی و یکتا هستند، مانند تگ های مربوط به ایجاد خط افقی (<hr>) یا فاصله عمودی (<br>)، در HTML برای کدنویسی و تفهیم منظورمان به مرورگرها از این تگ ها استفاده می کنیم، به طور مثال مرورگر هر جا به نمونه کد زیر برخورد کند:

<h1>تیتر</h1>
<p>پاراگراف</p>

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

تگ title ، head، html و body


یک صفحه وب کامل معمولا متشکل از تگ های متنوع HTML است که بر اساس نیاز کدنویس و طراح صفحه مورد استفاده قرار می گیرد، اما در بین این تگ ها برخی دارای اهمیت و کاربرد بیشتری هستند و تقریبا در هر صفحه وبی می توان آنها را پیدا کرد، از جمله این تگ های اصلی و کلیدی می توان به تگ title ، head، html و body اشاره کرد که برای اجرای صحیح یک صفحه وب در مرورگر الزاما باید در کدنویسی آنها را لحاظ کنیم، به طور خلاصه تگ html نشان دهنده نقطه شروع سند است تا مرورگر بتواند آن را به درستی به عنوان یک صفحه وب پردازش کند، تگ head برای درج عناصر آغازین صفحه مانند متاتگ ها (در آموزش های بعدی در این رابطه خواهیم گفت)، تیتر صفحه، تعریف استایل CSS، درج فایل های اسکریپتی JavaScript، درج فید RSS و مواردی از این دست کاربرد دارد، تگ مهم و کلیدی دیگر title است که عنوان صفحه در آن قرار می گیرد، این عنوان همان متنی است که در سربرگ مرورگرها به عنوان تیتر کلی صفحه وب نمایش داده می شود، سایر عناصر و محتوای درونی صفحه وب نیز درون تگ کلیدی body قرار می گیرند، لذا شناخت این چهار تگ جز گام های اولیه فراگیری HTML است، برای آشنایی بیشتر به مثال زیر توجه کنید:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>کد های html | تگ های اصلی HTML</title>
<!-- html.sportblog.ir -->
</head>
<body>
این یک سند ساده اچ تی ام ال است، کاربرد تگ های اصلی در این سند به خوبی مشخص شده است.
</body>
</html>


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

 

 

تگ h1 تا h6، سرتیترها


همان طور که گفتیم در HTML برای تفهیم هر منظور به مرورگر از نشانه هایی قراردادی تحت عنوان تگ استفاده می شود، در همین راستا HTML برای نمایش سرتیترهای محتوای هر صفحه از تگ هایی با عنوان h استفاده می کند که نام آن از واژه Heading اتخاذ شده است، h ها با یک شماره در مقابل خود مشخص می شوند، هر چه این شماره کوچکتر باشد h از اهمیت بیشتری برخوردار است لذا تگ h1 بیشترین اهمیت و به ترتیب تا h6 کم ترین اهمیت را دارند، استفاده از این تگ ها علاوه بر جنبه کاربردی آنها از جهت کسب رتبه بهتر در موتورهای جستجو نیز حائز اهمیت است چرا که موفقیت در وب تا حدود زیادی به سازگاری یک سایت، وبلاگ و یا هر نوع فعالیت مرتبط دیگری با موتورهای جستجو بستگی دارد، به همین دلیل توصیه می شود حتما از تگ های مربوط به سرتیترها جهت قابل فهم شدن مطالب مهم برای ربات های خزنده استفاده شود، ذکر این نکته نیز ضروری است که در استفاده از تگ های h1 تا h6 ترتیب آنها باید از با اهمیت ترین (h1) به کم اهمیت ترین (h6) از بالای صفحه به پائین آن رعایت شود، به مثال زیر توجه کنید:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>کد های html | تگ های اصلی HTML - سرتیترها</title>
<!-- html.sportblog.ir -->
</head>
<body>
<h1>این یک متن اچ تی ام ال تیتر شده با بیشترین اهمیت است!</h1>
<h2>این یک متن اچ تی ام ال تیتر شده با اهمیت کمتر است!</h2>
</body>
</html>


اگر در کد بالا دقت کنیم متوجه می شویم که ابتدا از تگ h1 استفاده شده و در ادامه از تگ h2، با توجه به اینکه تگ h1 نمایانگر تیتر اصلی صفحه است باید الزاما تنها یک مورد از آن در هر صفحه استفاده شود، سایر تگ های خانواده h می توانند به ترتیب رعایت اولویت به هر تعداد که مورد نیاز باشد استفاده شوند، ذکر این نکته ضروری است که منظور، اولویت بندی تگ های h2 تا h6 از تگ body نیست، بلکه منظور اولویت بندی از تگی است که h ها درون آن استفاده می شوند، مثال زیر گویا است:

 

<p>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
</p>
<p>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
</p>

در نمونه کد بالا اولویت بندی صرفا از تگ والد یعنی تگ p لحاظ شده.

 

 

تگ های ایجاد کننده فاصله عمودی و خط افقی


br و hr دو تگی هستند که از آنها برای ایجاد فاصله عمودی (Line Break) و خط افقی (Horizontal Rule) استفاده می شود، فاصله عمودی و خط افقی جز مواردی هستند که در HTML کاربرد فراوانی دارند و لذا تگ های متناظر با آنها (br و hr) در صفحات وب به تعداد زیاد تکرار می شوند، همانطور که پیش تر گفتیم این تگ ها یکتا هستند و قسمت دوم (بستن تگ) ندارند.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>کد های html | تگ های اصلی HTML - فاصله و خط</title>
<!-- html.sportblog.ir -->
</head>
<body>
<p>در اچ تی ام ال برای ایجاد فاصله عمودی از تگ br<br>استفاده می شود!</p>
<h1>این یک متن اچ تی ام ال تیتر شده با بیشترین اهمیت است!</h1>
<hr>
<h2>این یک متن اچ تی ام ال تیتر شده با اهمیت کمتر است!</h2>
</body>
</html>


در نمونه کد بالا از تگ br برای ایجاد شکست یا Line Break در یک پاراگراف استفاده شده همچنین با تگ hr بین سرتیترها خط افقی ایجاد کرده ایم.

آخرین مطالب

متاتگ ها html و کاربرد آنها

متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML) . با مفهوم تگ در زبان HTML و تگ های اصلی و کلیدی صفحات وب در آموزش پیشین آشنا شدیم، در ادامه مباحثی که بررسی کردیم خواهیم دید که شکل دیگری از تگ ها در صفحات وب به کار می روند که به خودی خود هیچ تاثیر و جلوه ظاهری در خروجی کدها ندارند اما حاوی اطلاعاتی در خصوص نوع صفحات وب و نحوه پردازش آنها هستند که این اطلاعات برای ماشین (اعم از مرورگر، ربات و...) قابل فهم و استفاده است، این نوع تگ ها را در اصطلاح متاتگ (Meta Tag) می گویند که بر خلاف تگ های معمولی (که در قسمت body درج می شوند) در قسمت head صفحه قرار می گیرند، به هر صورت در این مطلب می خواهیم در ادامه مباحث و آموزش های مقدماتی، نحوه استفاده از متاتگ ها و کاربرد آنها در صفحات وب (HTML) را با هم مرور کنیم.

آموزش تگ های html

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

آموزش تگ های html

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