عنصر اچ‌تی‌ام‌ال

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

مفاهیم

عناصر و تگ‌ها

موقعیت یک عنصر از یک تگ شروع آغاز می‌شود و با یک تگ پایان، خاتمه می‌یابد.^[۱] بسیاری از عناصر در یک سند اچ‌تی‌ام‌ال، اما نه همه آنها، از این قاعده پیروی می‌کنند که به صراحت در مشخصات اچ‌تی‌ام‌ال ۴٫۰۱ آمده‌است:

عناصر، تگ نیستند. برخی افراد هستند که عناصر را به نام تگ می‌شناسند و از آنها با نام تگ یاد می‌کنند (به عنوان مثال، «تگ P»). به یاد داشته باشید که عنصر یک چیز است و تگ (چه تگ شروع، چه تگ پایان) چیز دیگری است. برای مثال، عنصر HEAD همیشه وجود دارد، حتی اگر هر دو تگ شروع <head> و تگ پایان </head>، در نشانه‌گذاری وجود نداشته باشند.^[۱]

همچنین، توصیه‌نامه کنسرسیوم وب جهان‌گستر در نسخه دوم اچ‌تی‌ام‌ال ۵٫۱، به صراحت می‌گوید:

از تگ‌ها، برای تعیین حد شروع و پایان عناصر در نشانه‌گذاری استفاده می‌شود. (...) تگ‌های شروع و پایان برخی از عناصر عادی را می‌شود حذف کرد، (...)
محتویات عنصر باید دقیقاً بعد از تگ شروع (که ممکن است در موارد خاص به‌طور ضمنی اشاره شود) و درست قبل از تگ پایان (که در موارد خاص ممکن است مجدداً به‌طور ضمنی اشاره شود) قرار گیرد.
— نسخه دوم اچ‌تی‌ام‌ال ۵٫۱ § ۸٫۱٫۲. عناصر § تگ‌ها

و:

برخی از تگ‌ها را می‌توان حذف کرد.
نکته:

حذف تگ شروع یک عنصر (...) به معنای عدم وجود آن عنصر نیست. ضمنی است، اما هنوز وجود دارد. به عنوان مثال، یک سند HTML همیشه دارای یک عنصر ریشه <html> است، حتی اگر رشته <html> در هیچ جایی از نشانه‌گذاری ظاهر نشود.
— نسخه دوم اچ‌تی‌ام‌ال ۵٫۱، § ۸٫۱٫۲٫۴. تگ‌های اختیاری

نگاه کلی

سینتکس

\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}}

بخش‌هایی از یک عنصر اچ‌تی‌ام‌ال

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

<تگ> ... محتوا ... <تگ/>

یک تگ اچ‌تی‌ام‌ال از یک نام عنصر که توسط پرانتز شکسته <> احاطه شده‌است، تشکیل می‌شود. یک تگ پایانی همچنین دارای یک اسلش، بعد از باز کردن براکت اول است تا آن را از تگِ شروع متمایز کند. به عنوان مثال، یک پاراگراف که با عنصر  نشان داده می‌شود، به صورت زیر نوشته می‌شود:

<p>...محتوای پاراگراف...</p>

اگرچه، همه عناصر در اچ‌تی‌ام‌ال، نیازی به تگ پایانی یا حتی تگ شروع ندارند.^[۲] برخی از عناصر که اصطلاحاً عناصر تهی یا خالی یا حتی تگ غیرجفت^[الف] نامیده می‌شوند، برچسب پایانی ندارند. یک مثال معمولی از این نوع عناصر، عنصر  ^[ب] است. رفتار یک عنصر خالی از پیش تعریف شده‌است و نمی‌تواند حاوی هیچ محتوا یا عناصر دیگری باشد. به عنوان مثال، این یک آدرس است که با تگ   نوشته شده:

<p>P. Sherman{{سخ}}42 Wallaby Way{{سخ}}Sydney</p>

هنگام استفاده از اکس‌اچ‌تی‌ام‌ال، لازم است همه عناصر، از جمله عناصر خالی، باز و سپس بسته شوند. این کار را می‌توان با قرار دادن یک تگ پایان بلافاصله بعد از تگ شروع انجام داد، اما در اچ‌تی‌ام‌ال ۵ چنین کاری مجاز نیست و منجر به ایجاد دو عنصر می‌شود. یک راه جایگزین برای آنکه تعیین کنیم در حال تعریف یک عنصر خالی هستیم و با هر دو زبان اکس‌اچ‌تی‌ام‌ال و اچ‌تی‌ام‌ال ۵ سازگار است، قرار دادن / در انتهای تگ است (با علامت / در ابتدای بستن تگ یک عنصر اشتباه نشود).

