HTML では記事タグはどのように機能しますか?

HTML タグの実装例

例 #7

결론

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML記事タグ

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:29 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML Article タグは、HTML5 の新版として導入されました。より具体的には、それらは記事を表すことがわかります。これは独立したデータとして指定されており、フォーラムの投稿、雑誌の出版物、ブログ、およびユーザーが有効にしたコメントで使用される可能性があります。

で表されます。タグ。さらに、Web ページ上でスタイリッシュな要素を定義することは、

と似ています。要素。この記事のタグは、Google Chrome、Opera、Internet Explorer、Edge のすべての種類のブラウザをサポートしています。これらは一般セクションのセクションタグとは異なりますが、スタンドアロンのコンテンツパーツとして機能します。

構文:

ここで、これらのタグ要素の直接の構文を見てみましょう。

<article>
<h1>…</h1>
</article>

ログイン後にコピー

開始タグの後に構造が続きます。直前のセクションには

があります。タグまたは

これは小見出しを形成し、コンテンツの正確な意味情報を提供し、より豊富で適切な意味のある情報を提供します。他のタグと同様に、この 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 では記事タグはどのように機能しますか?

このセクションでは、単純な記事タグ (ドキュメント内の自己完結型コンテンツ) について説明し、それが Web ページでどのように機能するかを見ていきます。 HTML 5 では、検索エンジンのコンテンツを充実させるために、新しいセマンティックコンテンツが導入されています。これらは、コンテンツのグローバル属性とイベント属性をサポートします。タグのコンテンツは、単一ページ上の他のコンテンツ部分から独立したドキュメントとみなされます。ページ上の記事名、著者情報、発行日を定義または実証できます。このタグは単一の要素として使用することも、複数の

要素として使用することもできます。要素。

単一のarticle要素を持つ文書は、文書の主な内容を説明します。複数の

の場合は、個別に固有の単一コンテンツを持ちます。タグ、ページにはさまざまなコンテンツがあります。別の言い方をすると、これらは

と同等です。要素。

の主な目的は次のとおりです。タグは、

の作業を軽減することで、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>

ログイン後にコピー

出力:

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>

ログイン後にコピー

以下の出力は、訪問者にリンクへのアドレスを含む Web ページを示します。

出力:

HTML記事タグ

例 #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>

ログイン後にコピー

出力:

HTML記事タグ

例 #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>

ログイン後にコピー

出力:

HTML記事タグ

例 #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>

ログイン後にコピー

出力:

HTML記事タグ

例 #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>

ログイン後にコピー

これは、関連コンテンツを含むあらゆるドキュメントの Web ページの見出しを含むグローバルヘッダーです。次に、が続きます。タグ。特定のウェブサイトのフッターにリンクし、フッターセクションに会社の詳細を提供することで SEO に役立ちます。最後に、

の本当の使い方を紹介します。タグは、ページの関連コンテンツを埋め込んだり、グループ化したり、別の方法で使用したりすることです。自律的な課制であると言える

。

出力:

HTML記事タグ

例 #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>

ログイン後にコピー

出力:

HTML記事タグ

결론

결론적으로 이 기사에서는 웹페이지에서 사용할 수 있는 몇 가지 가이드를 다룹니다. 단일 웹 페이지에 문서(스스로 감지) 또는 콘텐츠를 포함하는 데 탁월한 선택이며 HTML5에서 완벽한 의미 요소로 알려져 있습니다. 독립형 컨텍스트이기 때문에 최첨단 웹사이트에서 이 태그를 최대한 활용하기 시작하면서 html5에서 사용되었습니다. 블로그나 잡지와 같은 콘텐츠를 게시할 때 사용자로부터 좋은 보상을 받습니다.

以上がHTML記事タグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。