HTMLとは最初に書いたようにHyperText +Markup Languageの略で2つの意味が組み合わさった言葉です。

前記事ではそのうち主にMarkup Languageに関係したタグを簡単に紹介しました。

HTMLの勉強で押さえておくべきこと①Markup Languageとして使われるタグ

今記事ではでHyperText に関するタグを説明したいと思います。

目次

HTMLリンクダグ

HTMLをでは様々なリンクを貼ることができます。

別ページへ飛ばすリンクはもちろんのこと画像・動画・音声などのデータファイルを呼び出すリンクなどで。
それらをテキストの中に埋め込むことができます。
それによって記事中に画像・動画・音声を載せることができ。
ビジュアルな構成を実現することができます。

ただそれらには別々のタグが割り当てられています。

href

例えばトップページに飛ぶようにリンクを貼りたいと思えば。

<a href=”リンクしたいページのURL”>～</a>という形で埋め込みます。

「href」は「aタグ」とセットで使われますから。
「a href」（アンカーエイチレフ）の形で使われます。

意味ですが。

aタグは以下はリンクだよ、という目印になるもので。
aタグの次にはどんな種類のリンクかな？ということを表す属性タグが続きます。

hrefは別ページに飛ばすリンクを指定するタグです。
hrefはhypertext referenceの略で「ハイパーテキストの参照」という意味です。

書き方ですが。

<a href=””>~</a>ではさみます。リンク先のURLは開始タグの中にhref=”リンク先のURL”という形で書きます。

つまりhrefはべつのURLのページに飛ばすハイパーリンクですよ、ということをコンピューターにわからせる。
ハイパーテキスト上で参照機能として用いられる属性だということを示しています。
新しいタブでトップページが開かれるようにリンクを作ろうと思ったら。
エディタに以下のように書いて埋め込みます。
<a href=”https://maliajoy.com/” target=”_blank” rel=”noopener”>サイトのトップページ</a>

” target=”_blank”

target 属性とはリンク先の文書を開くフレームやウインドウを指定するための属性です。
_blankは新しいページにリンクページを開く場合に入れますが、非常に脆弱だと言われていて。
ここからフィッシング詐欺などの攻撃を受ける場合もあり得るとのことです。
詳しいフィッシング詐欺の例はこのサイトなんかに詳しいです。

そのためtarget=”_blank”にはrel=”noopener”をつけ加えてその脆弱性をカバーします。

relは「relation（関係）」の略です。
つまり「linkタグが書かれているページ（現ページ）とhrefで指定しているページ（リンク先ページ）との間で、
どのような関係があるのかを示します。

その関係がnoopener（関係ありません）であるというわけですね。

「サイトのトップページ」と書かれた部分はウェブ上に表記される文字です。
以下のように文字にリンクが貼られますので文字部分をクリックするとしてのページに飛びます。

サイトのトップページ

文字でなくて画像にリンクを貼ることもできます。その前に画像を呼び出す画像のハイパーリンクの属性を見ていきます。

img

例えば以下のように記述をすると
<img class=”aligncenter” src=”https://maliajoy.com/wp-content/uploads/2019/04/ce1a44f4d7a21b893589bff220c7939c.gif” alt=”” width=”300″ height=”300″ />
以下のように画像が記事内に表示されます。

imgタグは画像を呼び出すためのHTMLタグの一つですが。
画像を表示させるためにはパスと呼ばれる画像の「住所」を指定する必要がありますので。
位置を表す「src属性」(srcは、sourceの略でエスアールシー属性と呼ばれます。)が必要です。

img src=”画像が格納されている場所(path)”

今はワードプレスを使っていますから そこを見てみると
https://maliajoy.comというサイトの中にあるwp-contentの中に入っている2019/04/にuploadsされたce1a44f4d7a21b893589bff220c7939c.gif

ですよ、と格納場所が示されています。

/は「～の中に」という意味です。

「alt属性」(altは、alternativeの略で、オルト属性と呼ばれます)はalt=”ここに画像の説明がなされます”
と文字を入れることで代替テキストとなり。
画像が何らかの事情で表示されなかった際に代わりに表示されます。

（正常に画像が表示される場合にはテキストは表示されません）

見えないのになぜ表記するかというと、様々な理由で画像を表示せずに記事をみる方もいるため、
alt属性を入れた方がそういう方がには親切だからです。
そしてSEO的にも有利です。
というのも検索エンジンは、画像の情報を読み取ることはできませんがそのかわりalt属性を読み取り、文章で使われたキーワードは、検索対象となります。

もしカーソルを当てて文字が表示されるようにしたい場合には、
<img alt=”link” title=””/>

とタイトルタグを加えて、そこに例えば「まりちゃんGIF」と入れます。

<img class=”aligncenter” src=”https://maliajoy.com/wp-content/uploads/2019/04/ce1a44f4d7a21b893589bff220c7939c.gif” alt=”まりちゃんGIF” title=”まりちゃんGIF”/>width=”300″ height=”300″ />
と記述するとたしかにカーソルを当てると「まりちゃんGIF」というテキストが表示されます。

width=”300″ height=”300″

は幅と高さを決めています。
imgではそれ以外にpadding：要素の内側の余白とmargin：要素の外側の余白という余白についての設定もできます。

ちなみにimgは終了タグがありませんので。</img>はつけません。

なおclass=”aligncenter”は画像をセンターに持っていくためにつけたものですがCSSなので今回はパス。

video

ハイパーテキストには動画へのリンクもあります。

ifarmeタグとvideoタグがありまして。YouTubeの動画はifarmeタグを使っていますが。
ifarmeタグは廃止の方向に行くということなので。
videoタグが使えるようになっていれば良いと思います。

以下のように記述してみました。
<video controls autoplay loop><source src=”動画/fireworks.mp4″ width=”300″ height=”150″></video>

controls autoplay loopはcontrols属性でインターフェースを表示します。
controlsはコントロールパネルを表示させます。
autoplay属性を指定すると、ウェブページを読み込んだ時点で、動画が自動再生されますし
loop属性を指定すると繰り返し再生されます。

一番うしろにあるwidth=”300″ height=”150″は幅と高さを指定しています。

詳しくは以下の記事などを参照してください。

HTMLで動画や画像を埋め込みする方法を詳説

こんなふうにハイパーテキストは様々な種類があって
それらを使うことによってビジュアルで使いやすいページを作ることができます。

以上でハイパーリンクで使うタグの基本の解説は終わりです。

前記事とこの記事だけでHTMLについては最低限のことが身につくと思います。
この記事を土台にして次からCSSの学習に入りたいと思います。