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

شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

تگ های اصلی و کلیدی HTML

در مطلب گذشته از بخش آموزش مقدماتی HTML به طور مختصر کلیاتی از این زبان قراردادی (نشانه گذاری یا Markup) را با هم مرور کردیم و دورنمایی از اینکه این زبان چیست و در وب چه کاربردی دارد بدست آوردیم، اکنون می خواهیم یک گام به جلو بگذاریم و این بار تگ های اصلی ایجاد کننده صفحات وب را بررسی کنیم، منظور از تگ های اصلی و کلیدی مواردی هستند که جزء بدنه هر صفحه وبی بوده و وجود آنها برای پردازش صحیح صفحه در مرورگر ضروری می باشد یا اینکه این تگ ها به تعداد زیاد در صفحات وب تکرار می شوند و جزء تگ های پرکاربرد هستند که باید در گام های نخست با آنها آشنا شویم، در هر صورت در این آموزش سعی خواهیم کرد ساده و در حد امکان کامل به تگ های اصلی و کلیدی 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</title>
<!-- Webgoo.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 - سرتیترها</title>
<!-- Webgoo.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 - فاصله و خط</title>
<!-- Webgoo.ir -->
</head>
<body>
<p>در اچ تی ام ال برای ایجاد فاصله عمودی از تگ br<br>استفاده می شود!</p>
<h1>این یک متن اچ تی ام ال تیتر شده با بیشترین اهمیت است!</h1>
<hr>
<h2>این یک متن اچ تی ام ال تیتر شده با اهمیت کمتر است!</h2>
</body>
</html>

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

دسته بندی: آموزش مقدماتی » HTML

برچسب ها: HTML

قبلی »

« بعدی

مطالب بیشتر:
لایه بندی در HTML با تگ div و span
متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
آشنایی با مفهوم Semantic در HTML
کار با تگ فرم (form) در HTML
کاربرد تگ img و نمایش تصاویر در HTML

دیدگاه

۲۷ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

مهدی

۰۲:۰۱ ۱۴۰۲/۰۶/۰۴

سلا چطوری میتونم کدام تو مرورگر دقیق نمایش بدم حتی >< تگ هام نمایش داده بشه در html تگ کد را هم معرف نکنید چون کار نمیده و فقط متنها را نمایش میده

رویه متداول برای نمایش تگ های HTML در مرورگر این است که به جای کاراکتر > از معادل HTML آن

&lt;

و به جای کاراکتر < از معادل HTML آن

&gt;

در خروجی استفاده کنیم، مثال:

&lt;div&gt;

منتها این جایگزینی باید دقیقا در سورس اصلی صفحه ایجاد شود و اگر از ویرایشگرهای WYSIWYG برای انتشار و ویرایش متن بهره می گیرید باید برای دسترسی به سورس اصلی صفحه گزینه "نمایش به صورت کد HTML" را در هنگام کار با این برنامه ها فعال کنید.

M00999

۱۸:۲۸ ۱۴۰۱/۰۱/۲۶

اگه میشه کد تغیر رنگ صفحه رو بگیییددد؟؟؟
از چپ به راست هم بگیدددد؟؟؟

برای تغییر رنگ کل صفحه باید رنگ پس زمینه تگ body را تغییر دهید و برای تغییر جهت نمایش متن و محتوا از راست به چپ یا چپ به راست هم تگ body کاربرد دارد، نمونه کد:

<body style="background-color: #CCC; direction: ltr;">

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

پویا

۱۷:۳۴ ۱۴۰۱/۰۱/۰۶

ببخشید من یه پرچم کوچیک درست کردم. و رنگ های پرچم با کد hr هستند با چه کدی میتونم اون هارو از وسط به سمت چپ صفحه بفرستم؟؟
ممنون

می توانید تگ ها را درون یک تگ والد (به فرض div) بنویسید و تگ والد را با استایل CSS و استفاده از خاصیت float یا position در سمت دلخواه شناور کنید، برای راهنمایی دقیقتر لطفا نمونه سورس ها را به صورت صفحه وب آنلاین یا به آدرس ایمیل ما (موجود در بخش تماس) ارسال کنید تا امکان بررسی فراهم باشد.

پـــرتو

۱۵:۲۹ ۱۴۰۰/۰۸/۰۸

ممنون از شما تشکر

پـــرتو

۲۱:۱۴ ۱۴۰۰/۰۸/۰۷

چشم الان براتون کد قالب رو ایمیل می کنم .... ممنون از شما

برای حذف فاصله بین محتوا و حاشیه بلاک، قسمتی از قالب که به صورت زیر است:

<style>
#posttitle {
background-color: #ff7901;
height:20px;
}
.side-title {
background-color: #ff7901;
width: 100%;
display: inline-block;
padding: 4px 0 4px 0;
}
#sidebar {
margin-right: -50px;
}
</style>

را با کد زیر جایگزین کنید:

<style>
#posttitle {
background-color: #ff7901;
height:20px;
}
.side-title {
background-color: #ff7901;
width: 100%;
display: inline-block;
padding: 4px 0 4px 0;
}
#sidebar {
margin-right: -50px;
}
#postbody {
width: 100%;
}
</style>

پـــرتو

۱۲:۲۰ ۱۴۰۰/۰۸/۰۷

