لیست تمام تگ های html با مثال

لیست تمام تگ های html با مثال موضوعی است که در این مقاله به آن میپردازیم زبان html بر اساس تگ های آن استفاده میشود و شما برای یادگیری کدنویسی html نیاز دارید انواع تگ های html را بشناسید و کاربرد آن ها را بدانید تا در نهایت بتوانید در پروژه های واقعی از آنها استفاده کنید بنابراین در این آموزش میخواهیم ضمن معرفی منابع آموزشی برای یادگیری کدنویسی html لیست تمام تگ های html را با مثال خدمت شما عزیزان ارائه کنیم.

توجه :

قبل از اینکه بخواهیم لیست تمام تگ های html را برای شما عزیزان ارائه کنیم باید به این نکته توجه داشته باشید که اگر از صفر میخواهید کدنویسی html css را یادبگیرید صرفا با آموزش تگ های html نمیتوانید به تخصص و تسلط کامل برسید بلکه باید این تگ ها را در قالب ایجاد یک پروژه واقعی html استفاده کنید و کاربرد این تگ ها را در پروژه درک کنید تا در نهایت بهترین نتیجه را بگیرید. بنابراین پیشنهاد میکنم بعد از خواندن این مقاله در یک دوره آموزشی ویدیویی و پروژه محور ثبت نام کنید پیشنهاد ما استفاده از دوره آموزش html css وبسافت3 است.

مفهوم تگ در html

تگ های html چیست؟ اگر بخواهیم خیلی ساده به این سوال پاسخ دهیم، می توان گفت که تگ های html عناصر یا تگ هایی هستند که برای علامت گذاری ساختار یک صفحه وب استفاده می شوند. تگ های HTML در داخل علامت <> قرار می گیرند و معمولاً دارای یک تگ باز مانند <a> و یک تگ پایانی مانند این </a> هستند و در نهایت محتوای مورد نظر بین تگ افتتاحیه و تگ پایانی به این صورت قرار می گیرد: < a >مطالب مورد نظر</a > امیدوارم متوجه شده باشید اما برای درک بهتر موضوع و یادگیری کامل html به صورت عملی و پروژه محور به شما پیشنهاد می کنم در دوره رایگان آموزش html در Websoft3 ثبت نام کنید.

اما در ادامه پاسخ به این سوال که تگ های html چیست گفتیم که این تگ ها عناصر یا تگ هایی هستند که برای علامت گذاری ساختار یک صفحه وب به کار می روند مثلا در html یک تگی به نام <p> < وجود دارد. /p> که نشان می دهد محتوایی که در این تگ نوشته می شود متن پاراگراف است یا مثلاً یک تگی به نام <header></header> داریم که نشان می دهد محتوایی که در این تگ نوشته می شود بخشی از عناصر هدر سایت است و در این مورد مثال های مشابهی وجود دارد و پاسخ روشنی به این سوال وجود دارد که تگ های HTML چیست و برای چه استفاده می شود.

لیست تمام تگ های html

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

