HTML5について指定していない場所のリンク設定を解除したい

実現したいこと

つい最近html,cssを勉強し始めた初心者です。
入門書を1冊一通り読んだ為、復習を兼ねた簡単なホームページ制作を行っています。

発生している問題

ulタグ(箇条書き)にリンクを踏ませるためにnavタグを付けました。
そのあと横並びにするため、CSSでfloat:left;を用いたところ、横並びにもなり、問題なくリンクも踏めるのですが、
箇条書きの下に記載している説明文やコピーライトまでリンク付きの文章になってしまいました。
(何も設定していないのにマウスを合わせるとクリックできるようになってしまいます)

最初はfloatが原因だと思い、入門書に沿ってclearfixを用いましたが効いていないのか改善されることはありませんでした。
その後CSSとの連携を切ったところ、症状が改善されなかった為、私の書いたHTMLに問題があると思われます。

該当のソースコード

HTML5
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<meta name="author"="munchen">
6<title>MaidInHeaven</title>
7<link href="TOP.css" media=all rel="stylesheet">
8</head>
9<div>
10<body>
11<main>
12<header>
13<font size="7">Maid In Heaven</font>
14</header>
15<img src="img20200729122623.jpg" alt="館" width="60%" height="30%">
16<h1>ようこそ。<ruby><rb>死の館</rb><rt>エンパイアクラブ</rt></ruby> へ</h1>
17
18<nav>
19<ul>
20<h1>
21<li><a href="TOP.html">TOP</li>
22<li><a href="Story.html">Story</li>
23<li><a href="Character.html">Character</li>
24<li><a href="Gallery.html">Gallery</li>
25</h1>
26</ul>
27</nav>
28<section>
29<h1>Infomation</h1>
30公式HPです。
31</section>
32</main>
33<footer>
34<p>Copyright 2020 Munchen.</p>
35</footer>
36</div>
37</body>
38</html>

試したこと

clearfix関連のサイトをいくつか見ましたが、解決になるような記事は見つかりませんでした。

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

ツールはwindowsのメモ帳で行っています。

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

回答1件

ベストアンサー

HTML記述ミスです。
CSSに移る前にまずは骨組みを修正しましょう。
気になることもあるのでそちらも記載しますね。

最初の<div>が<body>の外に出てしまっている
aタグにおける終了タグ</a>がない（最後までリンクが続いてるのはこれが原因）
mainタグはメインコンテンツを括るタグだと思われるのでその中にheaderタグを含めるのは違う
恐らくnavタグはheaderタグの中に含めるのが正しい解釈
fontタグは使わないようにしましょう

HTML5になってから追加された概念のタグは自分も曖昧なので参考程度に聞いて欲しいですが、
質問者さんのHTMLの骨組みを正しく組み替えると…

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<meta name="author"="munchen">
6<title>MaidInHeaven</title>
7<link href="TOP.css" media=all rel="stylesheet">
8</head>
9<body>
10	<header>
11		<h1>Maid In Heaven</h1>
12		<img src="img20200729122623.jpg" alt="館" width="60%" height="30%">
13		<p>ようこそ。<ruby><rb>死の館</rb><rt>エンパイアクラブ</rt></ruby> へ</p>
14		<nav>
15			<ul>
16				<li><a href="TOP.html">TOP</a></li>
17				<li><a href="Story.html">Story</a></li>
18				<li><a href="Character.html">Character</a></li>
19				<li><a href="Gallery.html">Gallery</a></li>
20			</ul>
21		</nav>
22	</header>
23	<main>
24		<article>
25			<h1>Infomation</h1>
26		</article>
27		<section>
28			<p>公式HPです。</p>
29		</section>
30	</main>
31	<footer>
32		<p>Copyright 2020 Munchen.</p>
33	</footer>
34</body>
35</html>