آموزش چینش عناصر در HTML

عناصرِ چینش در HTML

وب سایت ها معمولاً محتوا را در چند ستون قرار می دهند(مانند یک مجله یا روزنامه). HTML چندین عنصر مخصوص(معنی دار) دارد که بخش های مختلف صفحه وب را تعریف می کنند:

توضیح عناصر تصویر بالا:

1. عنصر <header> : این عنصر یک هِدِر را برای یک سند یا یک <section> تعریف می کند.

2. عنصر <section> : این عنصر، یک بخش(section) را در یک سند تعریف می کند.

3. عنصر <article> : این عنصر یک مقاله ی(article) مستقل را تعریف می کند.

4. عنصر <aside> : این عنصر یک محتوا  را جدای از بقیه ی محتواها (مثل یک نوار کناری) تعریف می کند.

5. عنصر <footer> : این عنصر یک فوتر را برای سند یا بخش(section) تعریف می کند.

6. عنصر <details> : این عنصر جزئیات بیشتری را تعریف می کند.

7. عنصر <summary> : یک عنوان را برای عنصر <details> تعریف می کند.

روش های مختلف چینش عناصر در HTML

پنج راه مختلف برای ایجاد چینش های چند ستونه وجود دارد. هر روش مزایا و معایب خاص خود را دارد:

1. استفاده از جدول ها(این روش توصیه نمی شود).

2. استفاده از ویژگی float در CSS

3. استفاده از flexbox در CSS

4. استفاده از فریم ورک های CSS

5. استفاده از گرید(grid)

از کدام روش چینش باید استفاده کرد؟

استفاده از جدول های HTML

عنصر <table> بعنوان یک ابزار برای چینش طراحی نشده است. هدف عنصر <table> نمایش دادن داده های فهرستی است. بنابراین از جدول های بعنوان چینش صفحه ی خود استفاده نکنید. زیرا باعث ایجاد بی نظمی در کدها می شوند و زحمت ایجاد می کنند.

نکته: از جدول ها برای ایجاد چینش صفحات استفاده نکنید!

استفاده از فریم ورک های CSS

اگر می خواهید به سرعت چینش صفحه را ایجاد کنید، می توانید از یک فریم ورک مانند بوت استرپ یا W3.CSS استفاده کنید.

استفاده از ویژگی float

ما می توانیم تمام چینش های صفحات وب را با استفاده از ویژگی float در CSS انجام دهیم(این کار متداول است). یادگیری ویژگی float ساده است. تنها کافیست بدانید که ویژگی float و clear چگونه کار می کنند. معایب استفاده از float این است که عناصر شناور شده(Floating elements)، به ترتیبِ عناصرِ صفحه گره خورده اند و این موضوع می تواند به انعطاف پذیری آنها آسیب وارد کند. در آموزش های CSS اطلاعات دقیق تری در این زمینه وجود دارد.

  استفاده از flexbox در CSS

Flexbox یک روش چینش جدید در CSS3 است. استفاده از روش flexbox ، اطمینان حاصل می کند که عناصر، وقتی که چینش صفحه باید با سایزهای مختلف صفحه و دستگاه های مختلف تطابق یابد، به صورت قابل پیش بینی شده ای رفتار کنند.

معایب این روش این است که در مرورگرها اینترنت اکسپلورر 10 و قبل از آن، کار نمی کند. برای اطلاعات بیشتر در مورد فلکس، به آموزش CSS مراجعه کنید.

استفاده از چینش گرید(شبکه بندی)

ماژول چینش گرید در CSS، یک سامانه چینش مبتنی بر گرید را به ما ارائه می دهد، و با استفاده از ردیف ها و ستون ها، طراحی صفحات وب را بدون استفاده از folat ها و position ها ساده تر می کند. از معایب این چینش، می توان کار نکردن آن در اینترنت اکسپلورر و Edge15 و نسخه های قبلی آن نام برد.

برای اطلاعات بیشتر در مورد گرید ها در CSS می توانید به آموزش CSS مراجعه کنید.