نمایش مبدأ برای عنصر اچ‌تی‌ام‌ال

یک '''عنصر اچ‌تی‌ام‌ال'''، نوعی مؤلفه سند [[اچ‌تی‌ام‌ال]] ([[زبان نشانه‌گذاری]] فرامتن)، و یکی از چندین نوع گره اچ‌تی‌ام‌ال است (گره‌های متنی، گره‌های کامنت و موارد دیگر نیز وجود دارد). سند اچ‌تی‌ام‌ال، [[ساختار درختی|درختی]] از [[گره (علوم رایانه)|گره‌های]] ساده اچ‌تی‌ام‌ال است. مانند گره‌های متنی و عناصر اچ‌تی‌ام‌ال که سند را قالب‌بندی می‌کنند و به آن معنا می‌دهند (مثلاً متن را پررنگ می‌کنند، آن را در پاراگراف‌ها، فهرست‌ها و جداول سازمان‌دهی می‌کنند، یا [[ابرپیوند|پیوندها]] و تصاویر را در سند جاسازی می‌کنند). هر عنصر می‌تواند با کمک صفت‌های اچ‌تی‌ام‌ال، تعریف و وضعیت مشخصی بگیرد. عناصر همچنین می‌توانند محتوا داشته باشند، از جمله عناصر دیگر و متن.

{{سری اچ‌تی‌ام‌ال}}

