元素。元素。此文章標籤支援所有類型的瀏覽器：Google Chrome、opera、internet explorer 和 Edge。它們與一般部分的部分標籤不同，而是充當獨立的內容部分。
標籤或
文法：
這裡讓我們來看看這些標籤元素的直接語法。
<article> <h1>…</h1> </article>
登入後複製
結構遵循開始標記。下一個前面的部分有
標籤或 它形成一個小標題，給出內容的準確語義信息，並提供更豐富、更合適的有意義的信息。與其他標籤一樣，此文章標籤也支援 HTML 屬性，例如事件屬性和對應類別的全域屬性。
<article> <h1>Introduction to CSS demo</h1> <p>CSS is a cascading Style Sheet helps to make a web page visually colored</p> </article>
登入後複製
文章標籤在 HTML 中如何運作？
本節將討論一個簡單的文章標籤（文件中的獨立內容）並了解它如何在網頁上運作。 HTML 5 引入了新的語意內容來豐富搜尋引擎中的內容。它們確實支援內容的全局和事件屬性。標籤的內容被視為獨立於單頁上其他內容部分的文件。他們可以在頁面上定義或展示文章的名稱、作者資訊和發布日期。這篇標籤可以用作單一元素和多個
具有單一文章元素的文件解釋了文件的主要內容。它具有單獨的獨特的單一內容，而在多個的情況下，它具有單獨的內容。標籤，一個頁面有各種內容；換句話說，它們與
等價。元素。 的主要目的是標籤的作用是透過減少
的工作來幫助 HTML 程式碼清理內容。元素。
實作 HTML 標籤的範例
以下是實作 HTML 標籤的範例：
範例#1
使用單一
代碼：
<!DOCTYPE html> <html> <head> <title>HTML Article Tag demo</title> </head> <body> <article> <h2>python</h2> <p>Python is a new programming language</p> </article> </body> </html>
登入後複製
輸出：
範例#2
一個範例說明如何使用屬性
與CSS樣式。它利用 CSS 在網頁瀏覽器中顯示良好。代碼：
<!DOCTYPE html> <head> <title>Demo of article</title> </head> <body> <article style="width: 200px; border: 1px solid black; padding: 8px; border-radius: 8px; margin:6px;"> <article> <address> Written by xxxxxx.<br> refer me at: <br> https://www.educba.com/ <br> </address> </article>
登入後複製
下面的輸出向訪客顯示了帶有連結位址的網頁。
輸出：
範例 #3
範例示範如何使用顯示日期和時間。
代碼：
<!DOCTYPE html> <head> <title>Demo of article tag</title> </head> <body> <article style="width: 200px; border: 1px solid black; padding: 8px; border-radius: 8px; color :green; margin:6px;"> <article class="blog_post"> <p>My first article post. Stay tuned</p> <footer> <p> Displayed on <time datetime="2019-12-24 20:00"> Dec 23</time> by tutor </p> </footer> </article>
登入後複製
輸出：
範例#4
使用多篇文章的範例。下面的程式碼使用語意元素
來指定 HTML 內容中最重要的標頭。
代碼：
<style>
.JAN {
margin: 1;
padding: .2rem;
background-color: #D2691E;
font: 2rem 'Fira Sans', sans-serif;
}
.JAN > h1,
.day {
margin: .4rem;
padding: .2rem;
font-size: 1rem;
}
.day {
background: border-box no-repeat
gray;
}
.day > h2,
.day > p {
margin: .2rem;
font-size: 1rem;
}
</style>
<article class="JAN">
<h1>FEDERAL HOLIDAYS IN USA</h1>
<article class="day">
<h2>01 JAN 2020</h2>
<p>NEW YEAR DAY.</p>
<p> martin luther day </p>
</article>
<article class="day">
<h2>18 feb 2020</h2>
<p>Presidents day.</p>
</article>
<article class="day">
<h2>05 May 2020</h2>
<h2>27 May 2020</h2>
<p>mothers day.</p>
<p>memorial day.</p>
</article>
</article>登入後複製
輸出：
範例#5
我們將看到標籤由幾個
代碼：
<style>
.art {
margin: 5;
padding: .3rem;
background-color: #DC143C;
font: 1rem 'italic', sans-serif;
}
</style>
<article class="art">
<section id="aim">
<p>[Main Objective]</p>
</section>
<section id="main_concept">
<p>[Content text]</p>
</section>
<section id="link page">
<ul>
<li><a href="tt.html">first link page</a></li>
<li><a href="th.html">second link page</a></li>
</ul>
</section>
</article>登入後複製
輸出：
範例 #6
代碼：
<article> <header> <h1>On this page</h1> <p>Published on 15th DEC 2019</p> </header> <p>WELCOME</p> <p> EXAMPLES TOPIC</p> <p>ILLUSTRATION</p> <section> <h2>Related topics</h2> <article> <footer> <p>published by Mark winston</p> </footer> <p>This was a great article</p> </article> <article> <footer> <p>Posted by: Casey Brock</p> </footer> <p>What do you think about the topics with the comments please</p> </article> </section> </article>
登入後複製
這是一個全域標題，其中包含任何具有相關內容的文件的網頁標題。接下來是標籤，連結到特定網站的頁腳，並透過在頁腳部分提供公司詳細資訊來有利於 SEO。最後，真正的使用
輸出：
範例#7
借助
代碼：
<!DOCTYPE html> <head> <title>Demo of article tag</title> </head> <main> <article> <h1>Cloud computing Basics</h1> <p>Used for data storage.</p> <section> <h2>Basic and syntax part</h2> <p>With an example.</p> </section> <section> <h2>Types of cloud computing services</h2> <p>Private , public , hybrid</p> </section> </article> </main>
登入後複製
輸出：
結論
總之，本文介紹了在網頁上使用的幾個指南。它們是在單一網頁中包含文件（它們自行感知）或內容的絕佳選擇，並且它們被認為是 HTML5 下的完美語義元素。作為一個獨立的上下文，它已在 html5 中使用，因為尖端網站已開始充分利用此標籤，用戶在發布部落格和雜誌等內容時會得到很好的回報。
