ساختار سلسله مراتب در HTML

تعداد بازدیدها: 3,574

آنچه در این مقاله می‌خوانید نمایش

یک سند وب شبیه به یک Family tree یا همان شجره نامه است که در آن والدین، فرزندان، خواهر و برادر، اجداد و نوادگان وجود دارند.

این موضوع از آنجایی آغاز می‌شود که در HTML می توان عناصر را بصورت تودرتو نوشت.

تو در تو بودن - Nesting

ما یک پاراگراف ساده می‌نویسیم و با اضافه کردن دو عنصر خطی این پاراگراف را بهبود می‌بخشیم.

				
					<p><strong>حضرت علی (ع)</strong> در نهج البلاغه می فرمایند <q>دانا كسى است كه اندازه و قدر خود را بشناسد، و براى نادانى كسى همين بس كه اندازه خود را نداند.</q>.</p>

و در نهایت خروجی آن به این صورت خواهد بود:

See the Pen Untitled by Ali Tasharoei (@Isatis-academy) on CodePen.

در این مثال:

عنصر <strong> به عبارت “حضرت علی (ع)” مفهموم اهمیت را می دهد.
عنصر <q> نمایانگر این است که جمله از مولا علی نقل شده است.

نکته مهم: اینکه محتوای عنصر <strong> بصورت ضخیم تر (Bold) نمایش داده می شود رفتار پیشفرض مرورگر است. ما نباید به دید ظاهری به آن نگاه کنیم. بلکه مفهومی که این عنصر به کلمات می دهد مهم است که در اینجا مفهموم، اهمیت است. پس به خاطر داشته باشیم که نباید عناصر را بر اساس ظاهرشان انتخاب کنیم بلکه باید بر اساس معنا و مفهمومی که دارند از آنها استفاده کنیم.

در ادامه داریم:

<p> پدر عنصرهای <strong> و <q> می باشد.
همچنین <strong> و <q> به عنوان فرزندان <p> شناخته می شوند.
<strong> و <q> همزاد یا همان خواهر-برادر می باشند.

عناصر خطی و بلاک در HTML

یادتان باشد: در HTML به هر میزان که نیاز باشد می توان عناصر را داخل هم نوشت و محدودیتی وجود ندارد.

ترتیب - Order

اگر بخواهیم تا عنصری را به عنوان فرزندی از عنصر دیگر داشته باشیم باید تگ ابتدا و انتها عنصر فرزند را کاملا داخل عنصر پدر قرار دهیم. یعنی تگ پایان عنصر فرزند باید قبل از تگ پایان عنصر پدر بیاید :

				
					
<!-- نامعتبر :( -->
<p> this is a <strong>test</strong></p>


<!-- معتبر :) -->
<p> this is a <strong>test</strong></p>

عمق - Depth

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

به عنوان مثال در زیر قسمتی از یک مقاله که در یک سند وب قرار گرفته آورده شده است:

See the Pen Untitled by Ali Tasharoei (@Isatis-academy) on CodePen.

در این مثال:

<article> جد تمام عناصر است.
<article> پدر عنصر <h1> و سه تا پاراگراف <p> می باشد.
<h1> و این سه <p> خواهر-برادر محسوب می شوند.
هر <p> پدر عناصر <strong> و <q> که دارند می باشند.
همه عناصر <strong>، <q>، <p> و <h1> نوادگان <article> هستند.

زمانی که در یک سند HTML بین عناصر حرکت می کنیم این روابط را همیشه مشاهده می کنیم:

نوادگان عنصر X تمام عناصری هستند که عنصر X آنها را در بر دارد.
فرزند در سلسله مراتب نوادگان اولین محسبوب می شود. فرزند مستقیم عنصر که بدون واسطه با عنصر پدرش هست.
جد یک عنصر، عنصری از پدران آن عنصر می باشد.
پدر اولین عنصر از اجداد می باشد.
همزاد یا همان خواهر-برادر عنصر X، عنصری است که پدرش با عنصر X یکی باشد.

آموزش سینتکس HTML