HTMLで画像つきのリンクを貼った次の文章にもリンクが貼られてしまう

前提・実現したいこと

今、HTMLの自主学習を行っています。
まだ、自主学習を始めてから数時間しか経っていないのでこんな簡単な事と思われるかもしれませんが、よろしくお願い致します。

実現したい事は画像つきのURLのコードを作成した次の行をリンク先を指定するテキストにするのではなく、通常の文章にしたいです。

該当のソースコード

<!DOCTYPE html>
<html>
<head>
<title>練習中だよ</title>
<meta charset="UTF-8">
</head>
<body>
<h1>楽しく作ってみよう</h1>
<p>練習中</p>
<h2>表示の確認をしてみる</h2>
<p>試し書き</p>
<p>試し書き2</p>
<p>試し書き3</p>
<p>試し書き4</p>
<p>踏んでみて↓</p>
<p>
<a href="https://reidaiURL.com/">
<img src="https://reidaiURL.com/wp-content/uploads/0000/00/IMG.jpeg" alt="画像のテキスト" />
</a>
</p>
<ul>
<li>一つ目の項目</li>
<li>二つ目の項目</li>
<li>三つ目の項目</li>
</ul>
<ol>
<li>四つ目の項目</li>
<li>五つ目の項目</li>
<li>六つ目の項目</li>
</ol>
<p>
<ul>
<li>おはよう</li>
<li>こんにちは</li>
<li>こんばんは</li>
</ul>
</p>
<p>これは
例です</p>
<p>ここで<br>改行します。</p>
<a target=_blank href="http://www.reidaiURL.co.jp/">
<img src="C:\rei\reidaiURL\Downloads\練習.PNG" alt="例題" />
</body>
</html>

最後のコードの下に文章を入れるとその文章にURLが貼られてしまいます。

<p>これは
例です</p>
<p>ここで<br>改行します。</p>
<a target=_blank href="http://www.reidaiURL.co.jp/">
<img src="C:\rei\reidaiURL\Downloads\練習.PNG" alt="例題" />
<p>こんにちは</p>
</body>
</html>

最後の文の"こんにちは"にURLが設定されてしまいます。

試したこと

<br>タグを入れてみたりしましたが、改行がされるだけで結果は変わりませんでした。

<p><br>こんにちは</p>
</body>
</html>

補足情報（FW/ツールのバージョンなど）

使用テキストエディタはサクラエディタです。

サクラエディタでコードを書いて保存をしてブラウザにhtmlがウェブページに表示をさせて学習を行っています。

行動規範の内容に同意します

回答1件

ベストアンサー

閉じタグ</a>が必要です。

html
1<p>これは
2例です</p>
3<p>ここで<br>改行します。</p>
4<a target=_blank href="http://www.reidaiURL.co.jp/">
5<img src="C:\rei\reidaiURL\Downloads\練習.PNG" alt="例題" />
6</a><!-- これを追加 -->
7<p>こんにちは</p>
8</body>
9</html>

こうしないと、どこまでがリンクかわからないですよね。
文章の場合も同じです。

html
1文章の途中の場合aに囲まれた<a href="example.html">ここがリンクになります</a>ので、前後の文章はリンクになりません。

あとここも、ダブルコーテーション"が足りません。
<a target=_blank href="http://www.reidaiURL.co.jp/">
↓
<a href="http://www.reidaiURL.co.jp/" target="_blank">
※個人的にhrefを先にしておきたいため順序も変更してあります

投稿2018/07/23 02:56

編集2018/07/23 03:04

dit.

総合スコア3235

HISUI

2018/07/23 04:07

dit.さんのご指摘どおりに閉じタブを追記したら私が実現したい通りに表示が出来ました。 alt="例題" />で閉じタブが出来ていると勘違いをしてしまったのが原因だと思います。ありがとうございます。別タブで開くコードについて、サイトで調べた時にどこに書けば出来るのか記載がなかったので前に書いたら出来たので放っておいたのですが、dit.さんのような書き方もあるのですね! とても勉強になりました。ありがとうございました。

dit.

2018/07/23 04:41

まだ勉強を始められたばかりだということなのでざっくり説明すると、HTMLはほとんどのタグが開始タグと終了タグでできています。印をつける言語（マークアップ言語）なので、ここからここまでが○○ですよと書いてあげる必要があります。 <h1>これは大見出しです</h1> <p>ここは段落ですよ</p> <a href="#">ここがリンクです</a> 区切り線<hr>や改行<br>、画像<img>等はそれだけで完結するため終了タグがありません。ただし、XHTMLでの記述の場合閉じタグが必要だったため、<br />のような書き方になりました。そのため、<img src="C:\rei\reidaiURL\Downloads\練習.PNG" alt="例題" />の最後のスラッシュは<a>の閉じタグではなく<img>の閉じタグ（の代わり）です。 <!DOCTYPE html>と宣言しているのでHTML5での記述で問題ないと思います。その場合<img src="C:\rei\reidaiURL\Downloads\練習.PNG" alt="例題">と、最後のスラッシュはなくてかまいません。このあたりの質問を読んでみてもいいかなと思います。 https://teratail.com/questions/27157 詳しい方が説明してくれてます。 targetについては、_blankを正しく"で囲ってあげれば順番は問題ないかもしれませんが、以前何かで不具合があった気がして、先に書くことはしていないです。理由をはっきり思い出せませんが…。

HISUI

2018/07/23 07:00

わざわざ、細かい説明までしてくださり、ありがとうございます。 HTMLを学ぶにあたり、歴史をざっくりとですが調べていましたがXHTMLはHTMLの前身程度の認識しかありませんでした。自分なりにもう少し勉強をしてHTMLへの理解を深めたいと思います。とても親切に細かく教えてくださりありがとうございました。

行動規範の内容に同意します