menu
ホーム > HTML > article html 「自己完結の独立コンテンツ」

article html 「自己完結の独立コンテンツ」

article html 「自己完結の独立コンテンツ」 | wepicks!
HTML5

<article>

書式
<article>独立コンテンツ</article>

サンプル
<article>
<h1>ブログエントリータイトル</h1>
<p>本文・・・</p>
</article>

article の英語の意味は新聞や雑誌の「記事」、条約などの「条項」、品物、一品、などの意味があります。<article>タグ(<article>要素)は、その部分で「独立している」「自己完結」しているコンテンツを示します。

HTML article タグ(Tag)

<article>

種別ブロックレベル要素  
開始タグ必須終了タグ必須

HTML5<article>タグ(<article>要素)は、HTML5で新規に導入されました。

サポート

ChromeVer6.0~FirefoxVer4.0~
SafariVer5.0~OperaVe11.0~
Internet ExplorerVer9.0~HTMLVer5.0~

内容

article の英語の意味は新聞や雑誌の「記事」、条約などの「条項」、品物、一品、などの意味があります。<article> タグ(<article>要素)は、その部分で「独立している」「自己完結」しているコンテンツを示します。例えば、ブログの記事なのです。ブログの記事は、その記事で完結しているコンテンツです。投稿型サイト(フォーラムなど)の一つの投稿も当てはまります。ユーザーコメント、APIなどで取り込んだガジェットやウィジェットなど、 <article>タグ で扱うコンテンツになります。このような独立したコンテンツは、ウェブサイト内、あるページの文書内、アプリケーション内などで自己完結しているものです。

ウェブサイトの新着一覧ページや記事エントリー一覧ページでは、複数の記事が羅列します。これらの各記事は <article>タグ で囲んで扱うことが出来ます。

<article>タグ を入れ子(ネスト)にして扱う場合があります。その場合、入れ子の中の <article> で扱うコンテンツは、親 <article> で扱うコンテンツに関連があるものです。例えば、ブログ記事へのコメントなどは、ブログ記事を <article> で扱い、コメントを <article> の入れ子で扱います。入れ子の <article>タグ 中の <address>タグ(<address>要素)は、親の <article>タグ とは別で扱われます。<address>タグ は、対象のコンテンツの連絡先や著作者を示しますが、例えば、ページの

サンプルコード

– サンプル Click Here ! –

  • html tag
  • ブラウザ表示
  • html code

属性

グローバル属性

グローバル属性はすべての タグ要素)で使用可能な属性です。

