今回の記事は、別のページにリンク(アクセス)する方法をご紹介します。
サンプルのコードではリンク先として、当サイトの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>
実行結果
リンクの設定ができたら、実際にリンクをクリックしてみて別のページにアクセスできるかどうかやってみましょう!
クリックしてみた結果
別ページにアクセスできました!