構文:
ここで、これらのタグ要素の直接の構文を見てみましょう。
<article> <h1 id="">…</h1> </article>
開始タグの後に構造が続きます。直前のセクションには
があります。タグまたは これは小見出しを形成し、コンテンツの正確な意味情報を提供し、より豊富で適切な意味のある情報を提供します。他のタグと同様に、この Article タグも、イベント属性や、適切なクラスのグローバル属性などの HTML 属性をサポートします。
の例タグ:
<article> <h1 id="Introduction-to-CSS-demo">Introduction to CSS demo</h1> <p>CSS is a cascading Style Sheet helps to make a web page visually colored</p> </article>
HTML では記事タグはどのように機能しますか?
このセクションでは、単純な記事タグ (ドキュメント内の自己完結型コンテンツ) について説明し、それが Web ページでどのように機能するかを見ていきます。 HTML 5 では、検索エンジンのコンテンツを充実させるために、新しいセマンティック コンテンツが導入されています。これらは、コンテンツのグローバル属性とイベント属性をサポートします。タグのコンテンツは、単一ページ上の他のコンテンツ部分から独立したドキュメントとみなされます。ページ上の記事名、著者情報、発行日を定義または実証できます。この タグは単一の要素として使用することも、複数の
単一のarticle要素を持つ文書は、文書の主な内容を説明します。複数の 以下は HTML タグの実装例です: 単一の コード: 出力: 属性 コード: 以下の出力は、訪問者にリンクへのアドレスを含む Web ページを示します。 出力: 例 を使用して日付と時刻を表示する方法を示します。 コード: 出力: 複数の記事を使用した例。以下のコードは、セマンティック要素 コード: 出力: を見てみましょう。タグは複数の コード: 出力: コード: これは、関連コンテンツを含むあらゆるドキュメントの Web ページの見出しを含むグローバル ヘッダーです。次に、 が続きます。タグ。特定のウェブサイトのフッターにリンクし、フッター セクションに会社の詳細を提供することで SEO に役立ちます。最後に、 出力: コード: 出力: 결론적으로 이 기사에서는 웹페이지에서 사용할 수 있는 몇 가지 가이드를 다룹니다. 단일 웹 페이지에 문서(스스로 감지) 또는 콘텐츠를 포함하는 데 탁월한 선택이며 HTML5에서 완벽한 의미 요소로 알려져 있습니다. 독립형 컨텍스트이기 때문에 최첨단 웹사이트에서 이 태그를 최대한 활용하기 시작하면서 html5에서 사용되었습니다. 블로그나 잡지와 같은 콘텐츠를 게시할 때 사용자로부터 좋은 보상을 받습니다.HTML タグの実装例
例 #1
<title>HTML Article Tag demo</title>
<article>
<h2 id="python">python</h2>
<p>Python is a new programming language</p>
</article>
例 #2
<title>Demo of article</title>
<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></article>
例 #3
<title>Demo of article tag</title>
<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></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 id="FEDERAL-HOLIDAYS-IN-USA">FEDERAL HOLIDAYS IN USA</h1>
<article class="day">
<h2 id="JAN">01 JAN 2020</h2>
<p>NEW YEAR DAY.</p>
<p> martin luther day </p>
</article>
<article class="day">
<h2 id="feb">18 feb 2020</h2>
<p>Presidents day.</p>
</article>
<article class="day">
<h2 id="May">05 May 2020</h2>
<h2 id="May">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 id="On-this-page">On this page</h1>
<p>Published on 15th DEC 2019</p>
</header>
<p>WELCOME</p>
<p> EXAMPLES TOPIC</p>
<p>ILLUSTRATION</p>
<section>
<h2 id="Related-topics">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>
例 #7
<title>Demo of article tag</title>
<main>
<article>
<h1 id="Cloud-computing-Basics">Cloud computing Basics</h1>
<p>Used for data storage.</p>
<section>
<h2 id="Basic-and-syntax-part">Basic and syntax part</h2>
<p>With an example.</p>
</section>
<section>
<h2 id="Types-of-cloud-computing-services">Types of cloud computing services</h2>
<p>Private , public , hybrid</p>
</section>
</article>
</main>
결론
