h1～h6タグについて

<p>Webコーダーとして働くまで知らずに、ただのタイトルのタグで私は以下のように覚えており、使っておりました。</p>
<ul>
<li>どのタグも何回も使って良い。</li>
<li>フォントサイズやフォントの太さがこの順になっていて、h1>h2>h3>h4>h5>h6、メインタイトル>サブタイトルみたいに覚えていた。</li>
</ul>

<p>正しくは以下の通り、ルールがあります。皆さんも参考にしていただければと思います。</p>

<h2>【h1～h6タグのルール】</h2>
<p><strong>h1</strong>：ページのタイトル、複数利用できない</p>

<p><strong>h2</strong>：各項目のタイトル、複数利用できる</p>

<p><strong>h3</strong>：各項目のサブタイトル、複数利用できる</p>

<p><strong>h4</strong>：コンテンツ内の見出し、複数利用できる</p>

<p><strong>h5</strong>：コンテンツ内のサブ見出し、複数利用できる</p>

<p><strong>h6</strong>：一番見出しの中で小さい、複数利用できる、h6以下はあまり使わない</p>

<h3>練習問題</h3>
<p>メモ帳でも作成可能ですが、フリーソフト：サクラエディタですと行番号も振られており、見やすいので、ぜひインストールして利用してみてください。表示されているか確認は、既存ブラウザにて確認してください。</p>
<p><strong>サクラエディタ</strong></p>

https://sakura-editor.github.io/help/HLP000112.html

<p><strong>ブラウザ：chrome、edgeなど</strong></p>
<h4>練習問題①</h4>
<p>以下の内容をわかりやすく表記せよ。</p>
<p>【例】<br>
タイトル：私の大好きなもの<br>
サブタイトル：好きな果物<br>
私の好きな果物は、りんごです。<br>
あなたは何が好きですか。
</p>

<h4>練習問題②</h4>
<p>以下の内容をわかりやすく表記せよ。</p>
<p>【例】<br>
大項目：食事<br>
中項目：好きな果物<br>
小項目：りんご<br>
私は、水々しくてシャキシャキしているりんごが好きです。<br>
特に熟しているりんごは美味しく、青森県さんの紅林は有名なブランドで高いですが、手に取りやすく、家庭でも味わえる林檎です。
</p>

<h4>練習問題③</h4>
<p>以下の内容をわかりやすく表記せよ。</p>
<p>【例】<br>
・青森<br>
・食事<br>
・果物<br>
・林檎<br>
私は、水々しくてシャキシャキしているりんごが好きです。<br>
特に熟しているりんごは美味しく、青森県さんの紅林は有名なブランドで高いですが、手に取りやすく、家庭でも味わえる林檎です。
</p>

<h3>前回の投稿した練習問題の解答</h3>
<h4>前回の練習問題①の解答</h4>

```html:前回の練習問題①の解答
<!DOCTYPE html>
<html lang="ja">

<head>
	<!-- memo:メタ情報を適切に設定する -->
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Sample Title</title>
	<meta name="description" content="練習ページ">
	<meta propaty="og:type" content="website">
	<meta propaty="og:site-name" content="Sample Title">
	<meta propaty="og:url" content="サイトのリンク">
    <meta property=”og:image” content=” サムネイル画像のURL” />
	<link rel="icon" href="img/favicon.ico">
	<!-- 左記のサイトでfavicon.ico作成 https://www.xiconeditor.com/-->
</head><!-- ここまでが裏の設定ですよという宣言 -->
<body>
<p>Hello World</p>
</body>
</html>
```

<h4>前回の練習問題②の解答</h4>

```html:前回の練習問題②の解答
<!DOCTYPE html>
<html lang="ja">

<head>
	<!-- memo:メタ情報を適切に設定する -->
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Sample Title</title>
	<meta name="description" content="サイトの説明">
	<meta propaty="og:type" content="website">
	<meta propaty="og:site-name" content="サイトのタイトル">
	<meta propaty="og:url" content="サイトのリンク">
    <meta property=”og:image” content=” サムネイル画像のURL” />
	<link rel="icon" href="img/favicon.ico">
	<!-- 左記のサイトでfavicon.ico作成 https://www.xiconeditor.com/-->
</head><!-- ここまでが裏の設定ですよという宣言 -->
<style>
.txt{
font-weight: bold;
}
</style>
<body>
<p class=txt>Hello World</p>
</body>
</html>
```

<h4>前回の練習問題③の解答</h4>

```html:前回の練習問題③の解答
<!DOCTYPE html>
<html lang="ja">

<head>
	<!-- memo:メタ情報を適切に設定する -->
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Sample Title</title>
	<meta name="description" content="サイトの説明">
	<meta propaty="og:type" content="website">
	<meta propaty="og:site-name" content="サイトのタイトル">
	<meta propaty="og:url" content="サイトのリンク">
    <meta property=”og:image” content=” サムネイル画像のURL” />
	<link rel="icon" href="img/favicon.ico">
	<!-- 左記のサイトでfavicon.ico作成 https://www.xiconeditor.com/-->
</head><!-- ここまでが裏の設定ですよという宣言 -->
<style>
.txt{
font-weight: bold;
}
.txt-img{
weight: 100%;
max-weight: 100%;
}
</style>
<body>
<p class="txt">Hello World</p>
<!-- この段階でdivタグで囲うことはしなくてもOK -->
<div class="txt-img">
<!-- 画像を格納した先を指定 -->
<img src="img/ファイル名">
</div>
</body>
</html>
```
<p>本日の練習問題の解答は次の投稿にて！</p>