<p>P. Sherman{{سخ}}42 Wallaby Way{{سخ}}Sydney</p>

خصلت‌ها یا صفت‌های اچ‌تی‌ام‌ال کلماتی هستند که رفتار و وضعیت عناصر را کنترل می‌کنند و در داخل تگ ابتدایی یا همان تگ شروع مشخص و تعریف می‌شوند. در مثال زیر، عنصر <abbr> برای کوتاه‌نویسی یک عبارت به کار برده شده و در تگ آغازین آن، با کمک صفت title شکل کامل عبارت تعریف شده‌است.

<abbr title="HyperText Markup Language">HTML</abbr>

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

نام عناصر (و صفت‌ها) ممکن است با ترکیبی از حروف بزرگ یا کوچک در اچ‌تی‌ام‌ال نوشته شود و به بزرگی و کوچکی حروف حساس نیستند، بنابراین  با  تفاوتی ندارد، اما در اکس‌اچ‌تی‌ام‌ال، حروف باید کوچک باشد.^[۳] تا اچ‌تی‌ام‌ال ۴، حروف بزرگ متعارف بود و در مشخصات اچ‌تی‌ام‌ال استفاده می‌شد، اما در سال‌های اخیر، حروف کوچک رایج‌تر و توصیه شده‌است.

انواع عناصر

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

عناصر معمولی معمولاً هر دو تگ شروع و پایان را دارند، اگرچه برای برخی از عناصر تگ پایان یا هر دو تگ را می‌شود حذف کرد و به روشی مشابه ساخته می‌شوند:

یک تگ شروع (<tag>) که شروع یک عنصر را مشخص می‌کند، و ممکن است تعدادی از صفت‌های اچ‌تی‌ام‌ال را در خود جای دهد.
محتوا، از جمله متن و عناصر دیگر.
و تگ پایانی که در آن، نام عنصر با یک اسلش پیشوند شده‌است: </tag>.

عناصر متن خام^[پ] (همچنین به عنوان عناصر صرف متنی^[ت] یا متن^[ث] شناخته می‌شوند) اینگونه ساخته می‌شوند:

یک تگ شروع (به شکل <tag>) که شروع یک عنصر را مشخص می‌کند و ممکن است تعدادی از صفت‌های اچ‌تی‌ام‌ال را در خود جای دهد.
محتوای متنی، بدون هیچ عنصری (همه تگ‌ها، به غیر از تگ پایانی که قابل اجرا است، به عنوان محتوا تفسیر خواهند شد).
یک تگ پایانی که در آن نام عنصر با یک اسلش پیشوند شده‌است: </tag>. در برخی از نسخه‌های اچ‌تی‌ام‌ال، تگ پایان برای برخی از عناصر اختیاری است. تگ پایان در اکس‌اچ‌تی‌ام‌ال الزامی است.

یک مثال از عناصر متنی، <title> است که نباید حاوی عناصر دیگر (از جمله نشانه‌گذاری متن) باشد، بلکه فقط متن است.

عناصر خالی (که گاهی اوقات، عناصر منفرد^[ج] یا عناصر مستقل^[چ] یا عناصر غیرجفت نیز نامیده می‌شوند) فقط یک تگ شروع دارند (به شکل <tag>)، که می‌تواند هر کدام از صفت‌های اچ‌تی‌ام‌ال را داشته باشد. این عناصر ممکن است حاوی هیچگونه متن یا عناصر دیگری نباشند. برای سازگاری با اکس‌اچ‌تی‌ام‌ال، مشخصات اچ‌تی‌ام‌ال اجازه استفاده از فاصله اختیاری و اسلش را می‌دهد (<tag /> مجاز است). فاصله و اسلش در اکس‌اچ‌تی‌ام‌ال و سایر برنامه‌های اکس‌ام‌ال لازم است. دو عنصر خالی رایج، عبارتند از   (برای شکستن خط، مانند یک شعر یا یک آدرس) و <hr /> (برای ایجاد خط افقی). سایر عناصر این چنینی، اغلب به فایل‌های خارجی ارجاع می‌دهند، مانند عنصر تصویر (<img />) و صفت‌های موجود در این عناصر بر روی فایل خارجی مورد نظر اعمال می‌شوند. مثال دیگری از عنصر خالی <link /> است که سینتکس آن به صورت زیر است:

<link rel="stylesheet" href="fancy.css" type="text/css">

