در این قسمت از مجموعه آموزشی HTML با مفهوم المان های تو در تو در اچتیامال آشنا میشوید.
منظور از المان های تو در تو در HTML چیست؟
همانطور که در قسمتهای گذشته گفته شد المانهای HTML میتوانند داخل یکدیگر نیز قرار بگیرند. در واقع یک المان میتواند المانهای دیگر را شامل شود یا خود داخل یک المان دیگر قرار بگیرد. به این المانها، المانهای تو در تو (یا Nested elements) گفته میشود.
به عنوان یک مثال المان زیر را در نظر بگیرید. این المان یک پاراگراف حاوی جمله “My boy is really smart.” تعریف میکند.
<p>My boy is really smart.</p>فرض کنید میخواهیم کلمه smart در این پاراگراف به شکل پررنگ (یا Bold) نمایش داده شود. برای این منظور کافیست این کلمه را مشابه با نمونه زیر در یک المان <b> قرار دهید. به این ترتیب المان <b> به طور کامل داخل المان <p> قرار میگیرد.
در این حالت المان <p> یک المان والد برای المان <b> محسوب میشود. برعکس المان <b> نیز یک المان فرزند برای المان <p> به شمار میرود.
چند نکته در مورد المان های تو در تو در اچتیامال
برای قرار دادن یک المان داخل المان دیگر میبایست به ترتیبِ تگ های شروع و پایان المانها توجه کنید. فراموش نکنید المان داخلی میبایست به طور کامل داخل المان والد خود قرار گیرد.
در مثال بالا ابتدا تگ شروع <p> برای المان پاراگراف و پس از آن تگ شروع <b> برای المان داخلی ظاهر شده است. در ادامه برای تودرتوسازی صحیح ابتدا المان داخلی با تگ </b> بسته میشود و پس از آن المان والد با کمک تگ </p> بسته میشود. در واقع المان داخلی باید پیش از المان والد خود بسته شود.
با توجه به این موضوع، قطعه کد زیر صحیح نخواهد بود. چرا که در این مثال تگ پایان المان داخلی بعد از بسته شدن المان والد ظاهر شده است.
فراموش نکنید تمام سندهای HTML دارای المان های تو در تو هستند. به عنوان مثال قطعه کد زیر را در نظر بگیرید:
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML Page</title>
<meta charset="utf-8">
</head>
<body>
<p>My boy is really <b>smart</b>.</p>
</body>
</html>در این مثال المان های <head> و <body> داخل المان ریشهای <html> قرار دارند. المان <head> نیز دو المان <title> و <meta charset=”utf-8″> را دربرگرفته است. در المان <body> نیز یک المان <p> قرار گرفته و داخل المان <p> هم یک المان <b> وجود دارد.
