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

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

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

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

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

سایت <header>

بیایید یک هدر سایت بسازیم. شما با نشانه گذاری غیر معنایی شروع می کنید و راه خود را به یک راه حل خوب می رسانید تا بتوانید مزایای بخش 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 قلاب‌هایی را برای استایل‌سازی و جاوا اسکریپت فراهم می‌کنند، اما هیچ ارزش معنایی برای صفحه‌خوان و (در بیشتر موارد) موتورهای جستجو اضافه نمی‌کنند.

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

<!-- 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>

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

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

مشابه <header> ، اینکه آیا پاورقی نقطه عطف است بستگی به جایی دارد که پاورقی تو در تو قرار گرفته است. هنگامی که پاورقی سایت باشد، نقطه عطفی است و باید حاوی اطلاعات پاورقی سایت باشد که در هر صفحه می خواهید، مانند بیانیه حق چاپ، اطلاعات تماس، و پیوندهایی به خط مشی های حفظ حریم خصوصی و کوکی شما. role ضمنی برای پاورقی سایت contentinfo است. در غیر این صورت، پاورقی نقش ضمنی ندارد و نقطه عطفی نیست، همانطور که در تصویر زیر از AOM در کروم نشان داده شده است (که دارای یک <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، نقش و معنایی)، کناره مرتبط مماسی را می توان در یک <aside> قرار داد. و مانند بسیاری از موارد، <aside> احتمالاً در یک نوار کناری یا یک جعبه فراخوان ارائه می شود. <aside> نیز یک نقطه عطف با نقش ضمنی complementary است.

<article>

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

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

<section>

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

به مثال Jacinda Ardern برگردیم، در صفحه اصلی روزنامه، بنر شامل نام روزنامه و به دنبال آن یک <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 Docs می توانند یک طرح کلی بر اساس سرفصل ها تولید کنند، اما مرورگرها هرگز این ساختار را اجرا نکردند. در حالی که مرورگرها همانطور که در مثال زیر نشان داده شده است، عناوین تو در تو را با اندازه فونت های کوچکتر نشان می دهند، در واقع از طرح کلی پشتیبانی نمی کنند.

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

تشریح <body> MLW.com

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

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

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

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

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