Web Survive

Webで生きる道を模索するブログ

HTMLの基本

マークアップの基本

要素

HTMLによるマークアップでは、
まずコンテンツそれぞれの役割を表す「要素」の書き方を押さえる事が大切です。
要素の範囲を<要素名>という開始タグと、</要素名>という終了タグで囲みます

例でいうと、テキストに「段落」という役割を与えるためには<p>と</p>で囲みます、
終了タグには「ここまで」という終わりを示す「/」(スラッシュ)をつけます
タグは全て半角、小文字で入力する点に気をつけましょう。

例にだした「p」という要素は「paragraph」(段落)の略です。
HTMLの要素名は、人間がみてもわかりやすいように
「英単語の省略系」でほとんどのものが定義されています。

属性と属性値

次に「属性」「属性値」を押さえましょう。
要素に特定の機能をもたせるのが「属性」で値が「属性値」です。
テキストにリンクを設定するには

「<a href=”http://www.example.net”>テキスト</a>」

と書きます。この場合、

要素は「a」、属性は「href」、属性値は「http://www.example.net」

となります。

引用符と書式

要素名と属性をスペースで区切る、属性と属性値はイコール(=)でつなぐ、
属性値は引用符(”)が利用でき、通常は二重引用符を利用します。
また、属性と属性値のセットはスペース区切りで複数指定できます。

最初は覚えるのが大変かもしれませんが、
慣れると自然と書けるようになりますので
はじめのうちは注意しながら書いてみましょう。

html-basic-tag

文章のツリー構造を意識する

ほとんどの要素が、他の要素を含むことができます。
コンテンツのおおまかな範囲を示すdiv要素のなかに、
段落を意味するp要素を含めたとします。

html-basic-Parent-child

この場合、div要素を「親要素」、p要素を「子要素」といいます。

<div>
<p>簡単な例</p>
</div>

HTMLによるマークアップは、
このように親要素と子要素を繰り返し記述しながら全体を作っていきます

このような要素の親子関係は、樹形図としてまとめることができます。
この樹形図を「文章ツリー型構造」または「ツリー構造」といい、
木の枝がどんどん分かれていくようなイメージでHTMLの構造をとらえます。
ツリー構造はCSSでスタイルを適用するときも常に意識すべき大切な考え方です。

文章の「ツリー構造」

html-basic-treestructure

見やすいソースコード

HTMLのソースコードを記述する際は、
このようなツリー構造(親子関係)がパッと見てわかるように、
子要素を含める場合にはタブキーや
半角スペースふたつでインデント(時下げ)をするのが一般的
です、
また、要素と要素の間を改行して見やすくしたり、
コメントというかたちで、メモや目印を書いておく事もできます。

一人で制作する場合は、自分が見やすい書き方で構いませんが、
複数の人が関わる場合(チームでの作業、メンテナンスが発生する案件)なども考えて
他人にとっても見やすいソースコードを心がけることは大切です。