طرح ساده یک ستونی با HTML5

ساده ترین طرح برای پیاده سازی با CSS طرح یک ستونی است. این فقط یک سری جعبه است که روی هم قرار گرفته است. ما یک قسمت Header ، یک منوی ناوبری افقی ، یک منطقه برای محتوای صفحه و در آخر یک Footer خواهیم داشت. طرحی که ما طراحی خواهیم کرد به این شکل است:

A simple one column layout

تعداد زیادی برچسب در اینجا وجود دارد که قبلاً آنها را ملاقات نکرده اید. این برچسب ها برای HTML5 جدید هستند و در نسخه های قبلی وجود ندارند. آن ها هستند:

HEADER
NAV
SECTION
ARTICLE
FOOTER

در نسخه های قبلی HTML شما به جای تگ های بالا از برچسب های DIV استفاده کرده اید. به موارد جدید برچسب های معنایی گفته می شود. آنها در واقع کاری به تنهایی انجام نمی دهند - آنها فقط برای
شفاف سازی امور (و شاید موتورهای جستجو) هستند. اگر از برچسب های DIV برای همه موارد استفاده می کنید ، کد صفحه می تواند بسیار نامرتب و گیج کننده باشد.
هر چند بیایید نگاهی به کد خود بیندازیم.
با شروع از بالا ، ما یک برچسب HEADER داریم:

<HEADER>
<H1>Top Header</H1>
</HEADER>

برچسب HEADER فقط در بالای صفحه نیست. اگر به پایین صفحه نگاه کنید می بینید که جفت دیگری از آنها داریم:

<HEADER>
<H2>Section Title</H2>
</HEADER>

وقتی می خواهید عنوان خوبی برای بخشهای مختلف صفحه خود داشته باشید ، باید از برچسب HEADER استفاده شود. اولین HEADER ما برای برخی از متن های H1 است. از آنجا که در بالای صفحه ما قرار دارد ، می توانیم برچسب های H1 را جایگزین کنیم ، مثلاً یک تصویر برای استفاده به عنوان یک بنر سایت استفاده کنیم.
HEADER دوم ما یک جفت برچسب H2 را احاطه کرده است. این می تواند عنوان مقاله ای باشد که می خواهیم افراد روی آن کلیک کنند.
بعد از برچسب های HEADER بالا ، یک جفت برچسب NAV داریم. اینها یک لیست نامرتب را احاطه کرده اند که می خواهیم از آن به عنوان نوار پیمایش استفاده کنیم. پیش از این ، ما دارای برچسب های DIV بودیم که لیست نامرتب خود را احاطه کرده بودند. اکنون ، بسیار واضح تر است که این لیست برای چه مواردی استفاده می شود.
برچسب معنایی بعدی SECTION است. ما دو جفت از اینها داریم. جفت اول در بالا و پایین صفحه است:

The SECTION tag in HTML 5

hese SECTIONS برچسب ها محتوای اصلی سایت را در خود دارند.
در بین جفت اول برچسب های SECTION ما یک برچسب ARTICLE داریم. همانطور که از نامش پیداست ، این موارد برای زمانی مورد استفاده قرار می گیرند که شما می خواهید یک مقاله از متن دیگر سایت خود را جدا کنید. ممکن است بیش از یک مقاله داشته باشید ، در این صورت می توانید از جفت دیگری از برچسب های ARTICLE استفاده کنید. برای مثال مانند این:
 

The ARTICLE tag in HTML 5

در اینجا ، ما دو مقاله در صفحه داریم. هر جفت برچسب ARTICLE دارای HEADER و SECTION است. برچسب های HEADER به پیوندهای پیوندی تبدیل شده اند ، در حالی که از برچسب های SECTION برای عنوان داستان استفاده می شود.
الگوی خود را به عنوان یک فایل HTML ذخیره کنید. آن را در یک پوشه جدید به نام layout ذخیره کنید. برای نام فایل ، layout_one_col.html را تایپ کنید.
وقتی صفحه را در مرورگر بارگیری می کنید ، این را می بینید:

A browser showing the HTML 5 laid out

از آنجا که ما فقط از برچسب های HTML استفاده کردیم ، صفحه کاملاً ابتدایی به نظر می رسد.
آخرین کاری که باید قبل از رسیدن به CSS انجام شود. ویژگی های ID زیر را به کد HTML خود اضافه کنید:
 

Code showing the HTML 5 for a one column layout

بنابراین پنج ویژگی شناسه برای اضافه کردن وجود دارد که در بالا با پررنگ برجسته شده است. (اتفاقاً ، در صورت تمایل ، اینها می توانند انتخابگر CLASS باشند تا انتخابگر شناسه. استفاده از شناسه به این معنی است که می توانید به آنها با زبان اسکریپت مانند JavaScript و همچنین با استفاده از CSS به آنها مراجعه کنید.)

در قسمت بعدی ، شما می آموزید که چگونه HTML 5 خود را سبک کنید.