HTMLの基本タグに続いて、「属性」を学びました。属性を使うことで、タグに追加の情報を与えることができます。
リンクを作成：<a>要素
<a> 要素は、他のページへのリンクを作成するタグです。
<a>クリックしてください</a>
しかし、これだけではリンク先が指定されていません。
href属性：リンク先を指定
リンクの飛び先を指定するには、href属性を追加します。
構文: <a href="URL">リンクテキスト</a>
<a href="https://www.example.com">サンプルサイトへ</a>
href は「エイチレフ」と読みます（HyperText REFerenceの略）。
属性の書き方
属性は、開始タグの中に記述します。
基本構文: <タグ名 属性名="値">内容</タグ名>
<a href="https://www.google.com">Googleへ</a>
ポイント
- 属性は開始タグの中に書く
- 値の指定はダブルクォーテーション
"で囲む - 属性はタグによって使えるものが決まっている
属性は数多くある
HTMLには、様々な属性があります。
<!-- リンクを新しいタブで開く -->
<a href="https://www.example.com" target="_blank">新しいタブで開く</a>
<!-- 画像に代替テキストを指定 -->
<img src="image.jpg" alt="風景写真">
<!-- 入力欄にプレースホルダーを表示 -->
<input type="text" placeholder="名前を入力">
どの属性が使えるかは、タグによって異なります。
画像の表示：<img>要素
<img> 要素は、画像を表示するタグです。
<img src="photo.jpg">
src属性：画像のパスを指定
画像の場所を指定するには、src属性を使います。
構文: <img src="画像のパス">
<img src="cat.jpg">
<img src="images/dog.png">
<img src="https://example.com/photo.jpg">
src は「ソース」と読みます（sourceの略）。
<img>要素の特徴：終了タグ不要
<img> 要素は、テキストを囲む必要がないので、終了タグは不要です。
<!-- 正しい -->
<img src="photo.jpg">
<!-- 間違い（終了タグは不要） -->
<img src="photo.jpg"></img>
このように終了タグが不要な要素を「空要素」と呼びます。
実用例：リンクと画像の組み合わせ
<h1>私のサイトへようこそ</h1>
<p>詳細は<a href="about.html">こちら</a>をご覧ください。</p>
<img src="banner.jpg">
<p>お問い合わせは<a href="contact.html">こちら</a></p>
alt属性：画像の説明
<img> 要素には、alt属性（代替テキスト）を付けることが推奨されます。
<img src="cat.jpg" alt="かわいい猫の写真">
alt属性は：
- 画像が表示できないときに代わりに表示される
- 視覚障害者向けの読み上げソフトで使われる
- SEO（検索エンジン最適化）にも役立つ
複数の属性を指定
1つの要素に、複数の属性を指定することもできます。
<a href="https://www.example.com" target="_blank" rel="noopener">外部サイト</a>
<img src="photo.jpg" alt="風景写真" width="300" height="200">
属性は半角スペースで区切ります。
今日の学びのポイント
- 属性: タグに追加情報を与える
- href属性: リンク先を指定（エイチレフ）
- src属性: 画像のパスを指定（ソース）
- 属性は開始タグの中に記述
- 値はダブルクォーテーション
"で囲む <img>要素は終了タグ不要（空要素）- alt属性で画像の説明を追加（推奨）
属性を使いこなすことで、HTMLの表現力が大きく広がります。
コメント