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

مشاوره رایگان

برای مشاوره در زمینه
سایت و سئو
با ما تماس بگیرید.

شبکه های اجتماعی ما
دوره سئو مقدماتی

یک دوره مقدماتی و رایگان سئو که بسیار پربار و سرشار از تجربه مدرس و با کیفیت بالا تهیه شده تا بتوانید در زمان کمتری وب سایت را سئو کنید.

1573 نفر
3 دقیقه
گروه آموزش طراحی سایت
بروزرسانی در: آبان 6, 1390

فهرست مطالب

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

به طور کلی عناصر را می توان به دو دسته ی عمده تقسیم کرد:

  1. عناصر خطی – inline elements
  2. عناصر بلوکی – block elements

عناصر خطی در html

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

تعدادی از عناصر خطی در اچ تی ام ال عبارتند از:

<a>, <span>, <img />, …

برای درک بهتر عناصر خطی، به مثال زیر توجه کنید:

[html]<span>this is an inline element</span>
<a href="https://onliner.co">web design tutorials">onliner link</a>
<strong>this is another inline element</strong>[/html]

کد بالا را ذخیره کنید و با مرورگری باز کنید؛ مشاهده خواهید کرد که تمام عناصر html به کار رفته در کد بالا، کنار یکدیگر قرار میگیرند. چرا که تمامی آن ها عناصر خطی (inline elements) هستند.

عناصر بلوکی در html

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

تعدادی از عناصر بلوکی در اج تی ام ال عبارتند از:

<p>, <div>, <ul>, …

برای درک بهتر عناصر بلوکی، به مثال زیر توجه کنید:

[html]<span>this is an inline element</span>
<p>a sample paragraph</p>
<a href="https://onliner.co">web design tutorials">Onliner link</a>
<strong>this is another inline element</strong>[/html]

کد بالا را ذخیره کرده و بوسیله ی مرورگری باز کنید. مشاهده خواهید کرد عنصر بلوکی <p> در مثال فوق، طوری قرار میگیرد که هیچ عنصر دیگری در کنار آن نیست. در حقیقت اطراف آن را یک فضای خالی تشکیل خواهد داد.

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

  • عناصر بلوکی را به هیچ وجه نمی توان درون عناصر خطی به کار گرفت.
  • عناصر خطی را می توان درون عناصر بلوکی به کار گرفت.
  • عناصر خطی را می توان درون سایر عناصر خطی به کار گرفت.
  • تنها برخی از عناصر بلوکی را می توان درون سایر عناصر بلوکی به کار گرفت. مثلا می توان عنصر <p> را درون <div> به کار گرفت اما نمی توان عنصر <ul> را درون عنصر <p> به کار گرفت.
به این صفحه رتبه دهید
بدون دیدگاه
انتشار: شهریور 29, 1390
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
گروه آموزش طراحی سایت
آیا نیازمند راهنمایی هستید؟
همین حالا برای مشاوره رایگان اقدام کنید
با پر کردن فرم، یک قدم به رشد آنلاین نزدیک‌تر شوید!
فرم درخواست مشاوره

برای راحتی شما عزیزان می‌توانید اطلاعات خود را در کادر زیر وارد کنید تا کارشناسان ما با شما تماس بگیرند

مشاوره رایگان
پیمایش به بالا