سلام خسته نباشید ببخشید مزاحم میشم شرمنده هی کامنت می گذارم، بخدا از بس سوالاتم زیاده من روم نمیشه بعضی وقتا کامنت بگذارم، بابت کامنت اون دفعم بگم که چشم حتما کد نویسی می کنم فقط یه سوال من توی کد قالب اچ تی ام الی که قبلا داشتم یه ایرادی داره اونم اینکه از فاصله border تا متن و عکس از سمت راست خیلی فاصله هست میشه بگید چطوری درستش کنم؟ یعنی تنها ایرادش همینه ممنون میشم راهنمایی بفرمایید که چیکار کنم که درست شه ممنونم

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

پرتو

۰۰:۰۳ ۱۴۰۰/۰۷/۲۶

سلام خسته نباشید ببخشید مزاحم میشم ، آدرس چند سایت در مورد تبدیلگر psd به html میشه لطفا معرفی کنید ممنون میشم و برای تبدیل کد html به کد بلاگفا راستشو بخاین قسمت راهنمای سایت بلاگفا رو نگاه کردم ولی چیزی متوجه نشدم ممنون میشم راهنمایی کنید من خودم آدرس سایت تبدیلگر دارم ولی آخره بار که میام کد رو با مرورگر باز کنم سایت درست نیست کلا یه چیز دیگه میادش ممنون میشم راهنمایی بفرمایید با تشکر

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

پرتو

۱۸:۲۸ ۱۴۰۰/۰۷/۲۲

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

فتوشاپ ابزار بهینه ای برای ایجاد خروجی HTML از طرح گرافیکی ندارد، برای تبدیل قالب هایی که در فتوشاپ طراحی می کنیم در درجه اول باید کدنویسی HTML + CSS بلد باشیم، بعد از این مرحله چارچوب کار را با HTML و CSS در برنامه هایی مانند PhpStorm یا هر ویرایشگر HTML دیگری مطابق با طرح گرافیکی کدنویسی کرده و در نهایت عناصر گرافیگی طراحی شده با فتوشاپ را پس از برش زدن و تجزیه به فایل های کوچکتر در قالب و فایل CSS تعریف می کنیم، آموزش جداگانه ای در این خصوص در سایت منتشر شده است که با درج عبارت "انتقال قالب از فتوشاپ" در قسمت جستجوی سایت می توانید به آن دسترسی داشته باشید.
نکته: به زبان ساده طراحی قالب های وب بدون فتوشاپ ممکن است اما بدون کدنویسی شدنی نیست.

رضا

۱۵:۰۹ ۱۴۰۰/۰۷/۱۲

سلام.
من برای سایتم قسمت تکس اریا دارم از ckeditor استفاده می کنم. این ادیتور کدها رو به صورت HTML میده که باید توی دیتابیس ذخیره کنیم. چطور کدها رو ایمن کنم که اگه کاربر خواست حملات SQL INJ و .... از طریق CKeditor انجام بده نتونه؟ در واقع می خوام کدها رو فیلتر کنم. آیا راهی هست؟ در کل شما برای داشتن امنیت خوب، CKeditor با خروجی HTML (معمولا در اکثر سایت ها همینه) پیشنهاد می کنید تا خروجی MarkDown ؟

برای استفاده از ادیتورها باید با ساز و کار چند نوع حمله هکرها از جمله XSS و SQL Injection آشنا باشید، لطفا پرسش و پاسخ زیر را مطالعه کنید توضیحات لازم داده شده:

https://webgoo.ir/68/3/%D8%AD%D9%85%D9%84%D9%87-ddos-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A7%D8%B2-%D8%A2%D9%86-%D8%AC%D9%84%D9%88%DA%AF%DB%8C%D8%B1%DB%8C-%DA%A9%D9%86%DB%8C%D9%85#comment-13431

shayanzad

۱۰:۵۴ ۱۳۹۸/۰۷/۲۴

من تونستم نظرات خوبی رو تو این صفحه پیدا کنم. ممنون
مفید بود برای من.

ادریس

۱۱:۰۵ ۱۳۹۸/۰۷/۱۴

سلام
می خواستم بدونم چرا بعضی از تگ های html تگ بسته ندارند؟؟
مانند تگ <img>
ممنون جواب بدین

قوانین قراردادی در کدنویسی HTML بر اساس نیاز شکل گرفته و طی زمان به مرور اصلاح شده اند، بر همین اساس نیازی به بستن تگ های ساده که مقادیر متنی ندارند یا تگ های دیگری را شامل نمی شوند احساس نشده و لذا این نوع تگ ها به صورت تکی (Singleton) درج می شوند، مانند br، img، hr، link و... اما تگ هایی که شامل تگ های دیگر یا مقادیر متنی هستند مانند title، div، p و... بر اساس نیاز به صورت جفتی استفاده می شوند تا ابتدا، محتوا و انتهای تگ مشخص باشد.

Bluecloud15

۰۰:۵۱ ۱۳۹۷/۰۵/۰۴

سپاس

محمد

۲۱:۱۴ ۱۳۹۶/۰۲/۱۸

با عرض سلام و خسته نباشید و تشکر بابت سایت بسیار عالیتون
من کاملا گیج شدم آموزش از اینم مقدماتی ترهم هست چون من اصل هیچی درباره برنامه نویسی html نمیدونم و میخوام تازه شروع کنم
ممنون میشم اگه پاسخ بدین

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

نگار

۱۷:۴۹ ۱۳۹۵/۰۹/۳۰

بسیار عالی و آموزنده ممنونم

mohammad

۱۱:۰۰ ۱۳۹۴/۰۶/۲۸

تشکر از زحمات شما

نخست

قبلی

بعدی

آخر

صفحه 1 از 2

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