سرفصل ها و بخش ها

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

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

انتخاب عناصر مناسب برای کار در حین کدنویسی به این معنی است که دیگر نیازی به تغییر کد 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> است).

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

در این تصویر، دو پاورقی وجود دارد: یکی در <article> و دیگری در بالاترین سطح. پاورقیِ بالاترین سطح، یک نشانگر با نقش ضمنی contentinfo است. پاورقی دیگر نشانگر نیست. کروم آن را به صورت FooterAsNonLandmark نشان می‌دهد؛ فایرفاکس آن را به صورت 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، role و semantic)، aside مرتبط با محتوای اصلی می‌تواند در یک <aside> قرار گیرد؛ و مانند اکثر موارد، <aside> احتمالاً در یک نوار کناری یا یک کادر راهنما نمایش داده می‌شود. <aside> همچنین یک راهنما است، با نقش ضمنی complementary .

<article>

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

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

<section>

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

با بازگشت به مثال جاسیندا آردرن، در صفحه اصلی روزنامه، بنر شامل نام روزنامه و به دنبال آن یک <main> است که به چندین <section> تقسیم شده است که هر کدام دارای یک سربرگ هستند، مانند "اخبار جهان" و "سیاست"؛ و در هر بخش مجموعه‌ای از <article> را خواهید یافت. در هر <article> ، ممکن است یک یا چند عنصر <section> نیز پیدا کنید. اگر به این صفحه نگاه کنید، کل بخش "headers and sections" همان <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 Docs می‌توانند بر اساس سرتیترها یک طرح کلی ایجاد کنند، اما مرورگرها هرگز این ساختار را پیاده‌سازی نکردند. در حالی که مرورگرها سرتیترهای تو در تو را با اندازه فونت‌های کوچک‌تر نمایش می‌دهند، همانطور که در مثال زیر نشان داده شده است، در واقع از طرح کلی پشتیبانی نمی‌کنند.

اکنون دانش کافی برای تشریح MachineLearningWorkshop.com را دارید:

ترسیم <body> از MLW.com

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

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

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

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

دانش خود را در مورد سرفصل‌ها و بخش‌ها بیازمایید.

عنصری که برای قرار دادن قسمتی از سایت شما که شامل لوگو یا عنوان سایت و منوی اصلی است، استفاده می‌شود، چیست؟

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

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

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