سرصفحه‌ها و بخش‌ها

در بخش آخر یاد گرفتید که چگونه، حتی اگر معنی کلمات یک صفحه را ندانید، وقتی عناصر معنایی ساختار معناداری را برای سند فراهم می‌کنند، دیگران - موتور جستجو، فناوری‌های کمکی، نگهدارنده آینده، یک عضو جدید تیم - طرح کلی سند را درک خواهد کرد.

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

انتخاب عناصر مناسب برای کار درحین کدنویسی به این معنی است که مجبور نخواهید بود HTML خود را بازسازی کنید یا آن را به‌صورت نظر درآورید. اگر به استفاده از عنصر مناسب برای کار فکر کنید، اغلب عنصر مناسب را برای کار انتخاب خواهید کرد. اگر این کار را نکنید، احتمالاً نخواهید توانست.

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

ابتدا باید سرصفحه سایت بسازید. با نشانه‌گذاری غیرمعنایی شروع کنید و به‌تدریج به راه‌حل خوبی برسید تا بتوانید مزایای بخش HTML و عناصر عنوان را در طول مسیر یاد بگیرید.

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

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

CSS می‌تواند (تقریباً) هر نشان‌گذاری را درست نشان دهد. اما استفاده از <div> غیرمعنایی برای همه چیز درواقع کار اضافی ایجاد می‌کند. برای هدف‌یابی چند <div> با CSS، درنهایت از شناسه‌ها یا کلاس‌ها برای شناسایی محتوا استفاده می‌کنید. این کد همچنین شامل نظری برای هر </div> پایانی است تا نشان دهد هر </div> کدام برچسب آغازین را بسته است.

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

می‌توانید مشخصه‌های role را برای ارائه معناشناسی اضافه کنید تا مدل شیء دسترسی‌پذیری (AOM) خوبی برای صفحه‌خوان‌ها ایجاد شود:

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

این کار حداقل معناشناسی را ارائه می‌دهد و استفاده از گزینشگرهای مشخصه را در CSS فعال می‌کند، اما همچنان نظراتی را برای شناسایی اینکه هر </div> کدام <div> را می‌بندد اضافه می‌کند.

اگر HTML می‌دانید، تنها کاری که باید انجام دهید این است که به هدف محتوا فکر کنید. سپس می‌توانید این کد را به‌صورت معنایی بدون استفاده از role و بدون نیاز به نظر دادن درباره برچسب‌های پایانی بنویسید:

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

این کد از دو نشانگر معنایی استفاده می‌کند: <header> و <nav>.

این سرصفحه اصلی است. عنصر <header> همیشه نشانگر نیست. بسته به جایی که تودرتو شده است، معناشناسی متفاوتی دارد. وقتی <header> در سطح بالا باشد، سایت banner است، نقشی شاخص که ممکن است در بلوک کد role به آن اشاره کرده باشید. وقتی <header> در <main>، <article>، یا <section> تودرتو باشد، فقط آن را به‌عنوان سرصفحه آن بخش شناسایی می‌کند و نشانگر نیست.

عنصر <nav> محتوا را به‌عنوان پیمایش شناسایی می‌کند. ازآنجایی‌که این <nav> در سرصفحه سایت قرار دارد، پیمایش اصلی سایت است. اگر در <article> یا <section> تودرتو شده بود، فقط برای آن بخش پیمایش داخلی می‌شد. بااستفاده از عناصر معنایی، مدل شیء دسترس‌پذیری یا AOM معناداری ساختید. AOM به صفحه‌خوان امکان می‌دهد به کاربر اطلاع دهد که این بخش از یک بلوک پیمایش اصلی تشکیل شده است که می‌تواند در آن پیمایش کند یا از آن رد شود.

استفاده از برچسب‌های پایانی </nav> و </header> نیاز به نظرات برای شناسایی اینکه هر برچسب پایانی کدام عنصر را بسته است، ازبین می‌برد. علاوه‌براین، استفاده از برچسب‌های مختلف برای عناصر مختلف نیاز به قلاب‌های id و class را ازبین می‌برد. گزینشگرهای CSS می‌توانند ویژگی پایینی داشته باشند؛ احتمالاً می‌توانید پیوندها را با header nav a بدون نگرانی درباره تداخل هدف‌یابی کنید.

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

پانویس سایت را کدگذاری کنید.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