در این مثال، عنصر <link />، مرورگر را به یک style sheet هدایت می‌کند تا هنگام ارائه سند اچ‌تی‌ام‌ال به کاربر، از آن استفاده کند. در دستور زبان اچ‌تی‌ام‌ال، صفت‌ها در میان دو علامت "..." (نقل قول) نوشته می‌شوند، اما اگر از کاراکترهای حروف، اعداد، خط فاصله و نقطه باشند، نیازی به استفاده از این علامت نیست: از طرف دیگر، هنگام استفاده از سینتکس اکس‌ام‌ال (اکس‌اچ‌تی‌ام‌ال)، همه صفت‌ها باید نقل قول شوند و قبل از براکت آخر تگ، استفاده از یک اسلش انتهایی با یک فاصله الزامی است:

<link rel="stylesheet" href="fancy.css" type="text/css" />

انواع تگها

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

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

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

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

نحوه نوشتن یک عنصر در HTML

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

البته بعضی از تگ‌ها در html5 منسوخ شدن و دیگه اعتبار ندارند و مرورگرها تگهای منسوخ شده را پشتیبانی نمی‌کند.

تگ‌های کوتاه

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

تگ‌های بلند

نام تگ	کاربرد تگ
<a>	ایجاد لینک در صفحه وب
<div>	ایجاد طرح بندی یک قالب
<image>	قرار دادن تصویر در صفحه وب
<p>	برای ایجاد پاراگراف در صفحه
<title>	ساخت عنوان سایت

خصوصیات تگ‌ها

نحوهٔ تعریف تگ‌ها و ویژگی هر تگ

<a herf=” آدرس مقصد”> </a>
 <div style=”background-color:red;”><\div>
 <p> متن پاراگراف </p>
 <title> عنوان سایت </title>
<image src=”image/img.png”>

برای تعریف خصوصیات تگ‌ها سه روش وجود دارد که هر تگ به یک روش نوشته می‌شود.

خصوصیات id
خصوصیات class
خصوصیات style

صفات (attribute) در تگ‌های html به دو دسته تقسیم می‌شود:

صفات عمومی (برای تمامی تگ‌ها می‌توان از این صفات استفاده کرد)
صفات خصوصی (برای یک یا چندین تگ خاص می‌توان استفاده کرد)

خصوصیات اصلی تگ‌های HTML

نکته: این خاصیت‌ها در تگ‌های base , head , html , meta , param , style , title و script وجود ندارد.

نام تگ	کاربرد تگ
Class	مشخص کننده کلاس تگ در کد نویسی برنامه است. این کلاس در کدنویسی CSS و زبان‌های اسکریپتی کاربرد دارد.
id	برای تعریفID برای یک یا چندین تگ. مشخص کننده یک شناسه منحصر به فرد برای تگ در درون سند HTML است. توسط id می‌توان به تگ مورد نظر دست یافت.
style	برای تعریف استایل به‌صورت درون خطی (Inline) برای یک یا چندین تگ. یک خاصیت چند مقداری است که خصوصیات قالب دهی و اعمال سبک‌ها (CSS) را برای تگ مورد نظر مشخص می‌کند.
title	این صفت برای مشخص کردن اطلاعات بیشتر و عنوان برای عناصر استفاده می‌شود.

تگ چیست؟

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

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

متا تگ در HTML

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

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

واژه‌نامه

↑ unpaired tag
↑ hard line-break (شکستن خط)
↑ Raw text elements
↑ text-only elements
↑ text
↑ single elements
↑ stand-alone elements

منابع

مشارکت‌کنندگان ویکی‌پدیا. «HTML element». در دانشنامهٔ ویکی‌پدیای انگلیسی.

↑ ^۱٫۰ ^۱٫۱ "§3 On SGML and HTML". HTML 4.01 Specification. W3C. 24 December 1999. §3.2.1 Elements.
↑ خطای یادکرد: خطای یادکرد:برچسب <ref>‎ غیرمجاز؛ متنی برای یادکردهای با نام whatwg-syntax-tag-omission وارد نشده است. (صفحهٔ راهنما را مطالعه کنید.).
↑ XHTML 1.0 §4.2

[3] unpaired tag

[4] rd line-break (شکستن خط)

[6] Raw text elements

[7] text-only elements

[8] text

[9] single elements

[10] stand-alone elements

[HTML401_Elements-1] ۱٫۰ ^۱٫۱ "§3 On SGML and HTML". HTML 4.01 Specification. W3C. 24 December 1999. §3.2.1 Elements.

[whatwg-syntax-tag-omission-2] خطای یادکرد: خطای یادکرد:برچسب <ref>‎ غیرمجاز؛ متنی برای یادکردهای با نام whatwg-syntax-tag-omission وارد نشده است. (صفحهٔ راهنما را مطالعه کنید.).

[XHTML10-42-5] XHTML 1.0 §4.2

[۱]

[۲]

[الف]

[ب]

[۳]

[پ]

[ت]

[ث]

[ج]

[چ]