始めに
この記事は群馬高専 Advent Calendar 2023 5日目の記事です
HTMLとは
HTML(HyperText Markup Language)とは、ざっくり説明すると、Webページを記述する際に用いられるマークアップ言語の一つです。HTMLにはタグと呼ばれる構文があり、
-
<h1>や<div>などの開始タグ -
</h1>や</div>などの終了タグ
を用いて書いていきます。
同じ開始タグと終了タグで文字列などを囲んだ全体を要素といいます。
また、タグで他の要素を囲むこともでき、使うタグ（用いる要素）の種類で 特定の構造を表す要素 を書くことができます。
例
<h1>見出し１</h1>
このとき
<h1>は h1 の開始タグ
</h1>は h1 の終了タグ
<h1>見出し１</h1>は h1要素 を表します。
HTML要素には空要素と呼ばれる、内容を持たない要素があり、その要素は開始タグのみで1つの要素を表します。
<img src="https://example.com/assets/example.png" alt="画像の例">
src="..."やalt="..."などは「属性」というものでその要素に情報を追加するものですが、この記事では割愛させていただきます。
使うHTML要素の種類による注意点
さて、HTMLでは構文に沿って記述することで構造を書いていきますが、こんな注意点があります。
とりあえずdiv要素
div要素は複数の要素を含めることで、それらをグループとする構造にします。
ただし、div要素は汎用的なHTML要素なので、 特定の意味を持たないグループにのみ 使用します。
以下のように、ただ複数の要素をまとめるだけの場合はdiv要素を使うことができます。
<div>
<img src="https://example.com/assets/example.png" alt="画像の例">
<p>この画像は例です。</p>
</div>
ただし、以下のように要素がヘッダーに位置しているなど、意味を持ったグループに属する場合にはheader要素など適したHTML要素を使用しましょう。
<header>
<img src="https://example.com/assets/example.png" alt="画像の例">
<h1>ページのタイトル</h1>
</header>
太字にstrong要素
HTML要素には内容のテキストに装飾を加えるものがあり、代表的なものにstrong要素というものがあります。strong要素に囲まれたテキストは 強調され 、太字になります。
<strong>太字で強調するよ</strong>
結果
太字で強調するよ
また、似た要素にb要素というものもあり、b要素も内容テキストを太字にします。
<b>太字だよ</b>
結果
太字だよ
どちらもテキストを太字にすることができますが違いは何でしょうか？
それは 意味合い的に強調しているか です。
strong要素は強調することを目的としたHTML要素ですが、b要素はテキストを太字にするという装飾面での目的を持ちます。
ただし、装飾は「CSS」という言語でも記述することができるので、使う場合はstrong要素にするなど、統一することを心掛けておくと良いでしょう。
さいごに
まだ書き足りない部分があったり、拙い文章だったりしますが、使うHTML要素に少し気を付けるとより良いHTMLページが書けるかも？
次は、莉奈恋さんの「最近読んで面白かった本と微妙だった本」です！