Html　で画像が表示されないです

前提・実現したいこと

HTMLで画像が表示されず
エラーが見つかりません

html
1<!DOCTYPE html>  
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <title>HTML/CSSの学習</title>
6    <link rel="stylesheet" href="style.css">
7    <div id="header">
8        <h1><a href="index.html"><img id="corridor"><img src="corridor.jpg" alt="大学の廊下"></a></h1>
9    </div>
10    <style>
11        #header {
12            background-color: red;
13        }
14
15        #footer {
16            clear: both;
17            width: 100%;
18            padding:
19``` 3px 0 3px 0;
20            background: #39F;
21            color: #FFF;
22            font-weight: bold;
23            text-align: center;
24        }
25
26        .size {
27            height: 2000px;
28        }
29
30        .sort {
31            float: left;
32            margin-right: 10px;
33        }
34
35        div {
36            color: blue;
37        }
38
39    </style>
40    </head>
41
42  <body>
43
44    
45　　　　　 <div id="wrapper">
46</div>
47    <div class="sort">
48        Nav1
49    </div>
50    <div class="sort">
51        Nav2
52    </div>
53    <div class="sort">
54        Nav3
55    </div>
56
57
58    <div id="footer">
59        <p>&copy; 20xx ○○ All Rights Reserved.</p>
60    </div>
61
62  </body>
63</html>
64
65index.html
66```　です
67おかしい所を教えて下さい
68
69
70### 発生している問題・エラーメッセージ
71
72```html　の画像が表示されない
73エラーメッセージ

該当のソースコード

ソースコード　html

試したこと

ここに問題に対して試したことを記載してください。
人にある程度書いてもらったりしました

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

ここにより詳細な情報を記載してください。

m.ts10806

2020/04/25 05:46

コードはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

kei344

2020/04/25 05:47

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

m.ts10806

2020/04/25 05:48

また、「HTMLで画像が表示されない」は頻出です。原因も対応方法もほぼ出尽くしていて例外は無いと言って良いです。調べたこと試したことはあるのでしょうか。あと、自身は現在のコードをどれくらい把握しているのでしょうか。 https://teratail.com/help/question-tips#questionTips3-5-2

m.ts10806

2020/04/25 06:06

コードブロックは任意数設置できるのでファイル毎に対応すると確認しやすくなります。

galaxy1

2020/04/25 06:09

先ほど調べましたがterarailで、最新のものがなく参考にならなそうでした。コードは全然理解できていないレベルです。なので自習中です。どのようにファイルごとに対応できますか？コードブロックは任意数設置はどのようにできますか？宜しければ教えて下さい。

m.ts10806

2020/04/25 06:13

「コードブロック」とは言ってもそういう入力項目があるわけではなく、決まり決まった文字列を打って登録したら画面表示時に変換してくれているだけです。 ```言語名コード ``` これを任意の場所に書くだけです。（「言語名」「コード」はそれぞれ対象の言語名とコードに置き替えてください）

m.ts10806

2020/04/25 06:14

PCであれば編集画面の右側にプレビューが表示されるので見ながら調整すると良いです。

galaxy1

2020/04/25 06:16

分かりました

m.ts10806

2020/04/25 06:29

色々やってみてるようですが、「今の状態からなんとかする」より「１回一通り消してやり直す」ほうが早いと思います。慣れてない状態で「今の状態からなんとかする」を選択すると余計ぐちゃぐちゃになります。

galaxy1

2020/04/25 06:31

このまま行きます。

m.ts10806

2020/04/25 06:32

見づらいので遠慮しておきます。再現確認の手間が多すぎるので。

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

回答2件

<div>や<img>は<body>タグ内に移動してください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <title>HTML/CSSの学習</title>
7  <link rel="stylesheet" href="style.css">
8
9  <!-- <div>や<img>などは<body>タグに記述が必要 -->
10  <!--
11  <div id="header">
12    <h1><a href="index.html"><img id="corridor"><img src="corridor.jpg" alt="大学の廊下"></a></h1>
13  </div>
14  -->
15
16  <style>
17    #header {
18      background-color: red;
19    }
20
21    #footer {
22      clear: both;
23      width: 100%;
24      padding: 3px 0 3px 0;
25      background: #39F;
26      color: #FFF;
27      font-weight: bold;
28      text-align: center;
29    }
30
31    .size {
32      height: 2000px;
33    }
34
35    .sort {
36      float: left;
37      margin-right: 10px;
38    }
39
40    div {
41      color: blue;
42    }
43  </style>
44</head>
45<body>
46
47  <!-- <head>内ではなく、<body>内に移動 -->
48  <!-- <img id="corridor">は不要そうなので削除 -->
49  <div id="header">
50    <h1><a href="index.html"><img src="corridor.jpg" alt="大学の廊下"></a></h1>
51  </div>
52
53  <div id="wrapper">
54  </div>
55  <div class="sort">
56    Nav1
57  </div>
58  <div class="sort">
59    Nav2
60  </div>
61  <div class="sort">
62    Nav3
63  </div>
64
65  <div id="footer">
66    <p>&copy; 20xx ○○ All Rights Reserved.</p>
67  </div>
68
69</body>
70
71</html>