عناصر در زبان HTML – برنامه نویسی HTML بخش هفتم
عناصر HTML اصلی ترین اجزای سازنده صفحات وب هستند و اغلب اوقات دارای یک تگ باز، محتوای مرتبط و در نهایت یک تگ بسته هستند.
یک عنصر HTML چیست؟
یک عنصر HTML (HTML Element) یک بخش پایه ای از یک پرونده HTML است که می تواند داده های مختلف را در خود جای دهد، برخی از این داده ها مانند تصاویر، نوشته ها، لینک ها و برخی دیگر از آن ها در صفحات وب نمایش داده می شوند، در حالی که برخی دیگر ممکن است تنها در پس زمینه باشند و به مدیریت صفحه و اطلاعات موجود در آن اختصاص داده شده باشند. یک عنصر HTML شامل یک تگ باز (Opening tag)، یک بخش محتوایی (Content) و یک تگ بسته (Closing Tag) است. در برخی از موارد یک تگ می تواند شامل ویژگی ها یا Attributes نیز باشد که مدیریت بهتر و بیشتری را بر روی تگ ها ایجاد می کند.
یک عنصر HTML بر اساس آنچه که گفته شد شامل موارد زیر است:
- تگ باز (Opening Tag): یک تگ باز در ابتدای یک عنصر قرار می گیرد و می تواند شامل برخی از ویژگی ها (attributes) نیز باشد.
- محتوا (Content): محتوا نیز شامل اطلاعاتی هستند که در طی فرایند یک صفحه نمایش داده می شود.
- تگ بسته (Closing Tag): یک تگ بسته در انتهای یک عنصر می آید و نشان دهنده خاتمه یک عنصر است (در برخی از عناصر وجود تگ بسته نیاز نیست و در برخی دیگر نیز این یک اقدام اختیاری است).
یک پرونده HTML شامل یک درخت (Tree) از عناصر HTML است و آن ها می توانند محتوا و طرح بندی یک صفحه وب را تعریف کنند، آن ها مشخص می کنند که یک عنصر در صفحه وب چطور و در چه زمانی در بخش های مختلف یک صفحه وب نمایش داده شود.
نمونه ای از عناصر HTML
در نمونه کدهای زیر ما می توانیم برخی از عناصر موجود در یک صفحه HTML را مشاهده کنیم:
<p>This is paragraph content.</p>
<h1>This is heading content.</h1>
<div>This is division content.</div>
در جدول زیر می توانید بخش های مختلف را مشاهده کنید (که شامل تگ باز، محتوا و تگ بسته) از یک عنصر HTML است.
| تگ بسته | محتوا | تگ باز |
| <p/> | This is paragraph content | <p> |
| <h1/> | This is heading content | <h1> |
| <div/> | This is division content | <div> |
به همین خاطر در اینجا <p>…</p> یک عنصر HTML است و <h>…</h1> نیز عنصر HTML دیگر است.
ساختار عنصر HTML
تصویر زیر نشان دهنده ساختار یک عنصر HTML است که در آن می توانید تگ های باز و بسته و محتوا را مشاهده کنید.
تفاوت تگ های HTML در برابر عناصر HTML
عناصر در زبان HTML با استفاده از تگ ها ساخته می شود. یک عنصر HTML به وسیله یک جفت از تگ های باز و بسته و مقداری محتوای مرتبط در میانه آن ساخته می شود که معرفی کننده محتوا و ساختار آن عنصر در یک صفحه وب است. در حالی که تگ های HTML شبیه به عبارت های کلیدی (Keywords) هستند و بخشی از عناصر HTML به شمار می روند و در میان براکت های بسته (<>) قرار می گیرند.
عناصر تو در تو در HTML
زبان HTML این اجازه را به ما می دهد که بتوانیم از عناصر آن به صورت تو در تو استفاده کنیم. این عناصر تو در تو می توانند در درون همدیگر قرار گیرند و ساختار های پیچیده تری را در یک صفحه HTML ایجاد کنند. این در حالی است که یک عنصر می تواند به عنوان عنصر والد (Parent Element) باشد و در خود چند عنصر فرزند (Child Elements) را جا داده باشد. عناصر فرزند هر کدام می توانند دارای عناصر فرزند دیگری باشند. شما می توانید در اینجا چندین لایه عنصر تو در تو داشته باشید، هرچند لازم است که به این موارد نیز دقت کنید:
- هر تگ بازی باید به یک تگ بسته منجر شود و حتماً باید عناصر پیوستگی خودشان را حفظ کنند.
- تگ های بسته والد باید بعد از تگ های بسته فرزندان و زیر مجموعه های آن ها قرار گیرد.
- عناصری که به عنوان عناصر فرزند یا زیر مجموعه آن ها قرار می گیرند باید عناصر 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> ،<head> و <body> به ترتیب در همدیگر قرار گرفته اند و عناصر بعدی به ترتیب در میان آن ها قرار می گیرند.
عناصر خالی (Void) در زبان HTML
عناصر خالی در زبان HTML به عناصری گفته می شوند که نیازمند تگ بسته نیستند. این عناصر هیچ محتوایی را نیز در درون خودشان ندارند و نمی توانند به عنوان والد تگ های دیگر به کار گرفته شوند. عناصر Void گاهی به عنوان عناصر خالی (Empty) یا خود بسته (Self-closing) شناخته می شوند.
برخی از عناصر خالی در اینجا شامل عناصری نظیر <img/> , <hr/> و <br/> می شوند. در جدول زیر ما فهرستی از این عناصر خالی زبان HTML را برای شما ارائه کرده ایم.
| عنصر | تعریف |
| <img/> | این عنصر برای مشخص کردن مکان قرار گیری تصاویر به کار گرفته می شود. |
| <hr/> | این عنصر نشان دهنده یک خط افقی در صفحه HTML است. |
| <br/> | این عنصر برای ایجاد یک شکست در خط نوشتاری معادل زدن دکمه اینتر به کار می رود. |
| <source/> | این تگ برای قرار دادن منبع رسانه هایی مانند ویدئو یا صدا به کار گرفته می شوند. |
مثال
در مثال زیر می توانید به کار گیری عناصر خالی را مشاهده کنید:
<!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>
در زمانی که این قطعه کد را اجرا کنیم، دو پاراگراف ایجاد می شود. که در یکی نوشته ها شکسته شده و در دو خط نوشته شده اند و در دیگری یک خط افقی نمایش داده می شود.
ویژگی ها در عناصر HTML
ویژگی ها (Attributes) همیشه در تگ باز قرار می گیرند و به صورت جفت های نام و مقدار هستند. شما می توانید چندین ویژگی را در یک عنصر HTML به کار بگیرید.
برای مثال در زیر ما از دو ویژگی src و alt در یک عنصر img استفاده کرده ایم:
<img src="logo.jpg" alt="TutorialsPoint Logo" />
<img src="logo.jpg" alt="TutorialsPoint Logo" />
اجبار در بکارگیری تگ های بسته در HTML
برخی از عناصر در زبان HTML دارای تگ های باز و بسته هستند. تنها تگ های خالی مانند<img> ، </hr/> و <br/> دارای چنین ویژگی هایی هستند.
اگر شما از تگ های بسته در عناصر مرتبط به آن ها استفاده نکنید، ممکن است به مشکلاتی برخورد کنید، برای مثال محتوای شما به درستی نمایش داده نمی شود. هرچند، ما به شدت پیشنهاد می کنیم که بستن تگ ها را فراموش نکنید، زیرا در زمان به کارگیری کدها می تواند سبب ایجاد ناهماهنگی های زیادی در صفحه و محتواها شود. به خصوص در زمانی که از زبان های دیگری مانند JavaScript یا CSS برای بهینه تر کردن صفحه خودتان استفاده می کنید.
نمونه:
در مثال زیر ما تگ های بسته برخی از عناصر را حذف کرده ایم، با این حال هنوز محتوا به درستی کار می کند.
!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) و شما می توانید آن ها را هم با حروف بزرگ و هم با حروف کوچک بنویسید. هرچند بنا به پیشنهاد کنسرسیوم جهانی وب (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>