たぶん最初のサンプルを見ても、なにがなにやら全然分からなかったと思います。
最初はそれで大丈夫です。
これから少しずつ、コードについて説明していきます。あせらず覚えていきましょう。
コードの中にある「タグ」の基礎知識
タグとは例えば、以下のように書きます。
タグの例
<p>テスト</p>
テストという文字を囲んでいますね。サンプルでも見たような形です。
このように、タグは中身を囲んで使うものです。
終了タグには「ここまで」を示す「/」（スラッシュ）を付けます。
pの部分が「要素」と言って、中身をどのように扱うか決めるものです。
「要素」には、特定の機能をもたせる「属性」を付けることができます。
要素に特定の機能を持たせる「属性」
<a href="http://www.sample.com/">テスト</a>
aという要素に、「href=”http://www.sample.com/”」という文字がくっついています。
この「href」の部分を「属性」、””で囲まれた「http://www.sample.com/」の部分を「属性値」と呼びます。
「属性」と「属性値」はセットで使われ、間をイコールでつなぎ、属性値は””で囲みます。
入れ子の例
<div> <p>テスト</p> </div>
タグは入れ子で使うことができ、上のように書くこともできます。
これはdiv要素の中にp要素が入っている、ということです。
基本的に、HTMLのコードはタグによって構成されています。
このタグの種類と書き方さえ覚えてしまえば、HTMLは簡単にできてしまいます。
HTMLのコメントとは？
<!-- ここがコメント -->
さて、HTMLのタグとは別に、HTMLにはコメント機能があります。
コメントとは、タグとして反映されない文字列です。
HTMLの構造には無関係なものとして扱われます。
無関係なものを書いても意味ないんじゃない？と思う方もいると思います。
しかし、構造とは無関係だからこそ意味があります。
どういう使い方をするかというと、コードの中の目印として使ったり、自分だけに見える説明文を入れたりします。
例えば説明文であれば、以下のように書いたりできます。
<p>テスト</p> <!-- これはテストなので、後で書き換えます。 -->
このようにコメントで残しておけば後で書き換えたりする時に簡単に判別することができます。
