1. トップ
  2. コラム一覧
  3. ウェブサイトの仕組みを知る! html編 其の3

ウェブサイトの仕組みを知る! html編 其の3

投稿日 : 2018.01.28  |  カテゴリー : IT雑記

[ウェブサイトの仕組みを知る!]
html編
其の1 : ウェブサイトの仕組みを知る! html編 其の1
其の2 : ウェブサイトの仕組みを知る! html編 其の2

css編
其の1 : ウェブサイトの仕組みを知る! css編 其の1


ページを構成するもの

前回htmlの文法についてお話しさせていただいたように、htmlを記述するためのルールというものが存在します。
web上には無数のホームページ、webサイトが存在しています。
様々なジャンルの、様々な形式のwebサイトがあり、それぞれデザインも機能も目的も異なっていて、一つとして全く同じwebサイトというものはありません。正に千差万別です。

しかし、どんなにジャンルやデザインが違っていても、それぞれのwebサイトを構成している根本的な要素はほぼ同じなんです。
今回はその辺りの、html文書の構造についてお話ししていきたいと思います。

大きく2つにわかれる

まずは例のごとく、いつも見ているページのソースを見てみて下さい。
何ページか見ていると、このタグ毎回見るなー、というものがいくつかあると思います。
デザインによって視覚的に差異はあっても、それらの要素によってそれぞれのページは構成されているのです。

まずはhtml文書は大きく2つに分けることができます。
それはヘッド要素とボディ要素です。

<head><body>というタグは、どこのソースを見ても発見できたと思います。

ヘッド要素内には、そのページの情報や概要が記述されています。
そのページは何について書かれたページなのか、ページのキーワード、ページのタイトルなどです。
これらの情報をメタ情報とも呼びます。

ソースコード上部のヘッド要素のなかに
<meta>
というタグが多く含まれていると思います。

基本的にこれらの情報はページには表示されません。
しかし、Googleやyahooなどの検索エンジンはここの情報から、どのようなwebサイトなのか判断しています。
なので、SEO対策を行う際には、ヘッド要素の情報の編集がカギになってくると言えます。

ボディ要素内はページの内容です。目に見える部分を指定しています。
webサイトの核とも言える部分ですね。

<body>で囲まれている中に、よく探してみると
<h1><h2>
といったタグを確認できると思います。

これらは見出しです。大見出しや中見出しなど、レベルに応じて設定していきます。

より見やすいページを作成するためには、見出しの使い方が大切であると言えるでしょう。

段落や改行なども要素として処理されます。

例えば、改行には<br>というタグを指定します。
このように、ある程度html文書の構造は決まっているのです。

この記事を共有する
  • facebookでシェアする
  • ツイッターでつぶやく
  • LINEで送る
関連記事
スマホ

電話番号「020」と、広がる「IoT」の世界

枯渇していく携帯番号 携帯電話の普及に伴い、現在どんどん番号が枯渇しています。もともとPHSで御馴染みだった「070」(平成25年から携帯電話でも使用)にいたっては総務省によると2018年で枯渇する可能性があると言われています。現 ...

給料と幸福度の高い職業

給料と幸福度の高い職業 米求人サイトのキャリアブリスは、年収10万ドル(約1100万円)以上の職業に限定した幸福度ランキングを発表しました。 ランキング作成にあたり、キャリアブリスは2015年1月から2017年6月1日までに従業 ...

AIによって増える仕事・残る仕事

最近AI・人工知能によって無くなってしまう仕事の話をよく耳にします。 なので今回は、AI・人工知能によって増える仕事、残る仕事の話をしたいと思います。 増える仕事 ・ロボット・アドバイザー ・単純化するエキスパート ・輸送アナリス ...

大画面ディスプレイで作業するメリット

8月に入社させていただいてから今までずっとノートパソコンで作業をしていました。 しかし、なんと先日ノートパソコンの画面を写すディスプレイをいただきました! とても快適になったので今回は大画面ディスプレイで作業するメリットについて書きます ...

文字入力を劇的にスピードUP!タッチタイピングを習得しよう!

パソコンを使うなら是非とも身に付けたいタッチタイピング パソコンを使用するにはマウスとキーボードの操作は切っても切れないものです。 特にプログラミングを行う際にはキーボードでの文字入力が速ければ速いほど効率も上がります。 キー ...

Adobe FLASHが通った道

ウェブ技術の内情は日々変わり続けています。 去年流行していたデザイン手法が今ではもうすでに古臭い手法となっていたり、トレンドと廃りのサイクルの速さはファッション業界に匹敵もしくは凌駕する勢いであると感じます。 過去に、流行り ...

KURATAS

子供の頃に夢見たロボット

未来のロボット 未来のロボットといえば、手塚治虫氏の鉄腕アトム、機動戦士ガンダム、トランスフォーマー、ドラえもんなど様々なロボットが思い浮かべることができると思います。 現代で活躍するロボットといえば、コミュニケーションロボットのPep ...

謎?のボタン[CapsLock]キーの使い道

文字入力中に急に出てくる大文字 キーボードで文字入力をしていてよく聞くトラブルに 「いきなり大文字しか打てなくなった!壊れた!」 というハプニングがあります。 もちろん壊れた訳ではないのですが、 ・何がどうなってそんな事に ...

Twiiterがルールを変更

今回は日本でも最近事件になった。Twitterのルールが変更になったことについて書かせていただきます。 Twitterのルールが変更に アメリカのTwitterは11月3日、サービスルールを変更し、自殺や自傷行為の助長などは明確に違反事 ...

2017年のブラウザシェアランキング

ブラウザは何を使っていますか? あまりブラウザに拘りが無い方はOSにプリインストールされているブラウザを使っている方が多いかもしれませんね。 Windowsであれば Internet Explorer(IE)、もしくはMicroso ...

Knocknote Education(ノックノートエドゥケーション)