مشابه <header>، اینکه پانویس نشانگر مکانی باشد یا نه به این بستگی دارد که پانویس کجا قرار گرفته باشد. وقتی پانویس سایت باشد، یک نشانگر است و باید حاوی اطلاعات پانویس سایت باشد که می‌خواهید در هر صفحه وجود داشته باشد، مانند بیانیه حق نشر، اطلاعات تماس، و پیوندهایی به خط‌مشی‌های حریم خصوصی و کوکی شما. role ضمنی برای پانویس سایت contentinfo است. درغیراین‌صورت، پانویس نقش ضمنی ندارد و نشانگر نیست، همان‌طور که در نماگرفت زیر از AOM در Chrome نشان داده شده است (که دارای <article> با <header> و <footer> بین <header> و <footer> است).

مدل شیء دسترس‌پذیری در Chrome.

در این نماگرفت، دو پانویس وجود دارد: یکی در <article> و دیگری در سطح بالا. پانویس سطح بالا یک شاخص با نقش ضمنی contentinfo است. پانویس دیگر نشانگر نیست. Chrome آن را به‌صورت FooterAsNonLandmark نشان می‌دهد؛ Firefox آن را به‌صورت section نشان می‌دهد.

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

وقتی <footer> از نسل <article>،‏ <aside>،‏ <main>،‏ <nav>، یا <section> باشد، نقطه عطف نیست. اگر پست به‌تنهایی نشان داده شود، بسته به نشان‌گذاری، ممکن است آن پانویس ارتقا داده شود.

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

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>

ساختار سند

این واحد با <header> و <footer> شروع می‌شود، زیرا این عناصر فقط گاهی‌اوقات نشانگر (یا «بخش‌بندی») هستند. چند عنصر بخش‌بندی رایج‌تر دیگر وجود دارد.

چیدمانی با سرصفحه، سه ستون، و پاصفحه.

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

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

اگر درحال ایجاد وبلاگ هستید، ممکن است مجموعه‌ای از مقاله‌ها را در <main> داشته باشید:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

هنگام استفاده از عناصر معنایی، مرورگرها می‌توانند درخت‌های دسترس‌پذیری معناداری ایجاد کنند. این کار به بهبود نحوه پیمایش صفحه‌خوان کمک می‌کند. در اینجا، banner و contentinfo ازطریق سایت <header> و <footer> ارائه شده است. عناصر جدیدی که در اینجا اضافه شده‌اند شامل <main>،‏ <aside>، و <article> است؛ همچنین، <h1> و <nav> که قبلاً استفاده کرده‌اید، و <section> که هنوز استفاده نکرده‌اید.

<main>

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

<aside>

<aside> برای محتوایی است که به‌طور غیرمستقیم یا مماس با محتوای اصلی سند مرتبط است. برای مثال، این سند درباره HTML است. برای بخشی درباره ویژگی گزینشگر CSS برای سه نمونه سرصفحه سایت (div، نقش، و معنایی)، حاشیه مرتبط مماس می‌تواند در یک <aside> گنجانده شود؛ و مانند اکثر موارد، <aside> احتمالاً در یک نوار کناری یا یک کادر فراخوان ارائه می‌شود. <aside> همچنین یک نشانگر مکانی است، با نقش ضمنی complementary.

<article>

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

<article> نشان‌دهنده بخش کامل یا خوداتکایی از محتوا است که اصولاً به‌طور مستقل قابل‌استفاده مجدد است. مقاله را مثل مقاله در روزنامه درنظر بگیرید. در نسخه چاپی، مقاله خبری درباره جاسیندا آردرن، نخست‌وزیر نیوزیلند، ممکن است فقط در یک بخش، مثلاً اخبار جهان، نشان داده شود. در وب‌سایت روزنامه، همان مقاله خبری ممکن است در صفحه اصلی، در بخش سیاست، در بخش اخبار اقیانوسیه یا آسیا و اقیانوسیه، و بسته به موضوع خبر، شاید در بخش‌های ورزش، سبک زندگی، یا فناوری ظاهر شود. ممکن است مقاله در سایت‌های دیگر، مثل Pocket یا Yahoo News، نیز نشان داده شود!

<section>

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