تگ HTML توضیحات و کاربرد
!–کامنت بنویس– ثبت توضیح برای کد، در خروجی تاثیر ندارد
!DOCTYPE تعیین نوع سند صفحه وب
a/a برای ایجاد لینک (دارای اتریبیوت)
abbr/abbr برای تعریف اختصارها و مخفف ها استفاده میشود
address/address اطلاعات تماس نویسنده در این تگ نوشته میشود
area برای درج نقشه تصویری قابل کلیک
article/article برای ایجاد مقاله – مطلب یا پست استفاده میشود
aside/aside بخش کناری صفحه و سایدبار داخل این تگ
audio/audio درج صوت – آهنگ در این تگ
b/b متن را برجسته میکند (فاقد ارزش محتوایی)
base برای تعریف لینک پایه (متفاوت با تگ a)
bdi/bdi جهت درج متنی که متفاوت با متن اصلی است
bdo/bdo برای برعکس کردن محتوا استفاده میشود
blockquote/blockquote نقل قول ها در این تگ نوشته میشوند
body/body بدنه اصلی صفحه (تمام محتوای قابل نمایش در صفحه داخل این تگ قرارمیگیرند)
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 برای تعیین یک بخش از سند صفحه وب (زیاد استفاده میشود)
dl/dl برای ایجاد لیست توضیحات اسنفاده میشود
dt/dt عنوان را در لیست توضیحی مشخص میکند
dd/dd توضیحات یک آینم در لیست توضیحی
em/em جهت تاکید روی یک محتوا از این تگ استفاده میشود
embed/embed جهت نمایش محتواهایی که خازج از سایت هستند (معمولا ویدیوها)
fieldset/fieldset برای دسته بندی چند فیلد داخل فرم
figcaption/figcaption توضیحات تگ figure در این تگ نوشته میشود
figure/figure برای درج محتوا بصورت مجزا در صفحه از این تگ استفاده میشود
footer/footer کل پابرگ (فوتر) سایت داخل این تگ قرار میگیرد
form/form تگ اصلی ایجاد فرم در صفحه
h1تا h6 عناوین محتوا داخل این تگها نوشته میشوند (بر اساس اولیویت 1 تا 6)
head/head اطلاعات پشت صحنه داخل این تگ نوشته میشود (قبل از تگ body)
header/header کل سربرگ سایت داخل این تگ قرار میگیرد
hr جداکننده – خطی افقی رسم میکند
html/html برای ایجاد سند html – الزامی در ابتدای صفحه استفاده میشود
i/i متن را کج (ایتالیک) می‌کند
iframe/iframe برای ایجاد فریم در صفحه استفاده میشود
img برای نمایش عکس در صفحه استفاده میشود
input/input فیلد ورودی در فرم (نوع فیلد بر اساس اتریبیوت آن مشخص میشود)
ins/ins با خط کشیدن زیر کلمه به آن اشاره میکند
kbd/kbd برای تعریف دکمه های ورودی صفحه کلید استفاده میشود
label/label برای برچسب گذاری روی فیلدهای فرم
legend/legend برای نوشتن توضیح در تگ fieldset استفاده میشود
li/li اضافه کردن آیتم به لیست (این تگ داخل تگ ul استفاده میشود)
link برای ارتباط بین محتوای خارجی و صفحه جاری
main/main کل محتوای اصلی صفحه داخل این تگ قرار میگیرد
map/map برای ایجاد یک نقشه تصویری از این تگ استفاده میشود
mark/mark برای هایلایت کردن بخشی از محتوا استفاده میشود
meta/meta اطلاعات پشت صحنه صفحه (این تگ داخل تگ head استفاده میشود)
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 کدهای جاوااسکریپت داخل این تگ نوشته میشود (داخل سند html)
section/section برای ایجاد یک بخش (مشابه تگ div است اما این تگ معنادار است)
select/select برای ایجاد لیست باز شو داخل فرم استفاد میشود
small/small متن را ریزتر نمایش میدهد
source/source برای تعیین منبع یک رسانه در حالت های مختلف استفاده میشود
span/span برای نوشتن محتوا کوتاه بصورت inline از این تگ استفاده میشود (پرکاربرد)
strong/strong متن را ضخیم و به آن ارزش میدهد (ارزش نزد گوگل)
style/style استایل های css داخل سند html در این تگ نوشته میشوند
sub/sub محتوای این تگ کمی پایین تر از سطر نمایش داده میشود
sup/sup محتوای این تگ کمی بالاتر از سطر نمایش داده میشود
summary/summary عناوین احتمالی تگ detail داخل این تگ نوشته میشوند
table/table تگ اصلی برای ایجاد جدول
tbody/tbody بدنه جدل را مشخص میکند (داخل تگ table استفاده میشود)
td/td سلول های جدول را مشخص میکند (داخل تگ table استفاده میشود)
textarea/textarea برای ایجاد ورودی متنی بزرگ داخل فرم استفاده میشود
th/th عناوین سلول های جدول توسط این تگ نوشته میشوند(داخل تگ table)
thead/thead سرتیتر های جدول داخل این تگ هستند
time/time برای نمایش تاریخ و زمان در صفحه وب
title/title عنوان صفحه است (در تب مرورگر نمایش داده میشود و درون صفحه نیست)
tr/tr برای تعریف سطر در جدول (داخل تگ table استفاده میشود)
u/u زیر متن خط میکشد
ul/ul برای ایجاد لیست های مختلف از جمله منوهای سایت استفاده میشود
video/video برای نمایش ویدیو در سایت استفاده میشود
wbr خط جاری را مشکند و به سطر جدید میرود

کدام تگ ها از همه مهمتر هستند؟

