هر عنصر HTML یک مقدار نمایش پیش فرض بسته به اینکه چه نوعی از عنصر می باشد دارد. بصورت کلی دو مقدار نمایش وجود دارد: بلاک (block) و اینلاین (inline).
عنصر های نوع بلاک (block)
یک عنصر نوع بلاک همیشه در یک خط جدید شروع می شود و تمام عرض خط موجود را به خود اختصاص می دهد.
عنصر <div> یک عنصر بلاک است.
که نتیجه کد بالا به شکل زیر خواهد بود. مشاهده می فرمایید که عنصر div تمام عرض صفحه را به خود اختصاص داده است و اجازه قرارگیری عنصر دیگری را در همسایگی خود نمی دهد.
عنصرهای نوع بلاک در HTML
عنصرهای Inline
یک عنصر Inline درخط جدید شروع نمی شود و فقط به اندازه نیاز عرض را اشغال می کند و اجازه می دهد عناصر دیگر نیز در کنار خود داشته باشد. عناصر inline در طراحی سایت کاربرد زیادی دارند.
مثال :
که نتیجه کد بالا به شکل زیر است. مشاهده می کنید که عنصر span در همان خط قرار گرفته و عناصر دیگر را در همسایگی خود پذیرفته است.
عنصرهای inline در HTML:
عنصر <div>
عنصر <div> یکی از پرکاربردترین عناصر در طراحی سایت و صفحات وب است. این عنصر اغلب بعنوان یک فضا برای بقیه عناصر HTML استفاده می شود.
عنصر <div> هیچ ویژگی ای را نیاز ندارد، اما معمولا در آن از style، class و id استفاده می شوند. وقتی عنصر <div> با استایل های CSS ترکیب شوند، از آنها می توان برای استایل دادن به محتوا درون عنصر div استفاده کرد:
که نتیجه کد بالا به شکل زیر خواهد بود:
عنصر <span>
عنصر <span> نیز یکی دیگر از عناصر پرکاربرد در طراحی سایت است. این عنصر یک فضای inline برای مارک کردن یک قسمتی از متن یا سند می باشد. عنصر <span> هیچ ویژگی خاصی نیاز ندارد، اما معمولا از style، class و id در آن استفاده می شود.
وقتی عنصر <span> با CSS ترکیب شود، می تواند برای استایل دادن به محتوا استفاده شود:
که نتیجه کد بالا به شکل زیر است:
