• HTML&CSS超基礎講座

HTML04 リンクの設定・属性と属性値の書き方(7分3秒)

リンクの設定・属性と属性値の書き方

今回は、リンクを設定するための記述と属性と属性値の書き方について解説しています。

概要

  • リンクの設定のための記述
  • HTML要素の持つ「属性」と「属性値」の書き方

補足・ポイント

リンクタグ

テキストや画像にリンクを設定するには、aタグを使用します。

aは、anchor (アンカー 錨)の頭文字です。

リンクを設定したいテキストや画像をaタグで挟みます。

aの持つhref属性に、リンクの飛び先であるURL(インターネット上のURLやファイルの位置情報)を記述します。

href属性は、ハイパーテキスト(Hypertext:HTML文書)の参照先という意味です。

<a href="http://www.yahoo.co.jp/">Yahoo!Japanのサイトへ</a>
<a href="sample.html">次のページへ</a>

属性と属性値の書き方

属性と属性値の書き方

aタグの後ろに、半角スペースを挟んでhref=”sample.html”と記述されています。

このhrefが属性でsample.htmlが属性値になります。

属性と属性値を記述するときには、開始タグの要素の後ろに、半角スペースをはさみ、属性を記述し、属性の文字列の後ろに=を付け、属性値の文字を””で囲みます。

属性が2つ以上ある場合には、半角スペースを空けて、属性と属性値を記述します。

属性が2つ以上ある場合

動画で解説しているソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの練習です!</title>
</head>
<body>
<h1>リンクの設定</h1>
<hr>
<h2>インターネット上のWebサイトへのリンク</h2>
<p><a href="http://www.yahoo.co.jp/">Yahoo!Japanのサイトへ</a></p>
<h2>同じフォルダ内のファイルへのリンク</h2>
<p><a href="sample.html">次のページへ</a></p>
</body>
</html>

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

TwitterでWebcreatorsTipsをフォローしよう!

この記事をシェアする



まずは無料のWebデザインメルマガ講座から体験してみよう!

登録作業はわずか10秒!
パソコン・スマートフォン・タブレットでWebデザインのスキルがアップするメルマガを無料で受信できます!

【メールマガジン登録フォーム】
お名前(姓)*
お名前(名)*
メールアドレス*
  • Webデザイン講座
  • レスポンシブWebデザイン作り方講座
  • Webデザインまとめサイト

PAGE TOP