== مفاهیم ==
=== عناصر و تگ‌ها ===
موقعیت یک عنصر از یک تگ شروع آغاز می‌شود و با یک تگ پایان، خاتمه می‌یابد.<ref name="HTML401_Elements">{{Cite web
  |at=§3.2.1 Elements
  |title=§3 On SGML and HTML
  |work=HTML 4.01 Specification
  |date=24 December 1999
  |url=http://www.w3.org/TR/1999/REC-html401-19991224/intro/sgmltut.html#h-3.2.1
  |publisher=[[ائتلاف وب جهان‌گستر|W3C]]
}}</ref> بسیاری از عناصر در یک سند اچ‌تی‌ام‌ال، اما نه همه آنها، از این قاعده پیروی می‌کنند که به صراحت در مشخصات ''اچ‌تی‌ام‌ال ۴٫۰۱'' آمده‌است:
{{گفتاورد|'''عناصر، تگ نیستند.''' برخی افراد هستند که عناصر را به نام تگ می‌شناسند و از آنها با نام تگ یاد می‌کنند (به عنوان مثال، «تگ P»). به یاد داشته باشید که عنصر یک چیز است و تگ (چه تگ شروع، چه تگ پایان) چیز دیگری است. برای مثال، عنصر HEAD همیشه وجود دارد، حتی اگر هر دو تگ شروع {{برچسب|head|o}} و تگ پایان {{برچسب|head|c}}، در نشانه‌گذاری وجود نداشته باشند.<ref name="HTML401_Elements"/>}}
همچنین، توصیه‌نامه کنسرسیوم [[وب جهان‌گستر]] در '''نسخه دوم اچ‌تی‌ام‌ال ۵٫۱'''، به صراحت می‌گوید:
{{گفتاورد| source=[https://www.w3.org/TR/html51/syntax.html#tags نسخه دوم اچ‌تی‌ام‌ال ۵٫۱ § ۸٫۱٫۲. عناصر § تگ‌ها] |
از '''تگ‌ها'''، برای تعیین حد شروع و پایان عناصر در نشانه‌گذاری استفاده می‌شود. (...) تگ‌های شروع و پایان '''برخی''' از عناصر عادی را می‌شود حذف کرد، (...)
محتویات عنصر باید دقیقاً بعد از تگ شروع (که ممکن است در موارد خاص ''به‌طور ضمنی اشاره شود'') و درست قبل از تگ پایان (که در موارد خاص ممکن است مجدداً ''به‌طور ضمنی اشاره شود'') قرار گیرد. }}
و:
{{گفتاورد| source=[https://www.w3.org/TR/html51/syntax.html#optional-tags نسخه دوم اچ‌تی‌ام‌ال ۵٫۱، § ۸٫۱٫۲٫۴. تگ‌های اختیاری] |
برخی از تگ‌ها را می‌توان '''حذف کرد'''.
{{سخ}}'''نکته:'''{{سخ}}
حذف تگ شروع یک عنصر (...) به معنای عدم وجود آن عنصر نیست. ضمنی است، اما هنوز وجود دارد. به عنوان مثال، یک سند HTML همیشه دارای یک عنصر ریشه <kbd><nowiki><html></nowiki></kbd> است، حتی اگر رشته <kbd><nowiki><html></nowiki></kbd> در هیچ جایی از نشانه‌گذاری ظاهر نشود. }}

== نگاه کلی ==
=== سینتکس ===
{{Image frame|caption=بخش‌هایی از یک عنصر اچ‌تی‌ام‌ال
|content=<math>
\overbrace{
  \overbrace{\mathtt{\color{BrickRed}<\!p\ }\color{Magenta}\underbrace\mathtt{class}_\mathsf{\color{Black}{Attribute \atop name}}\mathtt{= ''}\!\underbrace\mathtt{paragraph}_\mathsf{\color{White}{Attr} \atop \color{Black}Attribute\ value}''\mathtt{\color{BrickRed}>}}^\mathsf{Start\ tag}
  \overbrace\mathtt{\color{Green}This\ is\ a\ paragraph.}^\mathsf{content}
  \overbrace\mathtt{\color{BrickRed}<\!/p\!>}^\mathsf{End \atop tag}
}^\mathsf{Element}
</math>
}}
{{خالی بماند}}
در سینتکس اچ‌تی‌ام‌ال، بیشتر عناصر با یک تگِ شروع و یک تگِ پایان نوشته می‌شوند و محتوا در بین آن‌ها قرار دارد.

<syntaxhighlight lang="html4strict">
<تگ> ... محتوا ... <تگ/>
</syntaxhighlight>
{{پایان راست‌چین}}
یک '''تگ اچ‌تی‌ام‌ال''' از یک نام عنصر که توسط [[قلاب (نشان‌گذاری متن)|پرانتز شکسته]] <code> <> </code> احاطه شده‌است، تشکیل می‌شود. یک تگ پایانی همچنین دارای یک اسلش، بعد از باز کردن براکت اول است تا آن را از تگِ شروع متمایز کند. به عنوان مثال، یک پاراگراف که با عنصر {{برچسب|p|o}} نشان داده می‌شود، به صورت زیر نوشته می‌شود:
<syntaxhighlight lang="html4strict">
<p>...محتوای پاراگراف...</p>
</syntaxhighlight>
اگرچه، همه عناصر در اچ‌تی‌ام‌ال، نیازی به تگ پایانی یا حتی تگ شروع ندارند.<ref name=whatwg-syntax-tag-omission/> برخی از عناصر که اصطلاحاً عناصر تهی یا خالی یا حتی تگ غیرجفت{{efn|unpaired tag}} نامیده می‌شوند، برچسب پایانی ندارند. یک مثال معمولی از این نوع عناصر، عنصر {{برچسب|br|o}}{{efn|hard line-break (شکستن خط)}} است. رفتار یک عنصر خالی از پیش تعریف شده‌است و نمی‌تواند حاوی هیچ محتوا یا عناصر دیگری باشد. به عنوان مثال، این یک آدرس است که با تگ {{برچسب|br|o}} نوشته شده:
<syntaxhighlight lang="html4strict">
<p>P. Sherman{{سخ}}42 Wallaby Way{{سخ}}Sydney</p>
</syntaxhighlight>
هنگام استفاده از [[اکس‌اچ‌تی‌ام‌ال]]، لازم است همه عناصر، از جمله عناصر خالی، باز و سپس بسته شوند. این کار را می‌توان با قرار دادن یک تگ پایان بلافاصله بعد از تگ شروع انجام داد، اما در اچ‌تی‌ام‌ال ۵ چنین کاری مجاز نیست و منجر به ایجاد دو عنصر می‌شود. یک راه جایگزین برای آنکه تعیین کنیم در حال تعریف یک عنصر خالی هستیم و با هر دو زبان اکس‌اچ‌تی‌ام‌ال و اچ‌تی‌ام‌ال ۵ سازگار است، قرار دادن <code> /</code> در انتهای تگ است (با علامت <code>/</code> در ابتدای بستن تگ یک عنصر اشتباه نشود).
<syntaxhighlight lang="html4strict">
<p>P. Sherman{{سخ}}42 Wallaby Way{{سخ}}Sydney</p>
</syntaxhighlight>
خصلت‌ها یا صفت‌های اچ‌تی‌ام‌ال کلماتی هستند که رفتار و وضعیت عناصر را کنترل می‌کنند و در داخل تگ ابتدایی یا همان تگ شروع مشخص و تعریف می‌شوند. در مثال زیر، عنصر {{برچسب|abbr|o}} برای [[کوته‌نوشت|کوتاه‌نویسی]] یک عبارت به کار برده شده و در تگ آغازین آن، با کمک صفت <code>title</code> شکل کامل عبارت تعریف شده‌است.
<syntaxhighlight lang="html4strict">
<abbr title="HyperText Markup Language">HTML</abbr>
</syntaxhighlight>

به‌طور غیررسمی، گاهی اوقات به عناصر اچ‌تی‌ام‌ال، «تگ» گفته می‌شود (که نمونه‌ای از [[بخش‌گویی]] است)، اگرچه بسیاری از آنها اصطلاح تگ را صرفاً با اشاره به نشانه‌گذاری که شروع و پایان یک عنصر را مشخص می‌کند، ترجیح می‌دهند.

نام عناصر (و صفت‌ها) ممکن است با ترکیبی از حروف بزرگ یا کوچک در اچ‌تی‌ام‌ال نوشته شود و به بزرگی و کوچکی حروف حساس نیستند، بنابراین {{برچسب|p|o}} با {{برچسب|P|o}} تفاوتی ندارد، اما در اکس‌اچ‌تی‌ام‌ال، حروف باید کوچک باشد.<ref name="XHTML10-42">[[#XHTML10|XHTML 1.0]] §4.2</ref> تا [[اچ‌تی‌ام‌ال|اچ‌تی‌ام‌ال ۴]]، حروف بزرگ متعارف بود و در مشخصات اچ‌تی‌ام‌ال استفاده می‌شد، اما در سال‌های اخیر، حروف کوچک رایج‌تر و توصیه شده‌است.

==== انواع عناصر ====
سه نوع عنصر در [[اچ‌تی‌ام‌ال]] وجود دارد: عناصر معمولی، عناصر متنی خام و عناصر تهی.

'''{{لنگر نمایان|عناصر معمولی}}''' معمولاً هر دو تگ شروع و پایان را دارند، اگرچه برای برخی از عناصر تگ پایان یا هر دو تگ را می‌شود حذف کرد و به روشی مشابه ساخته می‌شوند:
* یک ''تگ شروع'' ({{برچسب|{{var|tag}}|o}}) که شروع یک عنصر را مشخص می‌کند، و ممکن است تعدادی از صفت‌های اچ‌تی‌ام‌ال را در خود جای دهد.
* ''محتوا''، از جمله متن و عناصر دیگر.
* و ''تگ پایانی'' که در آن، نام عنصر با یک [[خط مورب|اسلش]] پیشوند شده‌است: {{برچسب|{{var|tag}}|c}}.

'''{{لنگر نمایان|عناصر متن خام}}'''{{efn|Raw text elements}} (همچنین به عنوان عناصر صرف متنی{{efn|text-only elements}} یا متن{{efn|text}} شناخته می‌شوند) اینگونه ساخته می‌شوند:
* یک ''تگ شروع'' (به شکل {{برچسب|{{var|tag}}|o}}) که شروع یک عنصر را مشخص می‌کند و ممکن است تعدادی از صفت‌های اچ‌تی‌ام‌ال را در خود جای دهد.
* محتوای ''متنی''، بدون هیچ عنصری (همه تگ‌ها، به غیر از تگ پایانی که قابل اجرا است، به عنوان محتوا تفسیر خواهند شد).
* یک ''تگ پایانی'' که در آن نام عنصر با یک اسلش پیشوند شده‌است: {{برچسب|{{var|tag}}|c}}. در برخی از نسخه‌های اچ‌تی‌ام‌ال، تگ پایان برای برخی از عناصر اختیاری است. تگ پایان در [[اکس‌اچ‌تی‌ام‌ال]] الزامی است.
یک مثال از عناصر متنی، {{برچسب|title|o}} است که نباید حاوی عناصر دیگر (از جمله نشانه‌گذاری متن) باشد، بلکه فقط متن است.

'''{{لنگر|عناصر تهی}}{{لنگر نمایان|عناصر خالی}}''' (که گاهی اوقات، عناصر منفرد{{efn|single elements}} یا عناصر مستقل{{efn|stand-alone elements}} یا عناصر غیرجفت نیز نامیده می‌شوند) فقط یک تگ شروع دارند (به شکل {{برچسب|{{var|tag}}|o}})، که می‌تواند هر کدام از صفت‌های اچ‌تی‌ام‌ال را داشته باشد. این عناصر ممکن است حاوی هیچگونه متن یا عناصر دیگری نباشند. برای سازگاری با اکس‌اچ‌تی‌ام‌ال، مشخصات اچ‌تی‌ام‌ال اجازه استفاده از فاصله اختیاری و اسلش را می‌دهد ({{برچسب|{{var|tag}}|s}} مجاز است). فاصله و اسلش در [[اکس‌اچ‌تی‌ام‌ال]] و سایر برنامه‌های [[اکس‌ام‌ال]] لازم است. دو عنصر خالی رایج، عبارتند از {{برچسب|br|s}} (برای [[نوخط|شکستن خط]]، مانند یک شعر یا یک آدرس) و {{برچسب|hr|s}} (برای ایجاد خط افقی). سایر عناصر این چنینی، اغلب به فایل‌های خارجی ارجاع می‌دهند، مانند عنصر تصویر ({{برچسب|img|s}}) و صفت‌های موجود در این عناصر بر روی فایل خارجی مورد نظر اعمال می‌شوند. مثال دیگری از عنصر خالی {{برچسب|link|s}} است که سینتکس آن به صورت زیر است:
<syntaxhighlight lang="html4strict">
<link rel="stylesheet" href="fancy.css" type="text/css">
</syntaxhighlight>

در این مثال، عنصر {{برچسب|link|s}}، مرورگر را به یک [[برگه سبک نگارش (توسعه وب)|style sheet]] هدایت می‌کند تا هنگام ارائه سند اچ‌تی‌ام‌ال به کاربر، از آن استفاده کند. در دستور زبان اچ‌تی‌ام‌ال، صفت‌ها در میان دو علامت "..." (نقل قول) نوشته می‌شوند، اما اگر از کاراکترهای حروف، اعداد، [[خط فاصله]] و نقطه باشند، نیازی به استفاده از این علامت نیست: از طرف دیگر، هنگام استفاده از سینتکس اکس‌ام‌ال (اکس‌اچ‌تی‌ام‌ال)، همه صفت‌ها باید نقل قول شوند و قبل از براکت آخر تگ، استفاده از یک [[خط مورب|اسلش]] انتهایی با یک فاصله الزامی است:
<syntaxhighlight lang="xml">
<link rel="stylesheet" href="fancy.css" type="text/css" />
</syntaxhighlight>

==== انواع تگها ====
از تگ‌ها برای تعیین حد شروع و پایان عناصر در نشانه گذاری استفاده می‌شود. در نوشتن تگها باید ساختار را رعایت کنیم.

تگها به دو صورت نوشته می‌شوند:

# تگهای کوتاه که شروع و پایان ندارد.
# تگهای بلند که علامت شروع و پایان دارد.
بیشتر عناصر با یک تگ شروع و یک تگ پایان نوشته می‌شوند.

===== نحوه نوشتن یک عنصر در HTML =====
* یک عنصر با یک تگ شروع (تگ باز) آغاز می‌شود.
* یک عنصر به یک تگ پایان (تگ بسته) ختم می‌شود.
* محتوای یک عنصر نوشته‌های بین تگ شروع و پایان می‌باشد.
* بعضی از عناصر در '''HTML''' تهی هستند.
* عناصر تهی در همان تگ شروع بسته می‌شود.
* بیشتر عناصر'''HTML''' می‌توانند دارای خصوصیت هایی باشند.
البته بعضی از تگ‌ها در html5 منسوخ شدن و دیگه اعتبار ندارند و مرورگرها تگهای منسوخ شده را پشتیبانی نمی‌کند.

===== تگ‌های کوتاه =====
{| class="wikitable"
|نام تگ
|کاربرد تگ
|-
|<nowiki>{{سخ}}</nowiki>
|برای شکستن خط و ایجاد خط جدید به کار می‌رود.
|-
|<img/>
|برای قرار دادن تصویر در صفحه به کار می‌رود.
|-
|<nowiki><hr/></nowiki>
|برای ایجاد یک خط در عرض صفحه به کار می‌رود.
|}

===== تگ‌های بلند =====
{| class="wikitable"
|نام تگ
|کاربرد تگ
|-
|<a>
|ایجاد لینک در صفحه وب
|-
|<nowiki><div></nowiki>
|ایجاد طرح بندی یک قالب
|-
|<image>
|قرار دادن تصویر در صفحه وب
|-
|<nowiki><p></nowiki>
|برای ایجاد پاراگراف در صفحه
|-
|<title>
|ساخت عنوان سایت
|}

===== خصوصیات تگ‌ها =====
===== نحوهٔ تعریف تگ‌ها و ویژگی هر تگ =====
<syntaxhighlight lang="html" line="1">
<a herf=” آدرس مقصد”> </a>
 <div style=”background-color:red;”><\div>
 <p> متن پاراگراف </p>
 <title> عنوان سایت </title>
<image src=”image/img.png”>
</syntaxhighlight>برای تعریف خصوصیات تگ‌ها سه روش وجود دارد که هر تگ به یک روش نوشته می‌شود.

# خصوصیات id
# خصوصیات class
# خصوصیات style
صفات (attribute) در [https://darsman.com/blog/html-tags/ تگ‌های html] به دو دسته تقسیم می‌شود:

# صفات عمومی (برای تمامی تگ‌ها می‌توان از این صفات استفاده کرد)
# صفات خصوصی (برای یک یا چندین تگ خاص می‌توان استفاده کرد)
===== خصوصیات اصلی تگ‌های HTML =====
'''نکته:''' این خاصیت‌ها در تگ‌های base , head , html , meta , param , style , title و script وجود ندارد.
{| class="wikitable"
|نام تگ
|کاربرد تگ
|-
|Class
|مشخص کننده کلاس تگ در کد نویسی برنامه است. این کلاس در کدنویسی CSS و زبان‌های اسکریپتی کاربرد دارد.
|-
|id
|برای تعریفID برای یک یا چندین تگ. مشخص کننده یک شناسه منحصر به فرد برای تگ در درون سند HTML است. توسط id می‌توان به تگ مورد نظر دست یافت.
|-
|style
|برای تعریف استایل به‌صورت درون خطی (Inline) برای یک یا چندین تگ. یک خاصیت چند مقداری است که خصوصیات قالب دهی و اعمال سبک‌ها (CSS) را برای تگ مورد نظر مشخص می‌کند.
|-
|title
|این صفت برای مشخص کردن اطلاعات بیشتر و عنوان برای عناصر استفاده می‌شود.
|}

===== تگ چیست؟ =====
HTML به کمک برچسب‌ها (Tags) عناصر مختلف را کنار هم می‌چیند و هر کاربر با توجه به نیاز خود از آن‌ها استفاده می‌کند. تگ‌ها عناصری هستند که وظایف گوناگونی دارند و با فراخوانی هر کدام کارشان شروع شده و با بستن تگ کارشان تمام می‌شود.

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

===== متا تگ در HTML =====
تگ متا یکی از تگ‌های کاربردی HTML است که در تگ Head قرار می‌گیرد. شما به کمک این تگ که از کلمه metadata می‌آید می‌توانید یکسری اطلاعات را در قالب برخی attributeهای خاص به موتورهای جستجو نمایش دهید. اطلاعاتی که برای سئو و بهینه‌سازی یک صفحه بسیار مهم هستند.

'''عنصر اچ‌تی‌ام‌ال''' یک جزء مستقل از یک پروندهٔ [[اچ‌تی‌ام‌ال]] است. پرونده‌های اچ‌تی‌ام‌ال شامل ساختاری درختی از عناصر اچ‌تی‌ام‌ال و دیگر محتویات، مانند متن هستند. هر عنصر می‌تواند صفات تعیین‌شده‌ای داشته باشد. همچنین می‌تواند شامل محتواهای دیگر مثل متن یا عناصر دیگر باشد. این عناصر نشانه‌هایی هستند که معنای خاصی دارند و به منظور مشخصی به کار می‌روند؛ مثلا عنصر <code><title>عنوان صفحه</title></code> برای نمایش عنوان صفحه استفاده می‌شود.

== واژه‌نامه ==
{{یادداشت‌ها}}

== منابع ==
{{پانویس}}
* {{یادکرد-ویکی
|پیوند = http://en.wikipedia.org/wiki/HTML_element
|عنوان = HTML element
|زبان = انگلیسی
|بازیابی =
}}

[[رده:عنصر اچ‌تی‌ام‌ال| ]]
[[رده:اچ‌تی‌ام‌ال]]