ساختار سلسله مراتب در HTML
ساختار سلسله مراتب در HTML
یک سند وب شبیه به یک 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 به هر میزان که نیاز باشد می توان عناصر را داخل هم نوشت و محدودیتی وجود ندارد.
ترتیب - 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 یکی باشد.
تودرتوی عناصر خطی و بلاک
درون یک عنصر بلاک می توان از هر دو نوع عناصر بلاک و خطی قرار داد.
اما درون عناصر خطی فقط می توان عنصر خطی قرار داد.
دیدگاهتان را بنویسید