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

عناصر چیدمان HTML چه هستند؟

عناصر چیدمان HTML عناصر معنایی ویژه‌ای هستند که برای تعریف ساختار و چیدمان یک صفحه وب به کار می‌روند. این عناصر برای مرتب‌سازی و تقسیم محتوا به بخش‌های منطقی مفید هستند و خوانایی و دسترس‌پذیری صفحه وب را برای کاربران بهبود می‌بخشند.

طراحی HTML با استفاده از عناصر چیدمان

شکل زیر نشان می‌دهد که یک چیدمان معمولی صفحه وب HTML چگونه طراحی می‌شود. بیشتر صفحات وب دارای بخش عنوان، نوار پیمایش، بخش فهرست، بخش محتوا و بخش پاصفحه هستند که به‌ترتیب می‌توان آن‌ها را با استفاده از عناصر <header>، <nav>، <section>، <article> و <footer> تعریف کرد.

عناصر اصلی چیدمان HTML

هر عنصر چیدمان معنا و عملکرد مشخصی دارد و می‌توان آن را با استفاده از ویژگی‌ها و سبک‌ها سفارشی‌سازی کرد. این عناصر محتوایی را که دربر می‌گیرند توصیف می‌کنند، نه اینکه صرفاً ظاهر یک صفحه وب را مشخص کنند. این عناصر عبارت‌اند از:

• عنصر <header> در HTML
• عنصر <nav> در HTML
• عنصر <section> در HTML
• عنصر <footer> در HTML
• عنصر <article> در HTML
• عنصر <aside> در HTML

عنصر <header> در HTML

از عنصر <header> برای افزودن یک بخش سربرگ به صفحه وب HTML استفاده می‌شود. این عنصر به‌عنوان محفظه‌ای برای بخش معرفی و پیمایش صفحه عمل می‌کند. تمام محتوای داخل این تگ در قسمت بالایی صفحه وب قرار می‌گیرد. افزودن بخش سربرگ به صفحه وب کمک می‌کند موتورهای جست‌وجو محتوای شما را آسان‌تر درک کنند و صفحه را بر همین اساس رتبه‌بندی کنند.

مثال

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

<!DOCTYPE html>
<html lang="en">

<head>
      <title>Tutorialspoint</title>
</head>

<body>
   <header>
   <div>
      <h1>Tutorialspoint</h1>
      <h3>Simply easy learning!</h3>
   </div>
   </header>
</body>

</html>

عنصر <nav> در HTML

عنصر <nav> بخشی از صفحه وب را مشخص می‌کند که شامل پیوندهایی به صفحات دیگر یا بخش‌های دیگر همان صفحه است؛ درست مانند نوار منو. این عنصر معمولاً درون عنصر <header> یا عنصر <section> قرار می‌گیرد.

مثال

مثال زیر نشان می‌دهد که چگونه می‌توانید یک منوی پیمایش (بخش nav) در یک صفحه HTML ایجاد کنید:

<!DOCTYPE html>
<html lang="en">

<head>
      <title>Tutorialspoint</title>
</head>

<body>
   <header>
   <div>
      <h1>Tutorialspoint</h1>
      <h3>Simply easy learning!</h3>
   </div>
   <div>
      <nav>
         <ul>
            <li>
               <a href="#">
                  Home
               </a>
            </li>
            <li>
               <a href="#">
                  HTML
               </a>
            </li>
            <li>
               <a href="#">
                  CSS
               </a>
            </li>
            <li>
               <a href="#">
                  Python
               </a></li>
            <li>
               <a href="#">
                  JavaScript
               </a>
            </li>
         </ul>
      </nav>
   </div>
</header>
</body>

</html>

عنصر <section> در HTML

عنصر <section> بخش اصلی صفحه وب را تعریف می‌کند که تمام محتوای مهم در آن نمایش داده می‌شود. یک صفحه می‌تواند چندین بخش داشته باشد.

مثال

مثال زیر نشان می‌دهد که چگونه از عناصر چیدمان HTML مانند <header>، <nav> و <section> برای ساختاربندی یک صفحه وب استفاده کنید:

<!DOCTYPE html>
<html lang="en">

<head>
      <title>Tutorialspoint</title>
</head>

<body>
      <header>
         <h1>Tutorialspoint</h1>
         <h3>Simply easy learning!</h3>
         <nav>navigation bar</nav>
      </header>
      <section>Section 1</section>
      <section>Section 2</section>
      <section>Section 2</section>
