超ざっくりHTMLが読めるようになる記事 - つきすけ　の　コーディング記

「１から全部書くわけじゃないけど、読めないと困る」
そんな人のために。

ウェブページを作っている言語。
○○.htmlっていう拡張子のファイルになる。

以下をコピしてブラウザで開くとどうなるか。

<html>
  <body>
    あいうえお
  </body>
</html>

できた。

<> のことを、タグっていう。
一番外側をタグで囲って、内容はタグの中にある。

その中でも区別するために、いろいろなタグの元に文字が書かれている。
最低限覚えて欲しいタグは以下の３つ（超厳選）

<div>１ブロックを表すタグ</div>
<span>文章の一部分を表すタグ</span>
<a>リンクを表すタグ</a>

HTMLのタグには二つの概念がある。

ブロックタグとは、塊を表すタグのことであり、インラインとは文章中を表すタグのこと。
さっき紹介した３つのうち、

はブロック、他はインライン。
雑すぎて怒られそうだが、ものすごく簡単に違いを説明する。

ブロック：かってに段落になる。並べて書いても改行される
インライン：文章の間に挟んでも、改行されない

こんなかんじ

<html>
  <body>

    <div>ブロックです</div>
    <div>連続して書いても改行されます</div>

    <span>インラインです</span>
    <span>連続して書いても改行されません</span>

  </body>
</html>

タグには自分で名前をつけることができる。
なにに使うか？　レイアウトを考えるときによく使う。

名前の付け方は２通り、クラス（class）とID（id）
こんな感じ。

<div class="classEx">ここに文章</div>
<div id="idEx">ここに文章</div>

二つの違いは、複数個に同じ名前を付けられるかどうか。
IDは１つしか作れず、クラスは同じ名前を複数使える。
これはきっとレイアウト（CSS）書くようになれば、２つある理由もよくわかることだろう。

それ（CSSの話）はまた今度
tsukisuke.hateblo.jp