یک سند وب شبیه به یک Family tree یا همان تبارنامه یا شجره نامه است که در آن والدین، فرزندان، خواهر و برادر، اجداد و نوادگان وجود دارند.
این موضوع از آنجایی سرچشمه می گیرد که در HTML می توان عناصر را بصورت تودرتو نوشت.
تودرتویی یا Nesting
بیایید تا یک پاراگراف ساده بنویسیم و با اضافه کردن دو عنصر خطی این پاراگراف را بهبود ببخشیم.
<p><strong>حضرت علی (ع)</strong> در نهج البلاغه می فرمایند <q>هرگاه او را بخوانی ، ندایت را میشنود ، و چون با او راز دل گویی ، راز تو را میداند</q>.</p>
خروجی به صورت زیر خواهد بود:
حضرت علی (ع) در نهج البلاغه می فرمایند هرگاه او را بخوانی ، ندایت را میشنود ، و چون با او راز دل گویی ، راز تو را میداند
.
در این مثال:
- عنصر
<strong>به عبارت “حضرت علی (ع)” مفهموم اهمیت را می دهد. - عنصر
<q>نمایانگر این است که جمله از مولا علی نقل شده است.
اینکه محتوای عنصر <strong> بصورت ضخیم تر (Bold) نمایش داده می شود رفتار پیشفرض مرورگر است. ما نباید به دید ظاهری به آن نگاه کنیم. بلکه مفهومی که این عنصر به کلمات می دهد مهم است که در اینجا مفهموم، اهمیت است. پس به خاطر داشته باشیم که نباید عناصر را بر اساس ظاهرشان انتخاب کنیم بلکه باید بر اساس معنا و مفهمومی که دارند از آنها استفاده کنیم.
همچنین در این مثال:
<p>پدر عنصرهای<strong>و<q>می باشد.- همچنین
<strong>و<q>به عنوان فرزندان<p>شناخته می شوند. <strong>و<q>همزاد یا همان خواهر-برادر می باشند.
در HTML به هر میزان که نیاز باشد می توان عناصر را داخل هم نوشت و محدودیتی وجود ندارد.
ترتیب یا 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> یا همان لینک یک استثنا محسوب می شود و می توان درون آن عناصر بلاک نیز قرار داد.
با سلام این مورد رو لطفا شرح می دهید؟ با تشکر
همه عناصر <strong>، <q>، و نوادگان هستند.
آیا به صورت زیر خوانده می شود؟
همه ی عناصر P یعنی Q, Strong نوادگان Article هستند؟
سلام. اینطوری خونده میشه:
هررررچی عنصر p و هرچی عنصر strong و q هست از نوادگان article هستند.
سلام با تشکر از مطالبتون. که همیشه عالی و جدید با توضیحات روان است. ان شالله همیشه بدرخشید.
من خیلی دنبال ساختار سلسله مراتبی html گشتم ولی متاسفانه چیزی پیدا نکردم. تا به مطلب شما رسیدم. البته از نامگذاری BEM که قرار دادید بسیار متشکرم خیلی کمکم کرد.
من میخواستم بدونم سایت https://validator.w3.org/ از چه ساختار سلسله مراتبی برای تشخیص درست سلسه مراتب html استفاده می کند که می تواند سایت را چک کند و ایرادات ان را در بیاورد. من دنبال مطلب کاملی از قواعد تو در تو قرار گرفتن عناصر بلاک و خطی و attribute ها و… هستم. اگر ممکن است شما مطلبی میشناسید راهنمایی ام کنید تا از یه ساختار تمیز و استاندارد بتونم برای UI استفاده کنم؟
سلام، ممنونم
مطمئن نیستم متوجه شدم دقیقا چی میخواین. این مطلبی که دنبالش هستید یک مطلب نیست و یکجا هم پیدا نمیشه، مفاهیم متفاوتی رو باید بخونید تا به این ساختاری که میخواید برسید.
اگر دنبال این هستید که مثلا وقتی یک صفحه مقاله رو میخواین تگ بزنید از چه تگ های مثلا h1 , h2 , … و یا کجا از article و section استفاده کنید، این مطلب مربوط به مفهموی هستش به اسم document outline که میتونید توی اینترنت در موردش پیدا کنید.
اینجا متونید در موردش بخونید:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines
http://html5doctor.com/outlines
در کل سایت html5doctor.com در این رابطه ها مقاله زیاد داره.
یه ابزاری هم گوگل داره که چک میکنه که اشتباه نکنم اینه آدرسش:
search.google.com/structured-data/testing-tool
چون اسم attribute ها رو اوردید میگم و الا من نمیدونم کدوم خانواده از attribute ها منظورتون هستش، در کل سایت schema.org رو هم چک کنید حتما.
با توجه به توضیحات :
پدر عنصر و سه تا پاراگراف می باشد.
و این سه خواهر-برادر محسوب می شوند.
هر پدر عناصر و
در نهج البلاغه می فرمایند
چرا تو تگ q نیست؟؟؟
و چون حالا نیست چرا با بقیه جمله فرق نمیکنه ظاهرش؟!
– چون اون نقل قول نیست. توضیحی است برای اون. در کل می تونید بزارید، من خیلی سخت گرفتم.
– چون تگ ها قرار نیست ظاهر رو تغییر بدند، تغییر ظاهر با css هستش.
همه عناصر ،
راستی من از تگ div داخل span استفاده کردم و خروجی منطقی‌ای رو نشون داد. وقتی میگیم نمیشه از بلاک داخل اینلاین استفاده کرد، یعنی چی؟ منظور اینکه کجا مشکل ایجاد میکنه؟
اگر بدونید دارید چکار میکنید (یعنی فرق خطی و بلاک رو بدونید و در سی اس اس کنترلشون کنید) مشکلی از نظر ظاهری براتون بوجود نمیاد. اما کدتون معتبر نیست از نظر استانداردهای وب.
اگر هم ندونید دارید چکار میکنید که از نظر ظاهری هم به مشکل خواهید خورد.
بله، کلا فرزندان زیر مجموعه ای از دسته نوادگان هستن.
سلام
میشه درباره استثنای عنصر بیشتر توضیح بدین؟