これまでHTMLとCSSを学んでいくために、必要な知識やツールについて触れてきました。
このレッスンは、HTMLの書き方の基本であるタグの書き方を学んでいきます。
今回は特に記述ルールについてフォーカスしていきますので、それぞれの具体的なタグの働きなどは次回以降、詳しく触れていきます。
実際にマークアップしていく前の最後のウォーミングアップになりますので、記述ルールを最低限こちらで覚えていきましょう！
もくじ
HTMLの記述ルール
まずはHTMLがどのように記述されているのか見てみましょう。
<h1>ペペロンチーノのレシピ</h1>
<h2>材料</h2>
<ul>
<li>パスタ</li>
<li>ベーコン</li>
<li>にんにく</li>
<li>とうがらし</li>
</ul>なんだか複雑そうですが、なんとなくルールがあるように見えませんか？
タグを見てみよう！
レッスン１ではHTMLは文書構造になっていると説明しました。
そしてその文書はタグと呼ばれるものでマークアップしていきます。
たとえば、
<h1>ペペロンチーノのレシピ</h1>この<h1>と</h1>がタグの部分です。
<h1>
が開始タグ
</h1>
が終了タグ
と呼ばれます。
終了タグの/（スラッシュ）は’このタグはここで終わり’を意味しています。
そしてさらにこの２つのタグの中身を見ていくと、どちらも
h1
とありますね。
この’h1’の部分がタグ名と呼ばれ中身がどんな意味を持っているのか、を指すところです。
h1はいちばん大きな見出しを表すタグです。
開始タグ、終了タグともに、このタグ名をやまかっこ<>ではさみます。
そして、開始タグ、中身、終了タグの３つから構成される１つのかたまりのことを要素といいます。
つまり、タグの中身である「’ペペロンチーノのレシピ’は、大見出しですよー」とコンピュータに指示をしているわけですね！
実際にブラウザで見てみると、こんな感じで見出しっぽく、太字で表示されていますね！
h1は大見出しを表しているので中身の’ペペロンチーノのレシピ’の文が太く表示されている
このように、かならずタグの中身は開始タグ<タグ名>と終了タグ</タグ名>で、はさみます。
こんな構造の食べ物、なんだか見覚えありませんか？
そう、ハンバーガーやサンドウィッチみたいですね！
つまり開始タグと終了タグのバンズで中身をはさんでいるんですね。
HTMLタグの基本の形は開始タグと終了タグで中身をはさむ
ここでできるハンバーガーそのものが要素である、ということです。
さて、タグの中身は開始タグと終了タグではさむ、と説明しましたが、実は例外もあったりします。
brタグやimgタグなどは終了タグを持たず、開始タグのみでOKです。
この中でもよく使うタグは限られていて、書いているうちに自然と覚えていくので心配いりませんよ！
まずは、中身は開始タグと終了タグではさむ、と覚えてしまいましょう。
- HTMLは< >の形式でタグを書く
- 開始タグ<>と終了タグ</>で中身をはさむ
- 開始タグと終了タグにはそれぞれ中身が何かを表すタグ名を入れる
- 開始タグ、中身、終了タグのひとかたまりを要素と呼ぶ
- 開始タグだけでもいいタグがある
タグの種類について
タグとは、開始タグと終了タグでかこまれた中身がどんな意味を持っているか表すもの、ということでした。
タグのは現在１００種類以上もあるそうです。
このページでは、すべての HTML 要素を一覧表示しています。これらはタグを使用して作成されます。…
のリファレンスで確認できます。
（ちなみにこのMDNというサイト、HTMLやCSSで調べ物をするときによく使う信頼できるサイトなので、ぜひブックマークしておいてください）
そしたらそのタグの意味を全部暗記しなきゃいけないの！？となりますが、まーったくそんなことはないです。
その中でもよく使うものはそんなに多くないですし、分からなければその都度ネットなどで調べるだけでいいのです。
人それぞれフィールドにより使うタグの種類は若干変わってきますが、このサイトでは特にブログのデザインに役立つタグをピックアップして、今後のレッスンで取り上げていきたいと思います。
- タグは全て暗記する必要はない
- 使うタグはページのジャンルによって変わってくるので、よく使うものを重点的に理解する
タグの中にタグを入れることもできる
これは慣れるまで難しいところなのですが、タグの中にタグを、さらにその中にタグをという書き方もできます。
ハンバーガーの中にもう１個ハンバーガーがあるようなイメージです。
マトリューシュカみたいな構造にも似てるかも。
これはタグを’入れ子にする’（または’ネスト化する’）と言って、HTMLだけでなくPHPやJava Scriptなど、言語を問わずプログラミングではよく使われる構造になっています。
例えばこんな形式になっています。
<div>
<h1>タイトル</h1>
</div>
注意なのが、このタグの中にこのタグは入れたらダメ！というようなルールがあったりするので、自信がないときはその都度調べていくことも大事なポイントです。
- HTMLタグは入れ子構造で書くことができる
- 入れ子はいろいろなプログラミングで使われるので、まずは２個など少ない構造から徐々に慣れていこう
タグの中には属性と値を記述できる
新しい用語が出てきました。
属性とは、そのタグがどんな性質を持っているのか、を示すものです。
タグにはそれ１つで意味が分かるものと、詳細な情報がなければ意味をなさないものがあります。
たとえばリンクを意味する
<a></a>
の要素があります（aタグ、またはアンカータグと呼ばれています）。
例えばグーグルのリンクを表示させたいときに、これまで通り開始タグ、中身（表示させたい文）、終了タグで記述すると、
<a>グーグルへジャンプする</a>でもなんだか情報が足りないと思いませんか？
そうです、グーグルのURLがないですよね！
aタグの場合は、リンク先を表すhrefと呼ばれる属性を使い、
<a href="https://www.google.com/">グーグルへジャンプする</a>のように記述します。
表示してみるとこのように見慣れたリンクができました！
このように必要な情報をタグに付け加えてあげる役目が属性なのです。
そしてこの情報の具体的な内容のことを値と呼びます。
この場合の値はグーグルのURLになります。
開始タグ名の後に半角スペースを入れた後
属性 = “値”
の形式で記述します。
開始タグ名の後に半角スペースを入れて
属性
= (イコール)
“値”
の形で書きます
(値は””(ダブルクォーテーション)
で囲みます)
ぼくは最初のころ、この要素とか属性とか言葉がまぎらわしくてよくごっちゃになっていました笑
属性も書くケースはパターン化されていますので、まずはいろいろ書いていくと段々理解ができるようになります。
- タグにさらに付け加える情報を属性という
- 属性で付け加えた情報そのものを値という
- 開始タグのタグ名の後に、属性=”値” の形式で書く
まとめ
HTMLタグの記述のルールについて学んできました。
一見複雑そうに見えるHTML文書も、分解していくと今日見てきたような１つ１つの単純な要素で構成されています。
この基本の書き方を自然に書けるように何回も練習してください。
何回も読んで書いて動作を確認して、というのがいちばん大事なポイントです。
暗記をするのではなく、体に染み込ませると表現がしっくりきます。
いまはただの文字や記号の並びにしか見えませんが、だんだんコードからイメージが見えてくるようになりますよ！
いよいよ次回から実際に用意したクロームとエディタを使って、マークアップしていきます。
コードを書いていくのは本当に楽しいので、まずは今日のレッスンを何度も読んで、HTMLタグの概念をざっくり理解しておいてくださいね。