ブロックレベルのリンクを作成する

ブロックレベルのリンクを設定する

リンクをテキストの中（インライン）のみでなく、記事のようなタイトル、紹介文などがまとまった単位でリンクを設定することがあります。

例えば「WIRED」の記事一覧のように、記事の四角いエリアを一区画ごとにリンクとして設定するときなどです。
WIRED.jp

ある程度まとまった範囲でリンクが設定されていた方が、スマホなどのタッチデバイスで押しやすいことがあります。

HTML5の新しいカテゴリー分類

HTML5以前ではブロックレベル要素とインライン要素という区別があり、文法上の理由でインライン要素にブロックレベル要素を含むことはできませんでした。
そのため、文法の正しさを優先するとa要素の中にh1要素やp要素を入れることができないという難点がありました。

しかし、HTML5からはブロックレベル要素／インライン要素という括りではなく、次のような新しいカテゴリー分類が導入されています。

• メタデータコンテンツ (Metadata Content)
• フローコンテンツ (Flow Content)
• 見出しコンテンツ (Heading Content)
• 区分コンテンツ (Sectioning Content)
• 記述コンテンツ (Phrasing Content)
• インタラクティブコンテンツ (Interactive Content)
• 埋め込みコンテンツ (Embedded Content)
• 知覚可能コンテンツ (Palpable Content)

各要素はこのカテゴリーに属します。
複数のカテゴリーに属すことも多いです。

そして、a要素はこの中でフローコンテンツ、記述コンテンツ、インタラクティブコンテンツ、知覚可能コンテンツの4つに属します。
フローコンテンツに属するため、同じフローコンテンツや記述コンテンツを含むことができ、h1要素やp要素を含むことが可能になりました。

マークアップ例

記事一覧ページなどで、記事の一区画単位でリンクを貼っていくことを想定したマークアップ例をご紹介します。

リンクのマークアップ例

<h1>記事一覧</h1>
<article>
	<a href="#">
		<p class="date"><time datetime="2018-07-20">2018.07.20</time></p>
		<h2>記事タイトル1</h2>
		<p>記事の紹介テキスト1</p>
	</a>
</article>
<article>
	<a href="#">
		<p class="date"><time datetime="2018-07-18">2018.07.18</time></p>
		<h2>記事タイトル2</h2>
		<p>記事の紹介テキスト2</p>
	</a>
</article>
<article>
	<a href="#">
		<p class="date"><time datetime="2018-07-16">2018.07.16</time></p>
		<h2>記事タイトル3</h2>
		<p>記事の紹介テキスト3</p>
	</a>
</article>
<article>
	<a href="#">
		<p class="date"><time datetime="2018-07-14">2018.07.14</time></p>
		<h2>記事タイトル4</h2>
		<p>記事の紹介テキスト4</p>
	</a>
</article>
<article>
	<a href="#">
		<p class="date"><time datetime="2018-07-12">2018.07.12</time></p>
		<h2>記事タイトル5</h2>
		<p>記事の紹介テキスト5</p>
	</a>
</article>

HTML5以前はdisplayプロパティを使ってブロックレベル要素にしたりしていましたが、HTML5のページであればそのような調整は不要です。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。