ساختار 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>

14 دیدگاه برای “ساختار HTML”

  1. سلام.
    من چند روز پیش داشتم کد میزدم که یه لحظه احساس کردم یه ضعفی وجود داره در کد من که اون رو از تروتمیز بودن خارج میکنه. و چیزی که متوجه شدم این بود که نام کلاس هارو نمیتونستم شیک انتخاب کنم. یعنی مثلا header , footer و .. خوب هستن ولی زیرمجموعه ها و فرزندهاشون و این داستان ها. یک استاندارد خوبی به نظرم نیازه که وجود داشته باشه برای این قضیه. اگه راهنمایی ای داشتید و یا مقاله ای رو میشناختید که کمک میکنه به اینکه بتونیم تروتمیز تر کد بزنیم خوشحال میشم معرفی کنید و یا راجبش بنویسید.

    پاسخ

    1. سلام.

      نام گذاری یکی از قصه های طولانی و مفصل توی دنیای برنامه نویسی و کامپیوتره. و کلاس های سی اس اس هم از این قضیه خارج نیستند.

      دنبال روش های OOCSS یا SMACSS و یا BEM بگردید توی اینترنت و چند تا مطلب بخونید قصه رو متوجه می شید و کمکتون میکنه.

      من خودم از BEM استفاده می کنم ولی نه هر جایی… این روش ها بیشتر وقتی خودشون رو نشون می دن که پروژه ها و تیم ها بزرگ باشند ولی خوب میشه توی کارهای کوچیک هم ازشون استفاده کرد و خوب هم هست.

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

      فعلا در مورد مطالب بالا بخونید و قطعا هم متوجه میشید و استفاده می کنید.

      موفق باشید.

      پاسخ

  4. آیا میشه از تگ footer برای ساخت بخش پایینی مطالب استفاده کرد یا فقط برای بخش پایینی کل صفحه استفاده میشه؟

    آیا از تگ nav میشه و باید برای ایجاد هر منویی مثل منوی بالایی وبسایت یا منوی پایینی و کنار وبسایت استفاده کرد یا فقط برای منوی بالایی و اصلی وب سایت هست ؟

    پاسخ

  5. سلام. من دو تا سکشن نوشتم که داخل هر کدومش تگ های مختلفی هست ولی مطالب داخل سکشن دومی میاد روی مطالب سکشن اول! مگه نباید زیر سکشن اول بیاد ؟
    من سکشن اول رو بستم و بعدش سکشن دوم رو شروع کردم.
    خواهشا اینو جواب بدید. در مورد باکس شادو چند روز پیش سوال پرسیدم جواب ندادید حداقل اینو جواب بدید ممنون

    پاسخ

    1. سلام بستگی داره از چه ویرایشگری استفاده میکنی مثلا نوت پد پلاس پلاس همه ی تگ هارو نداره و مثل ویژوال استدیو نیست که تا کدو نوشتی کاملش کنه برات . البته گاها همین ویژوال استدیو هم تگ هارو پیشنهاد نمیده که یا مشکل از نته یا خود ویرایش گر. من تا همین قدرشو میدونستم.

      پاسخ

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *