بررسی عناصر معنایی در HTML5 - قسمت دوم

عنصر <article>

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

عنصر <article> در واقع، جایگزین عنصر <div> می شود که به طور گسترده در HTML4 (همراه با یک id یا class) استفاده می شد.

<article>
    <h1>HTML</h1> 
    <p> HTML stands for Hyper Text Markup Language. It is the standard markup language for creating Web pages. HTML describes the structure of a Web page!</p>
</article>
<article>
    <h1>CSS</h1> 
    <p> CSS stands for Cascading Style Sheets. It is the language we use to style a Web page. CSS describes how HTML elements are to be displayed on screen, paper, or in other media</p>
</article>
<article>
    <h1>JavaScript</h1> 
    <p> JavaScript is the programming language of the Web. It is the world's most popular programming language. <p>
</article>

⚠️ هنگامی که یک عنصر <article> تودرتو است، عنصر داخلی نشان دهنده یک مقاله مرتبط با عنصر خارجی است. به عنوان مثال، نظرات پست وبلاگ می توانند عناصر <article> باشند که در <article> نشان دهنده پست وبلاگ هستند.

عنصر <section>

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

مطابق مستندات htm5 در هنگام استفاده از این تگ باید از تگ های heading که شامل h1 تا h6 هستند نیز استفاده نمایید. 

<article>
    <h1>HTML</h1>
    <section>
        <h1>HTML History</h1>
        <p>Since the early days of the World Wide Web, there have been many versions of HTML. …</p>
    </section>
   <section>
        <h1>HTML Page Structure</h1>
        <p>HTML consist of two main section, head and body. … </p>
    </section>
   <section>
        <h1>HTML Elements</h1>
        <p>An HTML element is defined by a start tag, some content, and an end tag</p>
    </section>
</article>

⚠️اگر می توانید به لحاظ معنایی، محتوای یک عنصر <section> را به طور جداگانه و مستقل به اشتراک بگذارید، به جای <section> باید از عنصر <article> استفاده کنید.

عنصر <aside>

<aside> یک محتوای ثانویه است که می تواند جدا از محتوای اصلی اما به طور غیرمستقیم مرتبط با آن در نظر گرفته شود. این نوع محتوا اغلب در نوارهای کناری نمایش داده می شود.

هنگامی که یک تگ <aside> در یک تگ <article> استفاده می شود، محتوای <aside> باید به طور خاص به آن article مرتبط باشد.

<article>
    <h1> Gifts for everyone</h1>
    <p>This website will be the best place for choosing gifts</p>
    <aside>
        <p>Gifts will be delivered to you within 24 hours</p>
    </aside>
</article>

⚠️ هنگامی که یک تگ <aside> خارج از تگ <article> استفاده می شود، محتوای آن باید با محتوای اطراف مرتبط باشد.

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