1. はじめに
HTMLの学習内容は広大なので、本記事では
「見出し」「属性」「リンク」「著作権表記」「情報のグループ化」
を記載する。
2. 見出し
・Headingの略で、見出しを意味する。
・<h1>が最上位の見出し（大見出し）で、以下数字が小さくなるにつれて下位の見出し（小見出し）となる。
・<h6>が最下位の見出し
【サンプル】
<body>
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
</body>
【表示例】
☆注意点☆
1.見出しレベルを飛ばさない。
【OKな例】
<body>
<h1>
見出し1
<h2>
見出し2
<h3>見出し3</h3>
</h2>
<h2>見出し4</h2>
</h1>
</body>
【NGな例】
<body>
<h1>見出し1</h1>
<h2>見出し2</h2>
<h4>見出し4</h4>
</body>
2.<h1>は1つのページで1回だけ使用できる。
3.フォントサイズを小さくする目的だけで低いレベルの見出しを使用しない。
3. 属性
属性とは？
タグの設定を行える機能。
<タグ名 属性名="属性値"></タグ名>
(例）
【サンプル（リンクの設定）】
<a href="リンク先のパス">テキスト</a>
【サンプル（画像の設定）】
<img src="画像のパス">
※閉じタグは無し
【サンプル（外部リンクの設定）】
※以下はhtmlファイルへスタイルシートを紐付ける記述
<link rel="stylesheet" href="styles.css>
※閉じタグは無し
4. リンク
<a href="https://www.〇〇〇〇" target="_blank" rel="noopener"></a>
① ② ③
①リンク先のURL ②リンク先を別タブで開く ③target="_blank"の脆弱性を下げる ※②と③はセットで記述すること
5. 著作権表記
・small要素で記述
【サンプル】
<p><small>©2021 〇〇〇〇</small></p>
※
※copyrightの文字表記（文字実体参照）
【表示例】
6.情報のグループ化
・div:意味を持たない汎用ブロック ・section:セクションをグルーピングする ・header:セクションのヘッダーを示す ・footer:セクションのフッターを示す ・main:文章のメインコンテンツ領域を示す ・article:記事コンテンツ要素 ・aside:余談要素 ・nav:ナビゲーション要素
【サンプル】
<body>
<header>
<h1>グループ化の練習</h1>
<nav>
<ul>
<li><a href="#">エンジニアへの道</a></li>
<li><a href="#">プログラミング入門</a></li>
<li><a href="#">ニュース</a></li>
</ul>
</nav>
</header>
<main>
<article> ※1
<h2>グループ化を学ぶのにおすすめなサイト１０選！</h2>
<p>グループ化を学べるサイトを１０個紹介致します。</p>
</article>
<section> ※2
<h2>関連記事</h2>
<ul>
<li><a href="#">関連記事１</a></li>
<li><a href="#">関連記事２</a></li>
<li><a href="#">関連記事３</a></li>
</ul>
</section>
</main>
<aside>
<h2>広告</h2>
<p>全ショップ対象エントリーでポイント５倍！</p>
</aside>
<footer>
<p><small>©2021 〇〇〇〇</small></p>
</footer>
</body>
※1:囲んだ部分だけで完結してるときに使用
（今回の例だと、h要素とp要素で完結してるのでarticleタグで囲っている）
※2:今回の例だとリンクで別記事があり、このページで完結していないのでsectionタグを使用している。
【表示例】
【グループ化のメリット】
・文章構造がわかりやすくなる ・スタイルを当てやすくなる
7. おわりに
次項:HTMLの主なタグと用途(3) 「テーブル」に続く。