Knocknote

  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で送る
関連記事

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

HTML講座 第1回目:htmlとは? htmlは言語 まずはそもそも、htmlとはなんなのか?という基礎の手前の超初歩から始めていきたいと思います。 htmlというのはHyper Text Markup Languageの略 ...

給料と幸福度の高い職業

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

ビジュアルプログラミング言語

2020年のプログラミング必修化 2020年に小学生のプログラミング必修化に向けて様々な学習ツールが発表されています。 中でも使いやすく、拡張性の高いビジュアルプログラミング言語は特に注目を浴びているのではないでしょうか? 今回は ...

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

ウェブサイトの仕組みを知る! html編 其の1ウェブサイトの仕組みを知る! html編 其の1 の続きです。 cssの役割 htmlとはなにか、をザックリと説明したところで、よりhtmlへの理解を深めていただくために説明しなく ...

オンライン画像編集サービス「Pixlr」が凄い!

ウェブ制作において欠かす事のできない写真や画像。 自分で撮影した写真やフリー素材を使う事が多いと思いますがその画像をちょっと加工して自サイトらしさを出したいという事はよくあります。 画像の縦横比やサイズを変えたり、コントラス ...

LINEブログがもたらす革命

LINEブログが一般の人が使えるようになったのはご存知でしょうか。 アメブロ、livedoorブログ、はてなブログ等、世の中には一般の人が書けるブログサービスが数多く存在しております。 そんななか、LINEが一般向けのブログサー ...

日本はIT後進国なのか

IT後進国か否か 日本はIT機器の普及なども充実しているようにみえ、経済的にも先進国として認識されている。 また戦後から産業か発展し日本製が多く出回るようになったが、現在はどうか? 現在、パソコンは日本製よりも海外製の ...

Webマーケティングのプロが解説するネット広告1

見ないという日はないというくらいに、身近になっているインターネット。 調べものをしたり、SNSを使ったり、ゲームをしたりと、その活用方法は様々かと思います。 しかしながら、ネット上に表示される広告に注目される方は多くはないは ...

プログラミングには正解がない、探究心こそ全て?

プログラミングには正解がない 同じ結果が返ってくるプログラムだとしても、出来上がったソースコードはプログラマーにより差が出ます。 変数名のつけ方ひとつでも、プログラマーによって大きく異なるものです。 つまり、プログラミングは正 ...

画像の一部だけが動く?!不思議な写真シネマグラフ

先週消えつつある技術としてFLASHの記事を書きました。 ウェブ上でアニメーションコンテンツを見せる為の代表的な技術でしたが、残念ながら時代の流れと共に利用者が少なくなりつつあります。 しかしアニメーションなど動きのあるリッ ...

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