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] 隣接・間接・直下セレクタの使い方

どうも、べ〜やんです。 今回は、CSSで隣接・間接・直下セレクタを指定する方法を紹介します。 隣接・間接・直下セレクタ 隣接・間接・直下セレクタを指定するには、要素同士をそれぞれの結合子で結んで使用し …

[CSS] CSSでチェックマークを作る方法

どうも、べ〜やんです。 今回はCSSでチェックマークを作る方法を初心者の方用に紹介します。 リストなどのデザインのバリエーションを増やすのに便利です。 チェックマーク リストなどによく使われるチェック …

[jQuery] jQueryのアコーディオンの作り方

どうも、べ〜やんです。 今回は、jQueryでのアコーディオンの作り方を紹介したいと思います。 アコーディオンとは よくメニューバーやQ&Aなどで使われているクリックすると、楽器のアコーディオ …

[CSS] overflowの使い方

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

[HTML] 特殊文字で空白スペース

どうも、べ〜やんです。 今回は、特殊文字を使って空白スペースを挿入する方法を紹介します。 空白スペース htmlではひとつの半角スペースは空白スペースとして使用できますが、連続した半角スペースはひとつ …