2016年4月21日(木)
アンカーリンク #HTML5&CSS3&JavaScript アンカーリンクとは、Webページ内で移動を可能にするハイパーリンクの一種です。
URI（アドレス）のファイル名の後に、#半角シャープ、アンカーテキストを入力します。
--
index.php#top
--
上記の場合、index.phpが表示され、自動スクロールして、topのアンカーリンクが最上部に表示されます。
あまり知られていないと思いますが、このアンカーリンクの記述方法が、HTML 4.01とHTML5では異なります。
--HTML 4.01--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1><a name="top">見出し</a></h1>
・
・
・
<a href="#top">見出しに戻る</h1>
</body>
</html>
--
--HTML5--
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1 id="top">見出し</h1>
・
・
・
<a href="#top">見出しに戻る</h1>
</body>
</html>
--
なお、HTML5では、<a>タグのname属性は id属性に置き換えられるべきものとして『廃止』ですが、空でない値の場合はエラーとせず警告に留めるとなっています。しかし、<a>タグにname属性とid属性を併記する場合、値が一致していなければなりません。現状、<a>タグにname属性だけ記述して、HTML 4.01様でも、ブラウザがちゃんと理解してくれています。
また、PHPファイルで、引数がある場合、引数の後に、アンカーリンクを指定します。
--
○index.php?year=2016&month=4#top
×index.php#top?year=2016&month=4
--
P.S. 実は、<a>タグのtarget属性は、HTML 4.01では非推奨でした。HTML5では正式採用になっています。
お問い合わせ