aタグの使い方について解説！下線を簡単に消す方法を解説

aタグについて

aタグは、ハイパーリンクとして扱われ<a>〜</a>タグで囲われた場所がリンクをするという指定になります。 また「a」はAnchor（アンカー）の略でリンクテキスト(アンカーリンク)するという意味です。
aタグで囲むとテキストだけでなく、画像や動画でのリンク設定、zipデータやpdfファイル等のダウンロードリンクの設定も出来ます。 また「#」を使用することで同ページ内での遷移も可能です。

href属性

href部分はクリックした際の「指定のリンク先（ジャンプ先）」のアドレス(URL)を指定します。
その他にも以下のような特殊指定も設定いただけます。

・「mailto:」メールの送信先を指定例

・「javascript:」JavaScriptの処理例

rel属性

このaタグのリンクと飛び先の関係性を記述します。
「rel属性」に設定するnoopener/nofollow/noreferrerはSEOにも関わってくるため重要な設定となります。

target属性

aタグのリンク設定時にどのウィンドウやタブ、フレームでリンク先を開くかを指示することができます。
target属性がない場合は現在表示されているウィンドウ（タブ）で開きます。（ブラウザ側設定に準じます。）

「_self（初期値）」現在のウィンドウに開く

「_blank」新しいウィンドウで開く

「_parent」親フレームに開く

「_top」フレームを解除して現在ウィンドウにリンク先を表示

aタグの下線を消す方法のテクニック集

aタグの下線を消す方法など明日から使えるちょっとしたテクニックをご紹介します。
cssを使用していますが、全てコピペで使えるので是非使ってみてください。
※aタグ全体にかけているので使用に応じて適宜書き換えて下さい。

aタグの下線を消す方法

下線を消す・付ける

<style>
a{
    text-decoration: none;
}
</style>
<a href="#">リンク先へ移動</a>

<style>
a{
    text-decoration: under;
}
</style>
<a href="#">リンク先へ移動</a>

最初は下線を消しておき、:hoverを使用してマウスカーソル乗せたときに線が出るようにする

<style>
a{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
</style>
<a href="#">リンク先へ移動</a>

.a-btn{
    display: block;
    text-align: center;
    color: #fff;
    background: #f15339;
    max-width: 250px;
    border-radius: 4px;
    padding: 10px 10px 8px;
    box-shadow: 0 3px 0 #a0311f;
    position: relative;
}
.a-btn:hover{
    text-decoration: none;
    box-shadow: none;
    top: 3px;
}
<div class="relative">
    <a href="#">ボタン風リンク</a>
</div>