属性タグ(要素)値について
accesskeyグローバル属性任意の半角英数字1文字
※大文字小文字区別
要素にアクセスキー(ショートカットキー)を割り当て、キーボード操作でアクティベート、または、フォーカスできるようにする。
書式
<タグ名 accesskey="">
値の例
半角英数字
autocapitalizeグローバル属性入力文字列の先頭大文字化
ユーザーによって入力/編集されたとき、入力文字列が自動的に大文字化されるかどうか、どのように行われるかを制御します。
書式
<タグ名 autocapitalize="">
値の例
off/none
on/sentences
words
characters
classグローバル属性クラス名
要素にクラス名を指定します。半角スペースで区切ることで複数のクラス名を指定できます。
書式
<タグ名 class="">
値の例
クラス名
contentEditableグローバル属性編集の 可・不可
要素の内容の編集が 可・不可 であるかを指定します。
書式
<タグ名 contentEditable="">
値の例
true
false
contextmenuグローバル属性コンテクストメニュー
menu要素のid属性の値
要素のコンテキストメニューを指定します。コンテキストメニューとして機能する menu要素 の ID を指定する属性です。
書式
<タグ名 contextmenu="">
値の例
data-*グローバル属性カスタムデータ属性
HTML要素にカスタム属性が添付し、要素にオリジナル拡張データを格納するための指定です。
書式
<タグ名 data-*="">
値の例
dirグローバル属性テキストの方向性
要素内テキストの文字方向を指定します。指定できる値は ltr (Left-To-Right) または rtl (Right-To-Left) です。
書式
<タグ名 dir="">
値の例
ltr
rtl
auto
draggableグローバル属性ドラックの 可・不可
要素のドラックを 可・不可 であるかを指定します。
書式
<タグ名 draggable="">
値の例
true
false
dropzoneグローバル属性種類と処理方法
要素をドロップ可能な領域として指定し、ドロップ時に種類としてファイル(file:)、テキスト(string:)、処理としてコピー(copy)、移動(move)、リンク(link)などを指定します。
書式
<タグ名 dropzone="">
値の例
string:copy
string:move
string:link
file:copy
file:move
file:link
hiddenグローバル属性要素非表示
要素を非表示に指定します。
書式
<タグ名 hidden="hidden">
<タグ名 hidden="">
<タグ名 hidden>
値の例
hidden
""
idグローバル属性id名
要素にid名を指定します。クラス名とは異なりid名の値はドキュメント中で一意の固有名とします。
特定の要素へスタイルを設定するために CSS と共によく使われます。この属性の値は一位でなければなりません。
書式
<タグ名 id="">
値の例
id名
itemidグローバル属性id名
要素に HTML Microdata(構造化データ)のアイテム(処理項目)の範囲が指定された場合に、itemtype属性 でデータの種類を指定しますが、さらに詳細の識別子がある場合、itemid属性 で指定します。
※HTML文書に構造化データとしての意味を持たせる属性群の1つです。item関連の属性を付与された要素では、Microdata として処理が可能で、他の言語などから抽出などの処理が可能になります。
書式
<タグ名 itemid="">
値の例
id名
itemrefグローバル属性itemref名
要素に HTML Microdata(構造化データ)のアイテム(処理項目)の範囲が指定された場合に、その範囲外との関連付けを指定します。通常は、itemscope属性 で指定した範囲内が対象となりますが、itemscope属性 で指定した範囲外で関連性のあるデータがある場合、itemref属性 で関連付けます。
※HTML文書に構造化データとしての意味を持たせる属性群の1つです。item関連の属性を付与された要素では、Microdata として処理が可能で、他の言語などから抽出などの処理が可能になります。
書式
<タグ名 itemref="">
値の例
itemref名
itemscopeグローバル属性itemscope
要素に HTML Microdata(構造化データ)のアイテム(処理項目)の範囲を示します。要素に itemscope属性 が指定されている場合、ここから Microdata を扱うという宣言にもなります。
※HTML文書に構造化データとしての意味を持たせる属性群の1つです。item関連の属性を付与された要素では、Microdata として処理が可能で、他の言語などから抽出などの処理が可能になります。
書式
<タグ名 itemscope="itemscope">
<タグ名 itemscope>
値の例
itemscope
itemtypeグローバル属性itemtypeの種類
要素に HTML Microdata(構造化データ)のアイテム(処理項目)の種類を示します。itemscope属性 で Microdata(構造化データ) の範囲を指定した場合に、データの種類を指定します。
※HTML文書に構造化データとしての意味を持たせる属性群の1つです。item関連の属性を付与された要素では、Microdata として処理が可能で、他の言語などから抽出などの処理が可能になります。
書式
<タグ名 itemtype="">
値の例
https://schema.org/Person
http://schema.org/WebPage
itempropグローバル属性itemprop名
要素に HTML Microdata(構造化データ)のアイテム(処理項目)のプロパティを指定します。itemscope属性 で Microdata(構造化データ) の範囲を指定した場合に、範囲内のデータのプロパティを指定します。プロパティにより、範囲内の各要素の詳細データ内容が識別できます。プロパティの意味は、 itemscope属性 と同時に指定してある itemtype属性 で指定した内容によって判断されます。
※HTML文書に構造化データとしての意味を持たせる属性群の1つです。item関連の属性を付与された要素では、Microdata として処理が可能で、他の言語などから抽出などの処理が可能になります。
書式
<タグ名 itemprop="">
値の例
itemprop名
langグローバル属性言語コード
HTMLドキュメントや要素の言語を指定します。en(英語)、ja(日本語)、zh(中国語)など
書式
<タグ名 lang="">
値の例
en
ja
nonceグローバル属性ワンタイムトークン(base64-value)
HTMLドキュメント内のスクリプトの実行の有無を指定します。コンテンツセキュリティポリシーCSP(Content Security Policy)に則ります。クロスサイトスクリプティング(XSS)などの攻撃からWebサイトを保護する仕組みの一環です。
書式
<タグ名 nonce="">
値の例
YmFzZTY0LXZhbHVl
slotグローバル属性割り当て名
要素に影のDOMを追加します。通常のDOMの裏に別のDOMを隠すことが出来ます。
書式
<タグ名 slot="">
値の例
slot割り当て名
spellcheckグローバル属性スペルチェックの有・無
要素の内容のスペルチェックの有無を指定します。
書式
<タグ名 spellcheck="">
値の例
true
false
styleグローバル属性プロパティと値でスタイルを指定
要素にスタイルを指定します。CSSプロパティとその値を指定します。「 ; (セミコロン)」で区切って複数のスタイルを記述することが出来ます。
書式
<タグ名 style="プロパティ:値;">
値の例
width:100%; margin:10px;
tabindexグローバル属性順序を指定する + - 整数値
Tabキーが押された時、要素がフォーカスさせる優先順位を指定します。ブラウザの設定より優先されます。
書式
<タグ名 tabindex="">
値の例
+ - 整数値
titleグローバル属性テキストで要素の補足説明
要素の補足情報を指定します。PC ブラウザーでは、マウスオーバー時にツールチップとしてその属性値が表示されます。
書式
<タグ名 title="">
値の例
補足情報
translateグローバル属性翻訳の有・無
要素の翻訳の有無を指定します。
書式
<タグ名 translate="">
値の例
yes
no

タグ(=記事関連ワード)

タグ: ,

日付

投稿日:2018年7月6日
最終更新日:2018年11月09日

このカテゴリの他のページ

menu-page

この記事へのコメント

トラックバックurl

https://wepicks.net/htmltag-article/trackback/

page top