bodyタグの記述内容
- bodyタグの中に記述するものは、主にWebサイトの目に見える部分です
- Webサイトを閲覧した際に表示される要素は、bodyタグの中に書いた要素になります
見出しタグ
- hは見出しを意味するheadingの頭文字を表しています
- hタグは、ページのタイトルや見出しに設定します
- hタグはh1からh2, h3…とh6まで使うことができます
- h3タグのあとにh2タグがくる、というのは好ましくありません
<h1>h1の見出しです。</h1>
<h2>h2の見出しです。</h2>
<h3>h3の見出しです。</h3>
<h4>h4の見出しです。</h4>
<h5>h5の見出しです。</h5>
<h6>h6の見出しです。</h6>
段落タグ
- pタグはparagraph（パラグラフ）の頭文字です
- 見出しのhタグとセットでpタグが使われることが多いです
<p>段落・テキストが入ります。</p>
文章内で使うタグ（strong・b・br・span）
- strongタグ：内容の重要性・緊急性が高いテキストに使う
- bタグ：ユーザーの注意を引き付ける（目線を引き付けたい）
- brタグ：改行する（それ以外の用途で使うのは控える）
- spanタグ：単体で意味を持たないが、インラインでグルーピングできるタグ
<p><strong>強調</strong>する</p>
<p>ユーザーの<b>注意</b>を引き付ける</p>
<p>改行<br>する</p>
<p><span>spanタグ</span>です</p>
箇条書き（ul, ol, li）に使えるタグ
- 箇条書きで使うulタグ：順序のないリストを表示する
<ul>
<li>要素</li>
<li>要素</li>
<li>要素</li>
</ul>
- 箇条書きで使うolタグ：順序のあるリストを表示する
<ol>
<li>要素</li>
<li>要素</li>
<li>要素</li>
</ol>
画像を表示させるimgタグ
- imgタグは文書内に画像を表示するタグです
- 表示できる画像の形式は「.gif（GIF形式）」、「.jpg（JPEG形式）」、「.png（PNG形式）」「.webp（WebP形式）」などがあります
- imgタグのsrc属性：画像の読み込み元を指定する属性
- imgタグのalt属性：画像の代替となるテキスト情報
- imgタグのtitle属性：補足情報をツールチップとして表示
- imgタグのwidth属性とheight属性：画像の横幅と縦幅のサイズを指定
<img src=”画像ファイルのパス/ ファイル名.(png, jpg, gif など拡張子) ” alt=”代替テキスト” title=”ツールチップで補足情報を記載” width=”画像の横幅” hight=”画像の高さ”>
tableタグで表を作成
- tableタグとは、trタグ、thタグ、tdタグなどと組み合わせて表を作成するためのタグです
- tabelタグ：「表全体」を形作る構造
- trタグ：表の中の「行」を形作る構造（table row）
- thタグ：表の「見出し」を形作る構造（tabel head）
- tdタグ：表の「データ」を形作る構造（tabele data）
- rowspan属性：表を縦方向に結合する
- colspan属性：表を横方向に統合する
<table>
<tr>
<th>項目</th>
<td>内容</td>
</tr>
<tr>
<th>項目</th>
<td>内容</td>
</tr>
<tr>
<th>項目</th>
<td>内容</td>
</tr>
<tr>
<th>項目</th>
<td>内容</td>
</tr>
</table>
- aタグはページを移動するハイパーリンクを設定できます
- aタグのaはanchor（アンカー）の頭文字です
- href属性はhypertext reference（ハイパーテキスト リファレンス）の略称で、リンク先を指定することができます
- aタグにtarget属性を付与すると、新しいウインドウが開いて、そこに新しいページが表示されます
<a href=”リンク先のパス” target="_blank">別ウインドウが開きます。</a>
コンテンツを区切るタグ
- コンテンツを区切るsectionタグ：「章・節・項」などひとまとまりを示す
- コンテンツを区切るarticleタグ：独立したコンテンツのかたまりを示す
section
- sectionタグは文章やコンテンツなどひとまとまりになるものに使用します
- sectionタグで囲んだ要素が「章・節・項」などであることを示します
- sectionタグはhタグを含むことが推奨されています
<section>
<h2>タイトル</h2>
<p>テキストが入ります。</p>
</section>
<section>
<h2>タイトル</h2>
<p>テキストが入ります。</p>
</section>
article
- articleタグはサイト内で自己完結した、独立しているコンテンツの要素に対して使用します
- articleには「記事・論説」という意味があります
< article >
<h2>タイトル</h2>
<p>テキストが入ります。</p>
</article >
< article >
<h2>タイトル</h2>
<p>テキストが入ります。</p>
</article >
sectionとarticleの違い
- sectionタグを使用することで、sectionタグで囲った部分が文章のまとまりであることを明確に示すことができます
- articleタグは、例えばブログ記事のような独立したコンテンツに対して使用されます
グループ化のためのタグ
divタグ
- 「div」は、「division（ディビジョン）」の略
- 文書構造としての特別な意味はなく、要素をグループ化する際に使用します
<div>
<p>あいうえお</p>
<p>かきくけこ</p>
</div>
spanタグ
- 「span」タグは、divタグと同様に特別な意味はなく、要素をグループ化する際に使用します
<span>あいうえお</span>
<span>かきくけこ</span>
