ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

article要素

<article>の使い方

<article>は、ブログの記事や特集記事のように、その文章やコンテンツだけが独立していても意味が通るような箇所を示す要素です。
例えば以下のようなソースコードがあるとします。

<h1>h1テキスト</h1>
<p>テキストテキスト</p>

<h2>h2テキスト</h2>
<p>テキストテキストテキストテキストテキスト</p>

<h2>h2テキスト</h2>
<p>テキストテキストテキストテキストテキスト</p>

<h2>h2テキスト</h2>
<p>テキストテキストテキストテキストテキスト</p>

これに<article>を追加すると、以下のようになります。

<article>
<h1>h1テキスト</h1>
<p>テキストテキスト</p>

<section>
<h2>h2テキスト</h2>
<p>テキストテキストテキストテキストテキスト</p>
</section>

<section>
<h2>h2テキスト</h2>
<p>テキストテキストテキストテキストテキスト</p>
</section>

<section>
<h2>h2テキスト</h2>
<p>テキストテキストテキストテキストテキスト</p>
</section>

</article>

それぞれの<h2>と<p>の文章が<section>で囲まれ、さらに<h1>の<article>が全体を囲んでいます。
ちなみに、このソースコードは機械から見ると下画像のように見えています。

ホームページの画像

<section>と似ていますが、<article>を使う場合は基本的に「独立しても意味が通るような部分」に使います。
ブログの記事部分であったり、特集記事、他に何もなくてもそれだけで1つのコンテンツと見なされる箇所に用います。

覚えておきたいポイント

見出しが必要

<article>は、「独立していても意味が通る」箇所に使用します。
例えばブログの記事部分であったり、特集コンテンツなどが該当します。
ヘッダーやフッター、サイドナビ、他のコンテンツとの関係性は薄いが、そこだけで意味の通る・ 自己完結する場合に<article>を使います。

nav要素
« 前のページへ section要素

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。