نحو
HTML <article> عنصر به صورت زیر استفاده می شود:
1 |
<article>
|
2 |
<!-- Content goes here -->
|
3 |
</article>
|
مثال
فرض کنید یک وبلاگ دارید و می خواهید مقاله ای در مورد فواید مدیتیشن بنویسید. در اینجا مثالی از نحوه ساختار HTML خود با استفاده از آن آورده شده است <article> عنصر:
1 |
<main>
|
2 |
<article>
|
3 |
<h2>The Benefits of Meditation</h2> |
4 |
<p>Meditation has been shown to reduce stress, improve focus, and boost overall well-being. This article will explore the many benefits of this ancient practice.</p> |
5 |
<img src="meditation.jpg"alt="A person meditating"> |
6 |
<h3>Reduced Stress</h3> |
7 |
<p>Studies have shown that meditation can lower cortisol levels, the hormone associated with stress. Regularly practicing meditation can reduce anxiety and make you feel more relaxed in your daily life.</p> |
8 |
<h3>Improved Focus</h3> |
9 |
<p>Through meditation, you can improve your ability to concentrate and stay focused on the task at hand. This can be especially helpful for those who struggle with distractions or have a busy mind.</p> |
10 |
<h3>Better Sleep</h3> |
11 |
<p>By quieting your mind and relaxing your body, meditation can help you fall asleep faster and enjoy a more restful sleep. It can also be effective in treating insomnia and other sleep disorders.</p> |
12 |
</article>
|
13 |
</main>
|
نتیجه
ویژگی های
این <article> عنصر فقط دارد یکی صفت: class. این ویژگی برای اعمال یک کلاس به عنصر استفاده می شود که می تواند برای استایل دادن به محتوا یا اعمال رفتار جاوا اسکریپت استفاده شود. در اینجا یک مثال است:
1 |
<article class="featured"> |
2 |
<!-- Content goes here -->
|
3 |
</article>
|
این featured کلاس به <article> عنصر در این مثال از این کلاس می توان برای استایل منحصر به فرد مقاله استفاده کرد، مانند برجسته کردن آن در صفحه.
محتوا
این <article> عنصر می‌تواند حاوی هر محتوای HTML، از جمله سرفصل‌ها، پاراگراف‌ها، تصاویر، ویدئوها و موارد دیگر باشد. محتوا باید مستقل باشد و بر یک موضوع یا ایده متمرکز باشد. هنگام استفاده از چندگانه <article> عناصر موجود در یک صفحه، درج یک عنوان در داخل هر یک تمرین خوبی است که می تواند خوانایی کلی محتوا را بهبود بخشد.
- چندین مورد دیگر وجود دارد بخش بندی عناصر مفید برای تقسیم محتوا در یک صفحه به روشی توصیفی:
<article>،<aside>،<form>،<header>،<footer>،<main>،<nav>، و<section>همه عناصر برش هستند.
آیا میدانستید؟
- این
<article>عنصر در HTML5 معرفی شد تا محتوای خود را از نظر معنایی علامت گذاری کند. - با استفاده از
<article>عنصر می تواند دسترسی و سئوی وب سایت شما را بهبود بخشد، زیرا به موتورهای جستجو و خوانندگان صفحه کمک می کند تا ساختار محتوای شما را درک کنند.