تگ های مهم html چیست؟ اگر بخواهیم صادق باشیم، معمولاً تنها 20 تا 30 درصد از تمام تگ های html که در بالا معرفی کردیم در طراحی یک صفحه وب استفاده می شود، البته این به معنای بی فایده بودن بقیه تگ ها نیست! قطعاً شرایط خاصی وجود دارد که باید از تمام تگ های html استفاده شود، اما اگر بخواهیم به برخی از مهم ترین آنها که در طراحی وب استفاده می شود اشاره کنیم، می توان به موارد زیر اشاره کرد:

<div>
<span>
<a>
<img>
<p>
<strong>
<h1>-<h6>
<ul>
<li>
<header>
<footer>
<nav>
<article>

تگ های html5

تگ های html5 تگ های معناداری هستند که در آخرین به روز رسانی معرفی شدند. در واقع تگ های html5 شبیه ساختار یک صفحه وب هستند، بنابراین نام هر تگ نشان می دهد که چه محتوایی در آن گنجانده شده است، مانند تگ <header>، فقط برای ایجاد هدر سایت، تگ <article>. برای ایجاد کادر برای مقالات و پست های سایت استفاده می شود، تگ <nav> برای ایجاد منوی سایت استفاده می شود، تگ aside نوار کناری را تشکیل می دهد و …

 کلا چه تعداد تگ html داریم؟

تعداد کل تگ های html 132 می باشد البته برخی از این تگ ها منسوخ شده اند و امروزه اصلا استفاده نمی شوند به جز اینکه سایت W3schools.com تعداد کل تگ های html را 107 ذکر کرده است البته نگران نباشید نیازی به ذخیره تمامی تگ های html نیست. به خصوص با ظهور html5، بسیاری از تگ های قدیمی HTML دیگر مورد استفاده قرار نمی گیرند، بنابراین بهترین کار این است که برخی از پروژه های طراحی وب سایت واقعی را از ابتدا کدنویسی کنید و ببینید پرکاربردترین تگ های HTML کدامند. قطعاً بعد از انجام چند کار عملی و پروژه محور چیزها را متوجه خواهید شد و به خصوص در Html5 دیگر نیازی به یادآوری تگ ها نیست زیرا همه چیز در تمام تگ های HTML5 واضح است و نام تگ ها به طور کامل کاربرد و نقش آن تگ را نشان می دهد. .

تگ های html چگونه نوشته میشود؟

ساختار تگ های HTML به سه بخش تقسیم می شود:

1 – کمتر از علامت >: قبل از نوشتن نام تگ باید علامت > را بنویسیم

2- نام تگ: پس از قرار دادن علامت کوچکتر > نام تگ را قرار می دهیم

3 – علامت بزرگتر <: در نهایت بعد از نوشتن نام تگ علامت بزرگتر < را قرار می دهیم

در نهایت شکل کلی تگ به صورت زیر است: <tagname>

تگ های HTML معمولاً به صورت جفتی استفاده می شوند، یعنی دارای یک تگ باز و یک تگ بسته می شوند که در نهایت ساختار جدیدی به نام عنصر ایجاد می شود. برای مثال، اگر بخواهیم از تگ body استفاده کنیم، باید هر دو تگ باز و بسته را بنویسیم

به طور کلی ساختار تگ های html از 3 قسمت تگ باز – محتوای تگ – تگ بسته (مشابه تصویر زیر) تشکیل شده است. توجه داشته باشید که محتوای تگ می تواند تگ یا متن ساده دیگری باشد.

سند خام html

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

[code]

<!DOCTYPE html>
<html>

<head>
<meta charset=”utf-8″>
<title>وبسافت 3</title>
</head>

<body>
<p>این یک پاراگراف است</p>
</body>

</html>

[/code]

جمع بندی | لیست تمام تگ های html

در این مقاله سعی کردیم لیست تمام تگ های html را خدمت شما عزیزان ارائه دهیم همچنین تگ های اضافه شده در html5 را نیز معرفی کردیم و ساختار استفاده از این تگ ها را در قالب پروژه واقعی نمایش دادیم امیدوارم این مقاله برای شما مفید بوده باشد اگر سوال یا نکته ای در مورد این موضوع دارید در بخش کامنت ها بپرسید.

منبع : https://websoft3.com/basic-html-tags/

دکمه بازگشت به بالا