【HTML】「a」タグ - 色々なリンクの作り方

<a href="https://example.com">Website</a>
<a href="mailto:m.bluth@example.com">Email</a>
<a href="tel:+123456789">電話リンクテキスト</a>
<a href="#ID名">リンクタイトルテキスト</a>
<a href="./ディレクトリ名/ファイル名.jpg" download="ダウンロードされる時につけられるファイル名">Click Here fo Download</a>


おまけですが、「button」タグでもリンクが作成可能。

<button onclick="location.href='リンク先URL'">テキスト</button>

HTML5の書式

<a href="#ID名">リンク元のタイトル</a>
↓
<h1 id="ID名">ページ内リンク先のタイトル</h1>

今までの書式

<a href="#リンク先の名前">リンク元のタイトル</a>
↓
<a name="リンク先の名前"></a> <h1">ページ内リンク先のタイトル</h1>

<a href="./ディレクトリ名/ファイル名.jpg" download="ダウンロードされる時につけられるファイル名">Click Here fo Download</a>
<a href="./ディレクトリ名/ファイル名.jpg" download="ダウンロードされる時につけられるファイル名" as="image">Click Here fo Download</a>

<a href="mailto:m.bluth@example.com">Email</a>

<a href="tel:+(電話番号)">リンクを張るテキスト</a>
<a href="tel:+123456789">+12 345 6789</a>
<a href="tel:+1(2345)6789">(2345)6789</a>

「MDN」のWebDocに掲載されていたサンプルコード。
「こういう使い方もあるのか」と、
使えそうだったので、そのままメモさせてもらってます。

「canvas」エリアで、
マウスボタンを押しっぱなしにして動かすと描画できて、
その画像をそのまま「PNG」ファイルとしてダウンロードが簡単にできる。

これは便利。

HTML

<p>
<a href="" download="my_painting.png">絵をダウンロード</a>
</p>
<canvas width="300" height="300"></canvas>

CSS

html {
font-family: sans-serif;
}
canvas {
background: #fff;
border: 1px dashed;
} a {
display: inline-block;
background: #69c;
color: #fff;
padding: 5px 10px;
}

JavaScript

var canvas = document.querySelector('canvas'),
c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

function draw(x, y) {
if (isDrawing) {
c.beginPath();
c.arc(x, y, 10, 0, Math.PI*2);
c.closePath();
c.fill();
}
}

canvas.addEventListener('mousemove', event =>
draw(event.offsetX, event.offsetY)
);
canvas.addEventListener('mousedown', () => isDrawing = true);
canvas.addEventListener('mouseup', () => isDrawing = false);

document.querySelector('a').addEventListener('click', event =>
event.target.href = canvas.toDataURL()
);