ウェブサイトの仕組みを知る! html編 其の3
コラム
[ウェブサイトの仕組みを知る!]
html編
其の1 : ウェブサイトの仕組みを知る! html編 其の1
其の2 : ウェブサイトの仕組みを知る! html編 其の2
css編
其の1 : ウェブサイトの仕組みを知る! css編 其の1
ページを構成するもの
前回htmlの文法についてお話しさせていただいたように、htmlを記述するためのルールというものが存在します。
web上には無数のホームページ、webサイトが存在しています。
様々なジャンルの、様々な形式のwebサイトがあり、それぞれデザインも機能も目的も異なっていて、一つとして全く同じwebサイトというものはありません。正に千差万別です。
しかし、どんなにジャンルやデザインが違っていても、それぞれのwebサイトを構成している根本的な要素はほぼ同じなんです。
今回はその辺りの、html文書の構造についてお話ししていきたいと思います。
大きく２つにわかれる
まずは例のごとく、いつも見ているページのソースを見てみて下さい。
何ページか見ていると、このタグ毎回見るなー、というものがいくつかあると思います。
デザインによって視覚的に差異はあっても、それらの要素によってそれぞれのページは構成されているのです。
まずはhtml文書は大きく２つに分けることができます。
それはヘッド要素とボディ要素です。
<head>と<body>というタグは、どこのソースを見ても発見できたと思います。
ヘッド要素内には、そのページの情報や概要が記述されています。
そのページは何について書かれたページなのか、ページのキーワード、ページのタイトルなどです。
これらの情報をメタ情報とも呼びます。
ソースコード上部のヘッド要素のなかに
<meta>
というタグが多く含まれていると思います。
基本的にこれらの情報はページには表示されません。
しかし、Googleやyahooなどの検索エンジンはここの情報から、どのようなwebサイトなのか判断しています。
なので、SEO対策を行う際には、ヘッド要素の情報の編集がカギになってくると言えます。
ボディ要素内はページの内容です。目に見える部分を指定しています。
webサイトの核とも言える部分ですね。
<body>で囲まれている中に、よく探してみると
<h1>や<h2>といったタグを確認できると思います。
これらは見出しです。大見出しや中見出しなど、レベルに応じて設定していきます。
より見やすいページを作成するためには、見出しの使い方が大切であると言えるでしょう。
段落や改行なども要素として処理されます。
例えば、改行には<br>というタグを指定します。
このように、ある程度html文書の構造は決まっているのです。
株式会社Knocknote代表取締役。大学卒業後不動産営業に従事した後、ITの重要性を強く感じエンジニアへ転職。ソーシャルゲーム開発、スマホアプリやPepperアプリの企画及び開発、高校でのプログラミング講師などの業務に携わる。2017年1月に創業。現在はプログラミング教育事業、システム開発事業を展開。今後は海外向けの教育事業をさらに拡大させていく事が目標。著書：『作って学べるUnity超入門』(技術評論者)
