همه چیز از همه جا - ساختار HTML یک صفحه وب

ساختار HTML یک صفحه وب

تا الان درباره عناصر مختلفی بحث کردیم. در این مطلب در مورد گروه بندی این عناصر و ساختار یک صفحه وب صحبت می کنیم.

به عنوان نمونه یک صفحه بلاگ می تواند به چهار قسمت تقسیم شود:

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

Header

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


<header>
  <a>
    <img src="my-logo.jpg" alt="CSS-Tricks.ir logo">
  </a>
  <h1>A cool website</h1>
  <nav>
    <ul>
      <li>
        <a href="home.html">Home</a>
      </li>
      <li>
        <a href="about.html">About</a>        
      </li>
      <li>
        <a href="contact.html">Contact</a>
      </li>
    </ul>    
  </nav>
</header>

Footer

در مقابل Header، قسمت Footer سایت معمولا آخرین محتوایی است که درون یک صفحه وب وجود دارد.

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


<footer>
  <p>css-tricks.ir | Copyright 2016</p>
</footer>

Main

همانطور که از نام این قسمت پیدا است مهمترین محتوای صفحه در این قسمت قرار می گیرد. هدف یک صفحه را این قسمت مشخص می کند.

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

به عنوان نمونه همین مقاله ای که در حال خواندش هستید در قسمت <main> سایت قرار گرفته است.

Aside

این قسمت معمولا در کنار main قرار دارد و محتواهای کمکی در این قسمت وجود دارند. به عنوان نمونه قسمت سمت چپ این وب سایت درون تگ <aside> قرار گرفته است.

Section

از تگ <section> برای گروه بندی عناصری که می توانند از نظر محتوایی در کنار هم قرار گرفته و تشکیل یک گروه مستقل محتوایی را بدهند استفاده می شود. درون این قسمت معمولا یک عنوان وجود دارد و همینطور می تواند با یک لیست و یا چند پاراگراف ادامه پیدا کند.


<section>
  <h2></h2>
  <p></p>
  <p></p>
</section>

اگر هدف از گروه بندی عناصر فقط و فقط جنبه ظاهری است و آن گروه بندی معنایی به صفحه نمی دهد از عنصر <div> برای گروه بندی استفاده کنید.

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


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <header>
    <nav></nav>
  </header>
  <main>
    <!-- محتوای اصلی -->
  </main>
  <aside></aside>
  <footer></footer>
</body>
</html>

کلمات کلیدی :