CODING

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

投稿日:2019年10月9日 更新日:




どうも、べ〜やんです。

今回は、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を書いてみて詰まったときに、その都度調べていくクセをつけると覚えやすいと思います。




-CODING
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[css] borderで枠線をつける方法

どうも、べ〜やんです。 今回はCSSで枠線を指定する方法のborderの使い方を紹介します。 borderとは borderは枠線を指定できるプロパティです。 線の種類、太さ、色などを指定してさまざま …

[CSS] overflowの使い方

どうも、べ〜やんです。 今回はCSSのoverflowの使い方を紹介します。 テキストが長いけどスペースを大きく取りたくない場合などに便利です。 overflowとは overflowは要素からはみ出 …

HTML文法チェックサービスMarkup Validation Service

どうも、べ〜やんです。 今回は、HTMLの文法にミスがないかを自動で判別してくれるサービスMarkup Validation Serviceを紹介します。 HTMLを独学で勉強していて自分の知識がどれ …

[CSS] 3点リーダーの作り方

どうも、べ〜やんです。 今回は、3点リーダーの作り方を紹介します。 3点リーダーとは 3点リーダーって知ってますか? 文章が長くて表示仕切れない場合に、はみ出た部分を「…」とピリオド3つで …

[CSS] 自動ナンバリングする方法

どうも、べ〜やんです。 今回は、counterを使って自動でナンバリングする方法を紹介します。 自動ナンバリング 見出しなどに番号をつけて表示する場合に、手動で入力すると面倒ですし途中で順番が変わった …