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

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

関連記事

アイコンを簡単に表示できる!Icongram

どうも、べ〜やんです。 今回は、簡単にアイコンを表示できるサービス『Icongram』を紹介します。 Icongramとは 引用元:Icongram Icongramは9つのアイコンライブラリからAP …

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

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

[超初心者] HTMLの書き方

どうも、べ〜やんです。 今回は、HTMLの書き方の基本的なルールをざっくりと確認していきます。 以下のHTML文をざっくり説明します。 <!DOCTYPE html> <html&g …

[CSS] white-spaceの使い方/空白・改行

どうも、べ〜やんです。 今回は、半角スペースや改行の表示を指定するプロパティのwhite-spaceを紹介します。 white-spaceとは white-spaceとはHTMLに書いた半角スペースや …

[CSS] 隣接・間接・直下セレクタの使い方

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