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

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

مفاهیم

عناصر و تگ‌ها

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

عناصر، تگ نیستند. برخی افراد هستند که عناصر را به نام تگ می‌شناسند و از آنها با نام تگ یاد می‌کنند (به عنوان مثال، «تگ 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<br>42 Wallaby Way<br>Sydney</p>

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

<p>P. Sherman<br />42 Wallaby Way<br />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" />

انواع تگها

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

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

1- تگهای کوتاه که شروع و پایان ندارد.

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

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

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

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

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

تگ های کوتاه:

نام تگ	کاربرد تگ
<br/>	برای شکستن خط و ایجاد خط جدید به کار می رود.
<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”>

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

1- خصوصیات id

2- خصوصصیات class

3- خصوصیات style

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

1- صفات عمومی ( برای تمامی تگ ها میتوان از این صفات استفاده کرد)

2- صفات خصوصی ( برای یک و یا چندین تگ خاص میتوان استفاده کرد)

خصوصيات اصلی تگ های 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

منابع

↑ "§3 On SGML and HTML". HTML 4.01 Specification. W3C. 24 December 1999. §3.2.1 Elements.
↑
↑ 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] ↑

[XHTML10-42-5] XHTML 1.0 §4.2