</body>

</html>

عنصر <footer> در HTML

عنصر <footer> بخش پاصفحه را در صفحه وب تعریف می‌کند. این بخش شامل اطلاعات حق نشر، پیوندهای شبکه‌های اجتماعی و سایر جزئیات مهم است. این بخش همیشه در قسمت پایینی صفحه وب قرار می‌گیرد.

مثال

مثال زیر نشان می‌دهد که چگونه می‌توانید یک پاصفحه واکنش‌گرا در HTML ایجاد کنید که شامل اطلاعات حق نشر و پیوندهای شبکه‌های اجتماعی باشد و با استفاده از CSS به‌گونه‌ای سبک‌دهی شده باشد که چیدمانی یکپارچه در پایین صفحه وب داشته باشد:

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Footer Example</title>
   <style>
      body {
         display: flex;
         flex-direction: column;
         min-height: 100vh;
         margin: 0;
      }
      .content {
         flex: 1;
      }
      footer {
         background-color: #333;
         color: #fff;
         text-align: center;
         padding: 20px 0;
      }
      footer .social-media a {
         color: #fff;
         margin: 0 10px;
         text-decoration: none;
      }
      footer .social-media a:hover {
         color: #ddd;
      }
   </style>
</head>

<body>
   <div class="content">
      <h2>Footer Element of HTML Layout</h2>
      <p>
         The footer tag defines the footer section of 
         the webpage. This section contains copyright 
         information, social media links, and other 
         important details. It will be always at the 
         bottom of the webpage.
      </p>
   </div>
   <footer>
      <p>© 
         2024 Tutorialspoint. All rights reserved.
      </p>
      <div class="social-media">
         <a href="#">Facebook</a>
         <a href="#">Twitter</a>
         <a href="#">Instagram</a>
         <a href="#">LinkedIn</a>
      </div>
   </footer>
</body>

</html>

عنصر <article> در HTML

عنصر <article> محتوای مستقل و خودبسنده‌ای را مشخص می‌کند؛ مانند یک پست در انجمن، مقاله مجله، پست وبلاگ و موارد مشابه. هنگامی که یک عنصر article درون عنصر article دیگری قرار می‌گیرد، عنصر داخلی نشان‌دهنده مقاله‌ای است که به عنصر بیرونی مرتبط است. برای مثال، دیدگاه‌های مربوط به پست‌های شبکه‌های اجتماعی می‌توانند در قالب یک عنصر article درون عنصری قرار بگیرند که خود پست شبکه اجتماعی را نمایش می‌دهد. این عنصر بیشتر برای پست‌های انجمن‌ها، مقاله‌های مجله یا روزنامه، مطالب وبلاگ، کارت‌های محصولات و موارد مشابه استفاده می‌شود.

مثال

مثال زیر نشان می‌دهد که چگونه از تگ <article> در HTML برای ساختاربندی یک پست وبلاگ شامل عنوان، اطلاعات فرعی و محتوا استفاده کنید و با سبک‌دهی مناسب، چیدمانی مرتب ایجاد کنید:

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Article Example</title>
   <style>
      article {
         background: #fff;
         margin: 20px 0;
         padding: 20px;
      }
   </style>
</head>

<body>
   <header>
      <h1>My Blog</h1>
   </header>

   <main>
      <article>
         <h2>Understanding the HTML Article Tag</h2>
         <p>
            Posted on <time datetime="2024-06-20">
            June 20, 2024</time> by Farhan
         </p>
         <p>
            The article tag is commonly used for content 
            such as blog posts, news articles, and user 
            comments.
         </p>
         <p>
            Lorem ipsum dolor sit amet, consectetuer a
            cing elit. Aenean commodo ligula eget dolor. 
            Aenean massa. Cum sociis natoque penatib
            magnis dis parturient montes, nascet
            mus. Donec quam felis, ultric
      </article>
   </main>

</body>
</html>

عنصر <aside> در HTML

عنصر <aside> بخشی از محتوا را مشخص می‌کند که به‌طور مستقیم یا غیرمستقیم با محتوای اصلی مرتبط است؛ مانند نوار کناری. اگر محتوای aside را از یک صفحه وب حذف کنید، محتوای اصلی تحت تأثیر قرار نمی‌گیرد، زیرا محتوای aside بخشی جداگانه و اختیاری از صفحه است. این تگ اغلب برای نمایش تبلیغات استفاده می‌شود.

