مقدمه
در HTML میتوانید عناصر را داخل یکدیگر قرار دهید. به این کار تو در تو کردن (Nesting) عناصر گفته میشود.
Nested کردن عناصر به شما این امکان را میدهد که چندین تگ HTML را بهطور همزمان روی یک بخش از محتوا اعمال کنید. برای مثال، میتوانید متنی را هم پررنگ (Bold) و هم مورب (Italic) نمایش دهید.
تو در تو کردن عناصر HTML
برای نمونه، کد زیر را در فایل index.html خود قرار دهید:
<strong>متن پررنگ من و <em>متن پررنگ و مورب من</em></strong>فایل را ذخیره کرده و در مرورگر اجرا کنید.
خروجی به صورت زیر خواهد بود:
متن پررنگ من و متن پررنگ و مورب من
در این مثال:
- تگ
<strong>کل متن را پررنگ میکند. - تگ
<em>که داخل<strong>قرار گرفته، بخشی از متن را علاوه بر پررنگ بودن، مورب نیز نمایش میدهد.
بهترین روش برای تو در تو کردن تگها
هنگام استفاده از عناصر تو در تو، بهتر است تگها را برعکس ترتیبی که باز کردهاید، ببندید.
به عبارت دیگر:
- آخرین تگی که باز میشود، باید اولین تگی باشد که بسته میشود.
نمونه صحیح:
<p>
این جمله شامل تگهایی است که به صورت
<strong><em>صحیح تو در تو شدهاند</em></strong>.
</p>در این مثال:
- ابتدا
<strong>باز شده است. - سپس
<em>باز شده است. - ابتدا
</em>بسته میشود. - در پایان
</strong>بسته میشود.
نمونه نادرست
کد زیر از نظر ساختار توصیهشده صحیح نیست:
<p>
این جمله شامل تگهایی است که
<strong><em>به شکل نادرست تو در تو شدهاند</strong></em>.
</p>در این مثال:
- تگ
<strong>قبل از بسته شدن<em>بسته شده است که ترتیب صحیح Nesting را رعایت نمیکند.
چرا رعایت ترتیب بسته شدن تگها مهم است؟
اگرچه بسیاری از مرورگرها همچنان این نوع کدها را نمایش میدهند، اما رعایت ترتیب صحیح مزایای زیادی دارد:
- خوانایی بهتر کد
- نگهداری آسانتر پروژه
- کاهش احتمال بروز خطا
- همکاری راحتتر با سایر برنامهنویسان
- رعایت استانداردهای HTML
جمعبندی
در این آموزش یاد گرفتید:
- مفهوم Nested Elements یا عناصر تو در تو چیست.
- چگونه چندین تگ HTML را روی یک متن اعمال کنید.
- ترتیب صحیح باز و بسته کردن تگهای تو در تو را رعایت کنید.
- چرا رعایت اصول Nesting باعث خوانایی و کیفیت بهتر کد میشود.
از همراهی شما با پارمین کلود سپاسگزاریم.
نظرات کاربران