どうも、べ〜やんです。

今回は、HTMLのよく使うタグ・要素などをまとめました。

タグとは

<html>、<head>、<footer>、<div>などをタグと呼びます。

通常タグは<html> </html>のように開始タグと終了タグの二つをセットにして使います。スラッシュが付いてないタグが開始タグ。スラッシュが付いているタグが終了タグです。

<img>、<br>など、終了タグがないものもあります。

タグは半角文字で書く必要がありますが、大文字でも小文字でも大丈夫みたいです。ですが、小文字で書く方が主流のようです。私も必ず小文字で書くようにしています。

タグ名の前にスペースを開けることもNGです。

<html>　→　OK (主流）
<HTML> →　OK
<HTml> → OK
＜html＞ → NG （全角文字がある）
< html> →　NG

タグの使い方

開始タグと終了タグの間に表示させたいテキストを入れたり、また別のタグを入れます。

タグ名によって文字の大きさが変わったり、SEOに影響があったりとさまざまな意味を持っているので適切なタグを与えるようにしましょう。

<h1>は見出しタグで文字が大きく太字に表示されます。見出しタグは<h1>~<h6>まであり数字が小さいほど文字が大きくSEO上も重要視されます。

<p>タグは段落を表します。上の文章でいうと<p><h1>は見出しタグで〜〜重要視されます</p>というように<p>タグの中に一つの文が入れられています。

<br>タグは文章を改行させる力を持っています。

<h1>一番大きな見出し</h1>
<p>pは段落</p>
<p>pは段落pは段落pは段落pは段落      <!-- 普通に改行してもダメ -->
pは段落pは段落pは段落pは段落</p>
<p>pは段落pは段落pは段落pは段落pは段落pは段落pは段落pは段落</p>
<p>pは段落pは段落pは段落pは段落<br>pは段落pは段落pは段落pは段落</p>
<h5>小見出し</h5>

↓　表示すると

一番大きな見出し

pは段落

pは段落pは段落pは段落pは段落 pは段落pは段落pは段落pは段落

pは段落pは段落pは段落pは段落pは段落pは段落pは段落pは段落

pは段落pは段落pは段落pは段落
pは段落pは段落pは段落pは段落

小見出し

要素とは

要素の説明は難しいので、ざっくり説明します（笑）

今回は<body>タグを使って大きな箱を作りました。この箱のことをbody要素と呼びます。この箱（body要素）の中にいろんな箱（要素）を入れていくイメージです。

<body>    <!-- 大きな箱 -->
    
   
  
  
  
  
  
  
  
</body>

どんどん入れていく

<body>   <!-- 大きな箱 -->
  <header>  <!-- body要素の中にheader要素 -->
    <div>   <!-- body要素の中のheader要素の中にdiv要素 -->
                       
    </div>
  </header>
  <div>  <!-- body要素の中にdiv要素 -->
       
  </div>
  <footer>  <!-- body要素の中にfooter要素 -->
       
  </footer>
</body>

要素はCSSを使う場面で重要になってくるので、CSSと一緒に覚えると覚えやすいと思います。

ブロック要素・インライン要素

要素はブロック要素とインライン要素に分かれます。

ブロック要素はdiv要素やp要素などで、横幅と高さを持っていて要素の前後に改行が入ります。

インライン要素はspan要素やstrong要素などで、高さを持たずに文章の中で使われます。文章の一部だけの色を変えるときや一つの単語だけを太字にして強調するときなどに使用します。

覚えようとするな

タグや要素は数多くの種類があるため全てを覚えようとする必要はありません。必要になったときに検索しながら使っていきましょう。

よく使うものは練習していると自然と覚えられます。

よく使うものを少しピックアップしました。

<html>	html全体を覆う要素
<header>	ヘッダー部分（よくロゴやメニューバーが配置される場所）
<footer>	フッター部分（よくロゴやメニューバーが配置される場所）
<div>	意味を持たない要素（いろんなものに使える）
<p>	段落
<nav>	ナビゲーション
<h1>~<h6>	見出し
<ul>	リスト。中で<li>や<ol>と組み合わせて使う

リファレンス

どれを使えばいいのかわからないときには、リファレンスから調べるのもありです。

HTML要素リファレンス

おわりに

今回はHTMLのタグと要素の使い方に付いて紹介しました。

タグや要素は非常にたくさんの書類があるので読むだけでは覚えらえないと思います。実際にHTMLを書いてみて詰まったときに、その都度調べていくクセをつけると覚えやすいと思います。

[超初心者] HTMLのタグ・要素