بعد از آموزشهای پایه ای HTML تصمیم گرفتیم یه لیست کامل و بروز از تگ های html رو براتون آماده کنیم.
ما برای شما یه لیست کامل از تگ های بروز HTML رو در قالب یه فایل جداگانه و قابل ذخیره آماده کردیم که میتونید همه جا داشته باشیدش به عنوان رفرنس به فایل pdf تبدیل کنید و براحتی قابل دسترسی باشه.
این لیست آماده تگ های html به همراه توضیحات و مثال هست همچنین میتونید با کلیک روی تگ مورد نظر اون رو بوک مارک کنید و هر جای اینترنت بهش ارجاع بدید.
لیست کامل تگ های html قابل دانلود
در این قسمت از اموزش html css قصد داریم کلیه تگهایhtml را برای شما عزیزان توضیح بدهیم. برای این منظور لیست کامل تگها برای شما آماده شده . همچنین قبل از اینکه به معرفی تگهای htm بپردازیم میخواهیم بدانیم مفهوم تگ چیست و چه کاربردهایی در html دارد. تگ ها درhtml نقش مهمی دارند . در نوشتن تگها باید ساختار و اصول آن رعایت شود و از علامت شروع < نام تگ> و در پایان <نام تگ/> استفاده میشود.
تگ HTML | توضیحات و کاربرد |
<!–کامنت بنویس–> | درج کامنت برای کد، خروجی ندارد |
<!DOCTYPE> | مشخص کردن نوع صفحه وب |
<a></a> | ایجاد لینک |
<abbr></abbr> | تعریف مخففها |
<address></address> | تعریف اطلاعات تماس |
<area> | تعریف کردن یک منطقه در نقشه |
<article></article> | درج مقاله یا پست |
<aside></aside> | تعریف محتوای فرعی و سایدبار صفحه |
<audio></audio> | استفاده از صوت در صفحه وب |
<b></b> | بولد و برجسته کردن متن |
<base> | برای تعریف یک لینک در صفحه وب |
<bdi></bdi> | برای تعریف جهت متنی که فرمت متفاوت از متن اصلی دارد |
<bdo></bdo> | تغییر جهت محتوا |
<blockquote></blockquote> | برای نوشتن نقل و قول |
<body></body> | تعریف بدنه اصلی و بخش قابل نمایش در html |
<br> | رفتن به خط جدید |
<button></button> | ایجاد دکمه قابل کلیک |
<canvas></canvas> | برای نگهداری اشکال گرافیکی |
<caption></caption> | نوشتن کپشن و توضیحات برای جدول |
<cite></cite> | برای تعریف عنوان یک اثر |
<code></code> | برای درج و نمایش کد (کامپیوتری) در صفحه سایت |
<col> | تعیین ستون در جدول، قابل استفاده در<colgroup> |
<colgroup></colgroup> | تعیین ستون جدول |
<data></data> | نوشتن محتوایی که برای ماشینها قابل خواندن و ترجمه باشد |
<datalist></datalist> | ایجاد یک لیست از گزینههای از پیش تعریف شده |
<del></del> | برای نمایش محتوای حذفی (یک خط روی محتوا میکشد) |
<details></details> | تعریف جزییات که کاربر میتوان آن را مخفی کند یا ببیند. |
<dfn></dfn> | تعریف اصطلاح در میان محتوا |
<dialog></dialog> | برای نمایش یک باکس دیالوگ در مرورگر |
<div></div> | مشخص کردن یک بخش از سند hml |
<dl></dl> | تعریف یک لیست توضیحی |
<dt></dt> | تعریف عنوان در لیست توضیحی |
<dd></dd> | درج توضیحات برای یک آیتم از لیست توضیحی |
<em></em> | برای تاکیید روی یک محتوا |
<embed></embed> | برای نمایش محتوای خارج از وبسایت |
<fieldset></fieldset> | ایجاد گروه برای چندین فیلد از یک فرم |
<figcaption></figcaption> | نوشتن کپشن و توضیح برای تگ figure |
<figure></figure> | نمایش یک محتوای مستقل مثل تصویر، نمودار |
<footer></footer> | ایجاد پابرگ و فوتر برای سند |
<form></form> | ایجاد فرم در html |
<h1>تا <h6> | نوشتن عنوان در صفحه |
<head></head> | تعریف اطلاعات سند (غیرقابل نمایش) |
<header></header> | ایجاد هدر در سند |
<hr> | رسم خط افقی برای جداسازی محتوا |
<html></html> | ایجاد سند html (ساخت ریشه سند) |
<i></i> | متن را ایتالیک و کج میکند |
<iframe></iframe> | برای ایجاد فریم در صفحه سایت |
<img> | درج تصویر |
<input></input> | ایجاد ورودی در فرم |
<ins></ins> | اشاره به محتوای اضافه شده (یک خط زیر کلمه میکشد) |
<kbd></kbd> | تعریف دکمههای صفحه کلید |
<label></label> | ایجاد برچسب برای input در فرم |
<legend></legend> | تعریف توضیحات برای تگ <fieldset> |
<li></li> | تعریف آیتم در لیست |
<link> | ایجاد لینک در صفحه سایت |
<main></main> | مشخص کردن بدنه اصلی محتوا |
<map></map> | تعریف یک نقشه تصویری |
<mark></mark> | هایلایت کردن یک متن |
<meta></meta> | ایجاد اطلاعات متاداده برای سند |
<nav></nav> | تعریف منو |
<noscript></noscript> | نمایش متن جایگزین به کاربر وقتی اسکریپت اجرا نشود |
<object></object> | یک نگهدارنده برای درج یک افزونه خارجی |
<ol></ol> | تعریف یک لیست ترتیبی |
<optgroup></optgroup> | برایایجاد یک گروه بین optionها در لیست |
<p></p> | تعریف پاراگراف |
<param></param> | تعریف پارامتر برای تگ object |
<picture></picture> | نگهدارنده مجموعهای از تصاویر |
<pre></pre> | حفظ فرمت تعریف شده برای نوشته |
<progress></progress> | برای نمایش پیشرفت کار |
<q></q> | نمایش نقل قول کوتاه |
<s></s> | خط کشیدن روی یک محتوا به معنای ناصحیح بودن آن |
<samp></samp> | نمایش یک خروجی مانند خروجیهای کامپیوتر |
<script></script> | نوشتن اسکریپت (کدهای جاوااسکریپت) |
<section></section> | ایجاد بخش و قسمت |
<select></select> | برای ایجاد یک لیست بازشونده |
<small></small> | نمایش متن به صورت ریزتر |
<source></source> | برای درج منبع یک رسانه |
<span></span> | ایجاد یک بخش برای درج محتوا به صورت Inline |
<strong></strong> | بولد و توپر کردن متن (متن دارای ارزش محتوایی است) |
<style></style> | برای درج دستورات CSS |
<sub></sub> | ایجاد یک متن که از سطر پایینتر نوشته شده |
<sup></sup> | ایجاد یک متن که از سطر بالاتر نوشته شده |
<summary></summary> | ایجاد عنوان برای تگ detail |
<table></table> | ایجاد جدول |
<tbody></tbody> | مشخص کردن بدنه جدول |
<td></td> | مشخص کردن هر سلول جدول |
<textarea></textarea> | ایجاد ورودی متنی چند خطه در فرم |
<th></th> | نوشتن عنوان برای هر ستون از جدول |
<thead></thead> | مشخص کردن بخش هدرها در جدول |
<time></time> | ایجاد زمان یا تاریخ |
<title></title> | نوشتن عنوان صفحه قابل نمایش در نتایج موتورهای جستجو |
<tr></tr> | تعریف سطر در جدول |
<u></u> | خط کشیدن زیر متن |
<ul></ul> | ایجاد لیست نامرتب |
<video></video> | درج ویدیو در صفحه سایت |
<wbr> | شکستن خط و رفتن به سطر جدید |
لیست کامل تگ های html با مثال
هنوز مشکل دارید؟
خبر دیگه اینکه هر وقت مشکلی داشتید در مورد html یا بصور کلی در مورد برنامه نویسی میتونید تو سایت irdevs.com بپرسید لینک گروه و کانال تلگرام هم تو سایت هست.
خیلی عالی بود ممنون
مچکرم 🙂
واااااااای مرررررررر30
واقعا توپ بود
خوشحالم که بدردتون خورده.
موفق باشید.
دمتون گرم عالی بود.خسته نباشید….
خواهش میکنم ممنون که نظر دادید.
واقعا جز یکی از کارهای فارسی خوب بود. عالی بود
خیلی ممنون نظر شما باعث دلگرمی ما میشه 🙂
دمت گرم پرفکت بود
سلام
واقعا ممنون میشه به عنوان یک اموزش کامل اما مختصر و کاربردی حسابش کرد
خیلی بکارم اومد
متشکرم
خیلی ممنونم جواد عزیز.
سوالی هم داشتم
آیا میشه از آموزشتون کپی بگیرم و داشته باشم
و اینکه اگر کسی خواست همراه با آدرس سایتتون در اختیارشون بزارم…
بنده برای خودم میخوام چون دارم برنامه نویسی وب یاد میگیرم ان شاا…اما اگر کس دیگه ای هم خواست آیا ایرادی نداره در اختیارشون قرار بدم ….
بله، فقط بهتره تو اینترنت منتشر نکنید. ممنون.
عالی بود عزیزم……… میشه یه توضیح مختصر در مورد انواع طراحی سایت بنویسین…… مثلا کدومش بهتره…………. و تفاوتشون با هم چیه؟؟؟؟؟/
با سلام و خسته نباشید ….
کارتون خیلی عالی و کارآمد و مبتکرانه هستش…
از اونجایی که تازه دو سه هفته هستش که به صورت خودآموز دارم رو html کار میکنم دنبال همچین دسته بندی منظمی میگشتم و تو ذهنمم بود که دست نویس واسه خودم درست کنم ولی واقعیتش یه جاهایی بقدری دلسرد میشم که یکی دو روز پیگیریمو تعطیل میکنم… و بعدش دوباره… البته تنبلی هم دخیله…
به هر حال ازتون سپاسگذارم (فقط کاشکی میشد یجورایی ofline هم از کارتون نهایت استفاده رو بردش )
سلام. خیلی ممنونم مسعود جان 🙂
میتونی صفحه رو ذخیره کنی یا از آپشن offline modeمروزگزت استفاده کنی.
اگر سوالی داشتی تو سایت اصلی بپرس irDevs.com
موفق باشی.
سلام ببخشید تگ alt چی کارم میکنه؟؟؟
سلام.
سوالهای مرتبط با برنامه نویسی رو میتویند تو فروم به آدرس irDevs.com بپرسید
موفق باشید.
عالی بود واقعا توی هیچ سایت دیگری به این ترتیب و قشنگی ندیده بودم
خیلی خوشحالم که بدردتون خورده. مچکرم 🙂
خیلی بدردبخور بود مرسی♡
خیلی مچکرم 🙂
عالی بود ?✌
مچکرم. لطفا به کانال ما در تلگرام محلق بشید @irdevs_official
چجوری میشع از یک برنامع نویس کمک بخوام
سلام. هر سوالی دارید میتونید تو irDevs.com مطرح کنید.
با سلام خیلی از لطفتون متشکرم. واقعا خیلی بهم کمک کرد تا بتونم مجموعه ای از تگ های پرکاربرد در html رو یک جا گردآوری کنم…
چقدر خوبه که این جور سایت ها باشه تا هم کاربرها بتونن مطالب خودشون رو ارائه بدن و هم یه دلگرمی واسه ادمین محترم باشه…
بازم یه دنیا ممنونم داداش…
خواهش میکنم سعید عزیز و مچکرم بابت حرف های قشنگت.
اگر تمایل به هر نوع هکماری داری میتونی مارو در جریان بذاری.
آدرس سایت: irDevs.com
آدرس کانال تلگرام: @irdevs_official
با سلام خسته نباشید
ببخشید عالیه اینطوری اگر بتونید یک خروجی ورد ، یا PDF را در اختیارم قرار بدهید ممنون میشم
بسیار عالی و ممنون
خواهش میکنم 🙂
میخواستم بپرسم من وبی ساخته ام نمیدونم چطوری یه ادرس براش بسازم تا توی گوگل پیداش کن
سلام. میتونید توی سایت سوالتون رو مطرح کنید. مچکر
دوستان ما یه گروه برنامه نویسی تلگرام هم زدیم که میتونید اونجا سوالات رو مطرح کنید: @irdevs_chat
عالی بود ممنونم از شما