آموزش عناصر بلوکی یا بلاکی و درون خطی (HTML Inline - Block)

عناصر بلاکی (Block) در html

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

یک عنصر بلاکی همیشه عرض کامل را اشغال می کند یعنی تا آنجا که می تواند به چپ و راست کشیده می شود.

یک عنصر بلوکی دارای حاشیه بالا و پایین است در صورتی درون خطی فاقد این حاشیه ها است.

نکته: عنصر div یک عنصر بلاکی است.

مثال: در این جا از عنصر div که یک عنصر بلاکی است استفاده کرده ایم.

<div>Hello World</div>

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

• address
• article
• aside
• blockqoute
• canvas
• dd
• div
• dl
• dt
• fieldset
• figcaption
• figure
• footer
• form
• h1 تا h6
• header
• hr
• li
• main
• nav
• noscript
• ol
• p
• pre
• section
• table
• tfoot
• ul
• video

بیشتر بدانیم : خدمات گوگل ادز

عناصر درون خطی (inline) در html

یک عنصر درون خطی مانند عناصر بلاکی از یک خط جدید شروع نمی شود.

یک عنصر درون خطی فقط به اندازه نیازش عرض اشغال می کند.

عنصر span یک عنصر درون خطی است که فقط به اندازه نیازش عرض اشغال می کند.

مثال: در این جا یک عنصر span نشان داده شده است که درون خطی است.

<span>Hello World</span>

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

• a
• abbr
• acronym
• b
• bdo
• big
• br
• button
• cite
• code
• dfn
• em
• i
• img
• input
• kbd
• label
• map
• object
• output
• q
• samp
• script
• select
• small
• span
• strong
• sub
• sup
• textarea
• time
• tt
• var

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

بیشتر بدانیم : خدمات سئو

عنصر div در html

عنصر div اغلب به عنوان ظرفی برای دیگر عناصر در HTML استفاده کی شود.

عناصر div ویژگی خاصی ندارند، اما style، class و id در آن معمول هستند.

هنگامی که عناصر div با CSS همراه می شوند، می توانند برای سبک سازی بلوک های محتوا استفاده شوند.

مثال: به این مثال دقت کنید.

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

ببینید، یک سبک خاص برای بلاکی از محتوا با عنصر div و برخی ویژگی های CSS ایجاد شده است.

بیشتر بدانیم : طراحی کاتالوگ

عنصر span در html

عنصر span یک ظرف درون خطی است که برای علامت گذاری بخشی از یک متن و یا بخشی از یک سند استفاده می شود.

عناصر span ویژگی خاصی ندارند، اما style، class و id در آن معمول هستند.

عنصر span هنگامی که با CSS همراه می شود، می تواند برای استایل بخشیدن به بخش هایی از متن استفاده شود.

مثال: به این مثال دقت کنید.

<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

با ترکیب عنصر span و برخی ویژگی های CSS به کلمه blue استایل خاصی بخشیده شده است.

تگ های HTML

در این قسمت تگ های مورد استفاده در این مقاله در قالب جدولی به صورت خلاصه وار، توضیح داده شده است.

بحث بلوک (Block) و درون خطی (Inline) عناصر در چینش عناصر بسیار مهم است که ملزم به تمرین و تکرار زیاد است.

بیشتر بدانیم : آموزش کلاس در HTML (خصوصیت یا صفت class)