امروز چهارشنبه ۱۴۰۰/۰۱/۲۵

2021/04/14 GMT +4:30

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

html-main-tags

در مطلب گذشته از بخش آموزش مقدماتی 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
related مطالب بیشتر:
» کاربرد تگ img و نمایش تصاویر در HTML
» لایه بندی در HTML با تگ div و span
» متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
» نحوه ایجاد لینک در HTML
» ایجاد جدول با تگ table در HTML
commentنظرات (۱۸ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: roya
۱۷:۰۱ ۱۳۹۱/۱۰/۱۰
مرسی.
نویسنده: omid
۱۱:۰۵ ۱۳۹۱/۱۲/۲۶
وب بسیار خوبی داری من از مطالب نحوه ی استفاده را بردم خواهشا وبلاگ من را بزار تو لینکت. ممنونم
نویسنده: خلیل
۱۶:۲۹ ۱۳۹۲/۰۷/۲۵
ممنون
نویسنده: محمد
۱۲:۳۱ ۱۳۹۲/۰۸/۰۸
خسته نباشید. یه سوال که خیلی وقته ذهنم رو درگیر کرده
این که خط ها اولشون فاصله گذاشته میشه تاثیری داره تو کد نویسی ؟
مثلا اینجا
body{
font-family:Tahoma, Geneva, sans-serif;
آیا ضروریه که خط دوم که فونت هست فاصله بگیره اولش ؟
پاسخ: 
ضرورتی وجود ندارد، تنها به دلیل خواناتر شدن کدنویسی این کار (معمولا به صورت خودکار و توسط نرم افزارهای برنامه نویسی) انجام می شود.
نویسنده: کیانی
۱۶:۲۶ ۱۳۹۳/۰۱/۳۱
سلام
خیلی ممنون از سایت خوبتون
من به صورت تجربی html و css رو یاد گرفتم میخوام یک قالب با html5 و css3 طراحی کنم فقط یک مشکلی دارم من نمیدونم از تگ های html5 باید چه جوری در قالبم استفاده کنم یعنی میخوام قالب فعلی که دارم رو به html5 تبدیل کنم
مثلا من یک آی دی دارم به نام
<"div id="contentText>
میخوام اینو بنویسم
section
باید چی کار کنم؟
وقتی می نویسم
<"section id="contentText>
قالبم بهم میریزه
ممنونم میشم راهنمایی کنید
پاسخ: 
در کل HTML5 تفاوت بنیادی با سایر نسخه های HTML ندارد، منتها باید اصول و روش های جدید آن را با مطالعه از ابتدا و در قالب یک منبع آموزشی جداگانه مطالعه کنید، به طور مثال در HTML5 تگ div حذف نشده که بخواهید آن را با section جایگزین کنید، بلکه section نحوه تعریف و کاربرد خاص خودش را دارد، section برای قسمت بندی صفحه به بخش های خاص مانند header، footer، chapters و... است و درون آن می توان از div استفاده کرد، در واقع section معمولا تاثیر مرئی در صفحه ندارد بلکه بیشتر برای رعایت اصول بهینه سازی و HTML Semantic به کار می رود.
نویسنده: مراد
۱۹:۱۶ ۱۳۹۳/۰۲/۲۱
من میخوام بعضی از قسمتهای کدهای html رو بصورت php بنویسیم چون فرمت صفحه ام php هست و میتونم قسمتی از کدها رو در یک تابع خلاصه کنم که هم فضای کمتری بگیره هم از دید کاربر پنهان بمونه ایا این کار از لحاظ سرعت و امنیت مفید هست یا همون html بمونه بهتره؟
پاسخ: 
PHP و HTML دو کاربرد متفاوت دارند، HTML خروجی یک صفحه وب است که می تواند به صورت ثابت یا داینامیک (با استفاده از کدهای PHP) تولید شود، لذا در نهایت نتیجه همان می شود، منتها برای ایجاد قابلیت های سیستماتیک از PHP استفاده می کنند تا خروجی HTML را بدون کدنویسی مستقیم و تکرار مکررات داشته باشند که این کار را راحت تر و حرفه ای تر می کند، اما اینکه از PHP استفاده کنید یا خیر در خروجی HTML شما و به تبع در امنیت سایت تاثیری ندارد.
نویسنده: مبتدی
۰۰:۵۰ ۱۳۹۳/۰۳/۰۷
سلام
با تشکر از راهنمایی های خوبتون. میخواستم بدونم کدومیک از کدهای تعریف شده ی شما باعث مرتب نوشه شدن متن فارسی شده! چون من این قسمت رو:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
فقط به صورت
<DOCTYPE html>
نوشتم و متن فارسی که می نویسم مثل شما وقتی از علامت تعجب یا کلمه ی انگلیسی استفاده می کنم نامرتب میشه، منتهی برخلاف کار شما که در پیش نمایش مرتب میشه، مال من همینطور به هم ریخته باقی میمونه. میشه بپرسم کدوم کد باعث شده مال شما مرتب نمایش داده بشه؟ چون من همه کارایی که گفتین رو انجام دادم.
پاسخ: 
از اینکه تا این حد دقیق هستید جای خوشحالی دارد!
این حالت مربوط به راست چین یا چپ چین بودن نوشته است که با استایل CSS آن را تنظیم کرده ایم:
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
خاصیت direction با مقادیر rtl یا right to left برای این قسمت است، البته در حال حاضر نیازی به آشنایی با CSS نیست و فعلا باید بر روی HTML کار کنید.
نویسنده: عرفان
۲۲:۲۵ ۱۳۹۳/۰۷/۱۸
جالب بود
نویسنده: لیلی
۱۵:۵۹ ۱۳۹۳/۰۸/۱۷
عاااااااااالی بود
نویسنده: مگنولیا
۲۱:۰۴ ۱۳۹۳/۰۹/۰۲
سلام.
آیا تگهای h1 دارای خصوصیات تنظیم متن نیز میباشند؟
ممنون.
پاسخ: 
خیر، برای این کار باید از استایل CSS استفاده کنید.
نویسنده: مهشید
۱۶:۰۹ ۱۳۹۴/۰۴/۱۲
سلام.
میشه توضیح بدید قسمت font-family چه کاربردی داره دقیقا و چه چیز رو مشخص میکنه؟
یه سوال دیگه هم این که بجای فونت هایی که توی این قسمت نوشتید میشه فونت های دیگه ای رو نوشت؟ اگه میشه چه فونت هایی؟
پاسخ: 
خاصیت font-family مربوط به تنظیم خانواده فونت در CSS است که در جای خود توضیح داده شده، فونت های تنظیم شده جزء موارد پیش فرض هستند و می توانید سایر موارد عمومی نظیر Arial و ... را نیز قرار دهید، منتها اگر هدفتان درج فونت های فارسی است، باید با خاصیت
@font-face
در CSS3 آشنا باشید (لطفا در وب عبارت "نحوه استفاده از فونت فارسی با font-face" را جستجو کنید).
نویسنده: Arash BTF
۰۱:۲۵ ۱۳۹۴/۰۵/۲۰
واقعا ممنون ، مطالب سایتتون عالیه
نویسنده: mohammad
۱۱:۰۰ ۱۳۹۴/۰۶/۲۸
تشکر از زحمات شما
نویسنده: نگار
۱۷:۴۹ ۱۳۹۵/۰۹/۳۰
بسیار عالی و آموزنده ممنونم
نویسنده: محمد
۲۱:۱۴ ۱۳۹۶/۰۲/۱۸
با عرض سلام و خسته نباشید و تشکر بابت سایت بسیار عالیتون
من کاملا گیج شدم آموزش از اینم مقدماتی ترهم هست چون من اصل هیچی درباره برنامه نویسی html نمیدونم و میخوام تازه شروع کنم
ممنون میشم اگه پاسخ بدین
پاسخ: 
اگر از بخش مقدماتی، اولین آموزش را انتخاب و به دقت مطالعه کنید مباحث به ساده ترین شکل ممکن گفته شده، در صورتی که همچنان با مشکل مواجه بودید، سعی کنید در خصوص مبانی وب مطالعه داشته باشید.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





2 × 1
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form شریفی
در:
سلام مجدد. من یه سوال خیلی تخصصی دارم. ممنون میشم پاسخ بدین. برای پروژه پایان نامه. دارم روی موتورهای جستجوگر تحقیق میکنم. فرض...
۱۴۰۰/۰۱/۲۵

form شریفی
در:
سلام استاد. من از متد file_get_contents استفاده می کنم برای دریافت اطلاعات از سایت های مختلف. بعضی وقتها سایت ها دیر لود میشه. آیا...
۱۴۰۰/۰۱/۲۵

form hh
در:
سلام خدمت شما بنده یه سوال داشتم تمام مراحل شما رو انجام دادم و نتیجه گرفتم و لازمه یه تشکرم بکنم. وبسایت من،...
۱۴۰۰/۰۱/۲۵

form erfan
در:
سلام من واسه یه دکمه یه محتوایی تعریف کردم که وقتی کلیک شد محتوا رو نشون بده اما تو دوجاش موندم یک اینکه چیکار کنم...
۱۴۰۰/۰۱/۲۱

form mahdi
در:
سلام استاد عزیز ، بازم معذرت میخوام سوالام زیاد شد ولی همشون در یک موضوع هستن ، تونستم که با این روش برای هر اسلایدر...
۱۴۰۰/۰۱/۱۸

form mahdi
در:
سلام استاد عزیز عذر میخوام بار سومه پیام میزارم ، مشکلش از ست اینترول بود که قطع نمیشد و با هم تداخل داشتند ولی بدون...
۱۴۰۰/۰۱/۱۸

form mahdi
در:
سلام وقت بخیر استاد عزیز ، یک تابع رو چطور میشه در جاوا اسکریپت اورراید کرد؟ که مثلا با هر فراخوانی مجدد ، قبلی ها...
۱۴۰۰/۰۱/۱۸

form متین
در:
سلام چجوری برای خود صفحه ادرس بسازیم که سایتی که رو ساختیم رو با دستگاه دیگه پیداش کنیم
۱۴۰۰/۰۱/۱۶

form امیرحسین برزویی
در:
من یک وبلاگ دارم و 9 سالمه من در وبلاگم مداحی می گذارم ولی وقتی قاب گذاشتم از این سایت من دیگه فیلم...
۱۴۰۰/۰۱/۱۶

form بنده خدا
در:
سلام خسته نباشین، خدا قوت. یه سوال دارم. چرا در بخش نظردهی وبلاگ به جای عنوان پست می نویسه مطلب مورد نظر یافت نشد؟!...
۱۴۰۰/۰۱/۱۵

form روح الله
در:
موقعی میخواهم وارد سایت ایران خودرو بشم پیام میده از Ip داخلی استفاده کنید دلیلش چیست
۱۴۰۰/۰۱/۱۴

form غریب
در:
تشکر از شما مشکلم حل شد امیدوارم موفق و پیروز باشید هر جا که هستید
۱۴۰۰/۰۱/۱۱

form غریب
در:
سلام مجدد ممنون و تشکر از کمکتون کد به خوبی کار میکنه اما همچنان من مشکلی دارم که حل نتونستم کنم...
۱۴۰۰/۰۱/۱۰

form غریب
در:
سلام مجدد این کدی که دادید خوب هست ولی من بد و ناقص توضیح دادم توجه کنید کد این هست تقریبا ممنون...
۱۴۰۰/۰۱/۱۰

form غریب
در:
سلام خسته نباشید من کدی دارم که میخوام داخل یه بخشیش نتیجه یه رویداد رو فراخوانی کنم و راهش و نمیدونم اگر میشه کمک...
۱۴۰۰/۰۱/۱۰

form محسن
در:
سلام ، سوال من مربوط به پنل کارگزاری هاست ، وقتی اسم یک سهم (نماد) را در قسمت جست و جو سرچ میکنم...
۱۴۰۰/۰۱/۰۸

form ترجمه
در:
باسلام همه صفحات من دارای دو url می باشد که یکی با حروف کوچک است و دیگری با حروف بزرگ چجوری این مشکل را...
۱۴۰۰/۰۱/۰۸

form سهیل ملکی
در:
سلام خسته نباشید ببخشید من میخوام از تابع navigator.online توی جاوا اسکریپت استفاده کنم تا باهاش بفهمم کاربر آنلاین هست یا نه و اگه بود...
۱۴۰۰/۰۱/۰۴

form Rabbiten
در:
سلام. من چند ماه است که دنبال کد استایل تصویر مثل تبلیغات بالای سایت شما هستم. اما هیچ جا پیدایش نمی کنم. لطف می...
۱۴۰۰/۰۱/۰۱

form mahdi
در:
سلام استاد عزیز سال نو رو تبریک میگم بهتون ، امیدوارم که خودتون و خانوادتون همیشه سالم و سلامت باشید و امسال پر از...
۱۳۹۹/۱۲/۳۰

form korosh abbasy
در:
سلام وقت بخیر ببخشید در مورد این مطلب سوالی پرسیدم شما در مورد output buffering توضیح دادید کد کار نمیکنه میخواستم ببینم نیازی هست من...
۱۳۹۹/۱۲/۲۹

form احمد
در:
سلام مجدد عذرخواهی میکنم یه موردی دیگه بود فراموش کردم در مورد سوال هدر بگم اینکه روی لوکال به هدر ارسال میشه ولی روی هاست...
۱۳۹۹/۱۲/۲۸

form احمد
در:
با سلام خسته نباشید ببخشید قبلا یه سری دستورات جی کوری رو از خودتون گرفتم وقتی فیلدهای فرمم تکمیل شده است توسط هدر بره به...
۱۳۹۹/۱۲/۲۸

form korosh abbasy
در:
سلام دم شما گرم این دستور برای خوندن فایل هم استفاده میشه؟ من میخوام دسترسی تعیین کنم که اگر یک متغییر true...
۱۳۹۹/۱۲/۲۷

form احمد
در:
با سلام و خسته نباشید ببخشید داخل جیکوری یدونه متغییر دارم الان میخوام همین متغییر رو با یه عدد دیگه جمع کنم ولی وقتی علامت...
۱۳۹۹/۱۲/۲۶
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.