ウェブサイトを作りたいとなったら、始めにHTMLを勉強すると思います。そして、勉強の過程でCSSとJavaScriptの存在を知ると思います。今回は、ウェブサイトを作るときに関係するHTML、CSS、JavaScriptの役割について書きます。
HTMLの役割:文書の構造化
HTMLで何をやっているのかというと、文字や文書をタグで囲って目印を付けて構造化しています。つまり、文書を構造化するための言語がHTMLです。
構造というのは、いくつかの部品を組み合わせて1つの物を作るというこです。HTMLでは、見出し(h1タグ)やリンク(aタグ)などのタグが部品に当たります。その部品を組み合わせてウェブサイトの1ページを作っています。タグには意味があり、タグで囲まれた部分はそのタグの意味を持ちます。例えば、h1タグ(<h1></h1>)で囲むと、その部分は見出しを意味します。aタグ(<a></a>)で囲むと、その部分はリンクを意味します。
文書を構造化することに意味はあります。
グーグルの検索結果で上位に表示されるために、適したマークアップは必要なことだと考えます。HTMLの構造も評価の対象のはずです。検索アルゴリズムは、ページのHTMLの構造やコンテンツの内容を評価しているのだと考えます。そのため、HTMLを分かった上でウェブサイトのページを作れるとSEO的に不利な状態を避けられるのではないでしょうか。ただし、検索アルゴリズムは公表されていないので、評価のメカニズムは分かりません。
HTMLについて少し難しい話をしたかもしれません。しかし、ウェブサイトを作ることを難しく考える必要はありません。誰しも始めから完璧なものは作れません。勉強して、その都度コードを適したものに修正していければ良いと思います。ちなみに、HTMLのタグで見た目を調整するようなことは、本来の使い方ではありません。
CSSの役割:装飾
CSSは、見た目の調整役という一言につきます。
CSSの記述のルールはもちろんありますが、基本は難しくないと思います。プロパティの種類と値の指定の仕方が分かれば充分だと思います。
CSSは、HTMLのタグ内に記述することもできますが、別ファイルにすることをオススメします。文書構造の記述と見た目の記述を分離した方が、管理しやすいです。
CSSの記述が増えると、CSSの肥大化による破綻という問題が出てくるかもしれません。そのときは、CSSの設計について調べると良いかもしれません。
JavaScriptの役割:動作
JavaScriptが使えるとウェブサイトに動きを付けられます。例えば、以下のようなことができます。
JavaScriptが書けると色々とできることが増えます。しかし、HTMLやCSSの習得と比べるとJavaScriptの習得は難しいです。
JavaScriptの記述も別ファイルにすることをオススメします。
まとめ
HTML、CSS、JavaScriptの役割について書きました。HTMLで文書構造、CSSで見た目の調整、JavaScriptで動きを付けることができます。それぞれの役割を理解して、ウェブサイトを作れると良いです。
参考サイト
最後にHTML、CSS、JavaScriptの勉強に役立つサイトを挙げておきます。
- HTML
- CSS
- JavaScript
HTML入門のまとめ記事なら... » HTML入門まとめ
