آموزش HTML - عناصر

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

یک عنصر HTML بخش بنیادی از یک سند HTML است که می‌تواند داده‌هایی را برای نمایش در صفحه وب شامل شود؛ مانند متن، تصویر، لینک یا گاهی هیچ‌چیز. یک عنصر HTML شامل یک تگ آغازین، محتوا و یک تگ پایانی است که تگ آغازین می‌تواند شامل ویژگی‌ها (attributes) نیز باشد.

یک عنصر HTML شامل موارد زیر است:

• تگ آغازین (Opening Tag): تگ آغازین شروع عنصر را مشخص می‌کند و می‌تواند شامل چند ویژگی (Attribute) باشد.
• محتوا (Content): بخش محتوا شامل اطلاعاتی است که قرار است درون یک عنصر نمایش داده شود یا پردازش گردد.
• تگ پایانی (Closing Tag): تگ پایانی پایان عنصر را مشخص می‌کند (تگ پایانی ممکن است برای برخی عناصر اختیاری باشد).

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

نمونه‌هایی از عناصر HTML

برخی از نمونه‌های عناصر HTML به شرح زیر است:

<p>This is paragraph content.</p>
<h1>This is heading content.</h1>
<div>This is division content.</div>

جدول زیر بخش‌های مختلف (تگ آغازین، محتوا و تگ پایانی) عناصر HTML استفاده‌شده در مثال بالا را نشان می‌دهد:

بنابراین در اینجا <p>...</p> یک عنصر HTML است و <h1>...</h1> یک عنصر HTML دیگر است.

ساختار عنصر HTML

تصویر زیر ساختار یک عنصر را نشان می‌دهد، یعنی اینکه چگونه یک عنصر HTML با تگ‌های آغازین و پایانی نوشته می‌شود:

تفاوت تگ‌ها و عناصر: تفاوت واقعی در چیست؟

این رایج‌ترین نقطه گیج‌کننده برای افراد مبتدی است. در ادامه یک روش ساده برای درک آن آمده است:

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

درک عناصر تودرتو (Nested Elements)

زبان HTML اجازه تودرتو قرار دادن عناصر را می‌دهد. عناصر تودرتو با قرار دادن یک یا چند عنصر HTML درون یک عنصر HTML دیگر ایجاد می‌شوند. در اینجا عنصری که نقش نگهدارنده را دارد به عنوان عنصر والد (Parent) و سایر عناصر به عنوان عناصر فرزند (Child) در نظر گرفته می‌شوند. عناصر فرزند درون عنصر والد قرار می‌گیرند. ما می‌توانیم چندین سطح تودرتویی داشته باشیم؛ با این حال، رعایت برخی اصول ضروری است −

• هر تگ آغازین باید یک تگ پایانی مربوط به خود داشته باشد.

• تگ پایانی عنصر والد باید بعد از تگ پایانی عنصر فرزند قرار گیرد.

• عناصر تودرتو باید عناصر HTML معتبری باشند.

مثال

در مثال زیر، ما عنصر مورب‌ساز (<i>...</i>) را درون عنصر h1 و عنصر زیرخط‌دار (<u>...</u>) را درون عنصر پاراگراف قرار داده‌ایم.

<!DOCTYPE html>
<html>
<head>
   <title>Nested Elements Example</title>
</head>
<body>
   <h1>This is <i>italic</i> heading</h1>
   <p>This is <u>underlined</u> paragraph</p>
</body>
</html>

با اجرای مثال بالا، می‌توانیم دو جمله را مشاهده کنیم که در آن‌ها یک عنصر HTML را درون عنصر دیگری قرار داده‌ایم.

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

حالت خاص: عناصر خالی (Void)

عناصر خالی (Void Elements) در HTML عناصری هستند که به تگ پایانی نیاز ندارند. این تگ‌ها هیچ مدلی از محتوا ندارند و حتی اجازه تودرتو قرار گرفتن عناصر دیگر را در خود نمی‌دهند. عناصر خالی با نام عناصر Self-Closing یا Empty نیز شناخته می‌شوند.

برخی از عناصر خالی عبارت‌اند از عناصر <img />، <hr /> و <br />. جدول زیر لیستی از عناصر خالی را نشان می‌دهد −

نکته: ممکن است این تگ‌ها را به همراه یک اسلش در انتها مشاهده کنید، مانند <br />. این یک ساختار قدیمی‌تر است و در HTML5 مدرن نیازی به آن نیست.

مثال

مثال زیر نمونه‌ای از عناصر خالی HTML را نشان می‌دهد −

<!DOCTYPE html>
<html>
<body>
   <p>This line contains a line break tag, <br> hence content is visible in two separate lines.</p>
   <p>This line is <hr>separated by a horizontal rule.</p>
</body>
</html>

کد بالا هنگام اجرا، دو پاراگراف تولید می‌کند؛ یکی همراه با شکست خط و دیگری با یک خط افقی جداکننده.

ویژگی‌ها (Attributes) همراه با عناصر HTML

ویژگی‌ها می‌توانند با استفاده از جفت‌های نام و مقدار ویژگی درون تگ آغازین قرار گیرند. ویژگی‌های متعدد را می‌توان با یک فاصله (Space) از هم جدا کرد.

عبارت زیر استفاده از دو ویژگی src و alt را همراه با عنصر HTML از نوع img نشان می‌دهد:

<img src="logo.jpg" alt="TutorialsPoint Logo" />

بستن اجباری عناصر HTML

عناصر HTML که باز می‌شوند باید بسته شوند. تنها عناصر خالی مانند <img />، <hr />، <br /> و غیره به تگ پایانی نیاز ندارند؛ سایر عناصر مانند <p> و <h1> پس از بخش محتوا به تگ پایانی نیاز دارند.

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

مثال

در این مثال، تگ‌های پایانی را از تگ پاراگراف حذف می‌کنیم. با این حال، همچنان نتیجه درست را نشان خواهد داد.

<!DOCTYPE html>
<html>
<body>
   <p>This line contains a line break tag, <br /> hence content is visible in two separate lines.
   <p>This line is <hr /> separated by a horizontal rule.
</body>
</html>

کد HTML بالا دو پاراگراف تولید می‌کند، یکی با شکست خط و دیگری با یک خط افقی جداکننده.

آیا عناصر HTML به حروف کوچک و بزرگ حساس هستند؟

خیر، عناصر HTML به حروف کوچک و بزرگ حساس نیستند (Case-sensitive نیستند)، به این معنی که می‌توانیم عناصر HTML را با حروف بزرگ یا کوچک بنویسیم. با این حال، این کار روش مناسبی نیست، زیرا سازمان W3C استفاده از حروف کوچک را توصیه و درخواست می‌کند. بنابراین، همیشه تلاش کنید از حروف کوچک برای نام تگ‌ها استفاده کنید.

مثال

در مثال زیر، ما عناصر HTML (نام تگ‌ها) را با حروف بزرگ و ترکیبی (بزرگ و کوچک) می‌نویسیم؛ خروجی را ببینید، هیچ خطایی وجود ندارد و کد HTML به درستی اجرا می‌شود −

<!DOCTYPE html>
<HTml>
<BODY>
   <P>HTML is not case sensitive i.e we can use both upper or, lower case letters in the tags.</p>
</BOdy>
</html>