مثال

مثال زیر نشان می‌دهد که چگونه از تگ <aside> در HTML برای نمایش محتوای مرتبط، مانند پیوندهایی به آموزش‌ها، در کنار محتوای مقاله اصلی استفاده کنید و چیدمانی ساختاریافته و واکنش‌گرا ایجاد کنید.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Aside Tag Example</title>
   <style>
      body {
         display: flex;
         flex-direction: column;
         background-color: #f4f4f4;
      }

      main {
         display: flex;
         flex: 1;
         padding: 20px;
      }
      article {
         flex: 3;
         background: #fff;
         padding: 20px;
         margin-right: 20px;
      }
      aside {
         flex: 1;
         background: #fff;
         padding: 20px;
         border-radius: 8px;
      }

   </style>
</head>

<body>
   <header>
      <h1>My Blog</h1>
   </header>
   <main>
      <article>
         <h3>Articles...</h3>
      </article>

      <aside>
         <h2>Related Articles</h2>
         <ul>
            <li>
               <a href="/html/index.htm">
                  HTML Tutorial
               </a></li>
            <li>
               <a href="/css/index.htm">
                  CSS Tutorial
               </a></li>
            <li>
               <a href="/python/index.htm">
                  Python Tutorial
               </a></li>
         </ul>
      </aside>
   </main>
</body>

</html>

ایجاد چیدمان HTML با استفاده از عناصر چیدمان

عناصر چیدمان به بهبود خوانایی و دسترس‌پذیری صفحه وب و همچنین عملکرد آن در سئو (بهینه‌سازی برای موتورهای جست‌وجو) کمک می‌کنند. در اینجا قصد داریم با کمک عناصر معنایی ذکرشده در بالا، یک چیدمان ساده برای صفحه وب ایجاد کنیم.

<!DOCTYPE html>
<html>

<head>
   <title>Layout structure of HTML</title>
   <style>
      * {
         box-sizing: border-box;
      }
      header {
         font-size: 25px;
         color: whitesmoke;
         padding: 1px;
         text-align: center;
         background-color: lightslategray;
      }
      nav {
         float: left;
         width: 20%;
         height: 350px;
         background: lightgray;
         padding: 20px;
      }
      nav ul {
         padding: 1px;
      }
      article {
         float: left;
         padding: 20px;
         width: 80%;
         background-color: lightyellow;
         height: 350px;
      }
      footer {
         background-color: lightslategray;
         padding: 10px;
         text-align: center;
         color: white;
         padding-top: 20px;
         padding-bottom: 10px;
      }
      footer a {
         margin: 10px;
      }
      footer p {
         margin-top: 30px;
      }
   </style>
</head>

<body>
   <!--header segment-->
   <header>
      <div>
         <p>Tutorialspoint</p>
         <p>Simply easy learning!</p>
      </div>
   </header>
   <section>
      <!--Menu Navigation segment-->
      <nav>
         <ul>
            <li>
               <a href="#">Home</a>
            </li>
            <li>
               <a href="#">Jobs</a>
            </li>
            <li>
               <a href="#">Library</a>
            </li>
            <li>
               <a href="#">Articles</a>
            </li>
            <li>
               <a href="#">Certification</a>
            </li>
         </ul>
      </nav>
      <!--Content segment-->
      <article>
         <h1>Welcome to Tutorials point</h1>
         <p> 
            Tutorialspoint.com is a dedicated page 
            to provide quality online education in 
            domains of Computer Science and other
            Technology, Programming Languages, and 
            other Engineering subjects. 
         </p>
      </article>
   </section>
   <!--Footer segment-->
   <footer>
      <h2>Tutorialspoint</h2>
      <div>
         <a href="#"> About us </a>
         <a href="#"> Refund policy </a>
         <a href="#"> Terms of use </a>
         <a href="#"> Privacy policy </a>
         <a href="#"> FAQ's </a>
         <a href="#"> Affiliates </a>
         <a href="#"> Contact </a>
      </div>
      <div>
         <p>
            Copyrights  TUTORIALS POINT (INDIA) 
            PRIVATE LIMITED. All rights reserved.
         </p>
      </div>
   </footer>
</body>

</html>