ساختار سلسله مراتبی

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

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

تودرتویی یا Nesting

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


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

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

حضرت علی (ع) در نهج البلاغه می فرمایند هرگاه او را بخوانی ، ندایت را میشنود ، و چون با او راز دل گویی ، راز تو را میداند.

در این مثال:

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

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

همچنین در این مثال:

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

ترتیب یا Order

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


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


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

عمق یا Depth

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

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


<article>
  <h1>Famous football quotes</h1>
  <p>
    Sir <strong>Alex Ferguson</strong> once said about Filipo Inzaghi:<q>"That lad must have been born offside"</q>.
  </p>
  <p>
    When criticized by John Carew, <strong>Zlatan Ibrahimovic</strong> replied: <q>"What Carew does with a football, I can do with an orange"</q>.
  </p>
  <p>
    <strong>George Best</strong> said <q>"I spent a lot of money on booze, birds and fast cars. The rest I just squandered."</q> when asked about his lifestyle.
  </p>
</article>

در این مثال:

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

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

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

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

درون یک عنصر بلاک می توان از هر دو نوع عناصر بلاک و خطی قرار داد.

اما درون عناصر خطی فقط می توان عنصر خطی قرار داد.

عنصر <a> یا همان لینک یک استثنا محسوب می شود و می توان درون آن عناصر بلاک نیز قرار داد.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *