HTML5でリンクを設定する方法

HTML

2018.08.302018.11.16

今回の記事は、別のページにリンク(アクセス)する方法をご紹介します。

サンプルのコードではリンク先として、当サイトのHTML記事一覧ページへアクセスしようと思います。

リンクを設定する方法

下記の表は、今回使用するタグになります。

今回使用するタグ一覧

<a>	指定した文字列にリンクを設定する
<p>	段落を付ける

段落をマークアップする

まず、<a>はインライン要素であるため、ブロックレベル要素で囲む必要があります。

そこでブロックレベル要素である<p>でマークアップし、任意の文字列を入力します。

サンプルコードでは、「HTMLの記事一覧ページへ」と入力しました。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>リンクを設定するサンプルコード</title>
</head>
<body>
<div>
<header>
<h1>ちからこぶ</h1>
</header>
	
<article>
<p>HTMLの記事一覧ページへ</p>
</article>
	
<footer>
<small>Copyright © ちからこぶ All Rights Reserved.</small>
</footer>
</div>
</body>
</html>

リンクをマークアップする

先程、入力した文字列の「記事一覧ページ」にリンクを設定します。

リンクを設定するには<a>でマークアップします。

属性値としてtitleを必ず付けるようにしましょう！ titleを付ける理由として、音声ブラウザで閲覧しているユーザ、クローラ(コンテンツの情報を収集しているコンピュータ)にリンク先の内容を伝えるためです。）

また、target=”_blank”という属性値をつけるとWEBブラウザの別タブで開く設定ができます。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>リンクを設定するサンプルコード</title>
</head>
<body>
<div>
<header>
<h1>ちからこぶ</h1>
</header>
	
<article>
<p>HTMLの<a href="https://chikara-kobu.com/curriculumcat/html/" title="HTMLの記事一覧ページへ" target="_blank">記事一覧ページ</a>へ</p>
</article>
	
<footer>
<small>Copyright © ちからこぶ All Rights Reserved.</small>
</footer>
</div>
</body>
</html>