HTML入門② Link等の基本的な書き方

HTMLの宣言

<!DOCTYPE html>と記述することで、ブラウザにHTMLファイルであることを認識させます。コンテンツは、<html>タグの内部に記述します。

<!DOCTYPE html>
<html>
  <head>
    <title>
    </title>
  </head>
</html>

Linkの記述

<a>タグ

アンカータグ<a>のhref属性(hyperlink reference)にリンクを記述します。

<a href="https:yoshiaki-toyama.com"> Yoshiaki Toyama's blog </a>

新規タブで開く

リンクを新規タブで開く場合は、target属性に”_blank”を指定します。

<a href="https:yoshiaki-toyama.com" target="_blank"> Yoshiaki Toyama's blog </a>

index.htmlと同じフォルダ内のファイル

同じフォルダ内のHTMLファイルは相対パスでアクセス可能

<a href="./contact.html">Contact</a>

リンクを画像にする

リンクを画像とする場合には、<a>タグ内に<img>タグを記述します。

<a href="https://yoshiaki-toyama.com">
  <img src="Image.png" alt="My Website" />
</a>

ページ内リンク

自分が作成しているページの任意の場所に対して飛ぶリンクを作成する場合には、飛びたい先に対して<div>タグ等で任意のidを指定し、<a>タグのhref属性に#を付けてid名を記述します。

<ul> 
  <li><a href="#introduction">Introduction</a></li>
  <li><a href="#habitat">Habitat</a></li>
  <li><a href="#media">Media</a></li>
</ul>
<div id="introduction">
</div>

コメントアウト

HTMLのコメントアウトは下記のように記述します。

<!--コメントアウト-->