よく使う要素
HTMLでよく使う要素は以下のものです。
- h1~h6要素(見出し要素)
- p要素
- b要素
- br要素
- a要素
- meta要素
- link要素
- div要素
これらの要素はよく使うのではないでしょうか。
しかし、これらの要素の役割をそれぞれ把握していないとheadにwebページに表示される情報を書いたりと見にくいコードや意味の通らないプログラムになってしまいます。
そういったことを避けるためにもよく使う要素については抑えておいて損はないはずです！
具体的にどういった要素なのか見ていきましょう。
h1~h6(見出し要素)・p要素
これらはページの見出しとなる要素です。
丁度こういったブログのようなもので各セクション似タイトルがあるかと思いますが、そのタイトルに当たる部分がこの要素です。
<h1>見出し</h1>
<h2>見出し</h2>
<h3>見出し</h3>
このようにタグで囲んだ部分が見出しになります。
hの数字が大きくなるにつれて見出しに表示される文字は小さくなります。
p要素は段落を作ります。
<p>これは段落です</p>
というように記述します。
実際の表示ではこんな感じになります。
これは段落です
要するに何かの文字列を配置したいときはほとんでp要素を使うということです。
b・br・a要素
これらの要素は主に文字の装飾を行う要素です。
それぞれ見ていくと、b要素は囲んだ文字を太文字にします。
次にbr要素は、囲んだ箇所から「改行する」ことを意味する要素です。
最後にa要素ですが、これは囲んだ文字をリンクにすることができます。
このように主に文字の装飾を行う要素をインラインレベル要素といいますが、また解説していきます。
div要素
この要素は特に意味を持たない要素ですが、そのため使い勝手がいいのが特徴です。
例えば特定の場所だけCSSを適用させたいとき、この要素にclass属性を付与しておけばCSSのセレクタに、そのclassを指定するだけでこの問題を解決することができます。
<div class="header-title">
<h1>タイトル</h1>
</div>
<p>これはタイトルです</p>
このようなとき、「h1だけにCSSを適用させたい！」と思ったときにdivで与えたクラスをセレクタに指定するだけでh1のみにCSSを適用させることができます。
非常に便利な要素なので覚えておきましょう。
meta要素・link要素
これらはHTMLやページの情報を記載するための要素です。
したがって、これらの要素はhead内に記述します。
それぞれの役割を見ていきましょう。
meta要素はページに使われる文字の種類(文字コード)を指定することができます。
link要素は実際に使用しているHTMLファイルと外部の情報を関連付ける要素です。
これらの要素を使うときには、属性と属性値が必要になります。
実際のコードを見ていくと、
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
このような記述になります。
ここではmetaの属性が文字コードを指定するcharsetに、
linkの属性が参照するファイルが現在のファイルとどんな関係があるのかを指定するrel属性
実際にどこのファイルにリンクとして飛んでいくのかを指定するhref属性ということになります。
それでは属性とは一体何なのでしょうか。
属性と属性値
属性とは要素に情報を付け加えるもので例えば、先程のlink要素の場合、link要素で外部ファイルと関連付けするだけでなく、rel属性を使って、どんな関係があるのかを情報として追加しています。
このように属性は要素に必要な情報を追加しているのです。
そして、属性値はどのような属性なのかを示す値のことを指しています。
つまり、rel属性の場合、「CSSのファイルと関係がある属性ですよ〜」といったことを、属性値が示しているのです。
まとめ
以上がHTMLでよく使う要素と属性についての解説です。
参考になればSNSで共有・紹介していただけたら嬉しいです！
それではまた！