اگر به مثال جاسیندا آردن برگردیم، در صفحه اصلی روزنامه، برنما شامل نام روزنامه است و به‌دنبال آن یک <main> قرار دارد که به چند <section> تقسیم شده است و هرکدام سرصفحه‌ای دارد، مثل «اخبار جهان» و «سیاست»؛ و در هر بخش، مجموعه‌ای از <article>ها را خواهید دید. در هر <article>، ممکن است یک یا چند عنصر <section> نیز پیدا کنید. اگر به این صفحه نگاه کنید، کل بخش «سرصفحه‌ها و بخش‌ها» <article> است. سپس این <article> به چند <section> تقسیم می‌شود، ازجمله site header، site footer، و ساختار سند. خود مقاله و هریک از بخش‌ها سرصفحه دارند.

<section> نشانگر نیست مگر اینکه نام دسترس‌پذیری داشته باشد؛ اگر نام دسترس‌پذیری داشته باشد، نقش ضمنی region است. از نقش‌های نشانگر باید به‌ندرت برای شناسایی بخش‌های کلی بزرگ‌تر سند استفاده شود. استفاده از نقش‌های نشانگر بیش‌ازحد می‌تواند در صفحه‌خوان‌ها «نویز» ایجاد کند و درک طرح‌بندی کلی صفحه را دشوار کند، اگر <main> شما شامل دو یا سه زیربخش مهم باشد، گنجاندن نام دسترس‌پذیر برای هر <section> می‌تواند مفید باشد.

عنوان‌ها: <h1>-<h6>

شش عنصر سرفصل بخش وجود دارد: <h1>، <h2>، <h3>، <h4>، <h5>، و <h6>. هرکدام یکی از شش سطح عنوان بخش را نشان می‌دهد که <h1> بالاترین یا مهم‌ترین سطح بخش و <h6> پایین‌ترین سطح است.

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

توصیه می‌شود از سطوح سرصفحه مشابه با سطوح سرصفحه در ویرایشگر نوشتار استفاده کنید: با <h1> به‌عنوان سرصفحه اصلی شروع کنید، از <h2> به‌عنوان سرصفحه برای زیربخش‌ها استفاده کنید، و اگر آن زیربخش‌ها بخش‌هایی دارند، از <h3> استفاده کنید؛ از رد شدن از سطوح سرصفحه خودداری کنید. مقاله خوبی درباره عنوان‌های بخش در اینجا وجود دارد.

برخی‌از کاربران صفحه‌خوان برای درک محتوای صفحه به عنوان‌ها دسترسی دارند. در ابتدا، قرار بود عنوان‌ها طرح کلی سند را مشخص کنند، درست همان‌طور که MS Word یا «سندنگار Google» می‌توانند طرح کلی را براساس عنوان‌ها تولید کنند، اما مرورگرها هرگز این ساختار را پیاده‌سازی نکردند و الگوریتم طرح کلی پیشنهادی از مشخصات HTML حذف شد. درحالی‌که مرورگرها در گذشته عناصر <h1> تودرتو در عناصر بخش‌بندی را با اندازه قلم کوچک‌تر نمایش می‌دادند، مرورگرهای مدرن این سبک‌های پیش‌فرض را حذف کرده‌اند و از طرح‌بندی خودکار سند پشتیبانی نمی‌کنند.

اکنون دانش کافی برای طرح‌ریزی MachineLearningWorkshop.com را دارید:

طرح‌ریزی <body> از MLW.com

این طرح کلی محتوای قابل‌مشاهده سایت کارگاه یادگیری ماشین است:

As no piece of content is a standalone, complete piece of content, <section> is more appropriate than <article>; while each has a heading, no section is worthy of a <footer>.

تا اینجا دیگر نیازی به گفتن نیست، اما از عنوان‌ها برای پررنگ یا بزرگ کردن نوشتار استفاده نکنید؛ درعوض از CSS استفاده کنید. اگر می‌خواهید بر نوشتاری تأکید کنید، عناصر معنایی نیز برای انجام این کار وجود دارد. ما آن را پوشش خواهیم داد و بیشتر محتوای صفحه را هنگام بحث درباره اصول نوشتار پر خواهیم کرد؛ پس‌از اینکه عمیق‌تر به ویژگی‌ها پرداختیم.

میزان درک خود را بررسی کنید

دانش خود را درباره عنوان‌ها و بخش‌ها محک بزنید.

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

<heading>
دوباره امتحان کنید.
<header>
صحیح!
<title>
دوباره امتحان کنید.

چند عنصر <main> در صفحه مجاز است؟

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