Web関連

HTMLの構造を考える時に大切な3つのこと

0

HTMLはもともと文章をまとめるもの!

HTMLとはいったい何なのか、どこで生まれたのか、という部分から説明しましょう。

1989年頃、欧州原子核研究機構(通称「CERN」)という機構で、論文などの情報の管理方法が問題となっていました。

論文の情報が膨大な量になり、欲しい情報を探すことが難しくなっていたためです。

そこで、情報をサーバーに蓄積させてブラウザで表示させることで、情報収集できるようになれば便利!

ということになり、これが実現され効率化に成功。

特に便利だったのは、アナログではできない “関連している情報にリンクする”という概念が生まれたこと。
現代でもWikipediaなどを見ていると感じると思いますが、とても革新的な出来事でした。

これらをHTMLという言語で設計したのが、イギリスの計算機科学者「ティム・バーナーズ・リー」という方。
W3Cの創立者でもあります。

上記のような経緯があるので、もともとHTMLにデザイン要素を記述する必要はなく、論文(テキストデータ)を保存するために作られました。

これを踏まえてHTMLを実際に見てみると、本にそっくりなのです!

<title> ⇒ 本の題名
<h1> ⇒ 大見出し
<h2> ⇒ 中見出し
<p> ⇒ 段落
<img> ⇒ 挿絵
<table> ⇒ 表

 

正しく書かれているHTMLは、上記のタグが順序よく書かれています。

間違った書き方をしているHTMLの場合、例えば、中見出し(h2)の後に大見出し(h1)が書かれていたりします。

こんな本はありませんよね。

Googleなどの検索エンジンも、この辺りをよく見ていて検索順位にも影響がでます。

見やすい本にするために!

もともとは論文情報がほしい人しか使っていなかったので、見栄えなどはどうでもよかったのですが(←想定ですが)、現代のようにビジネスツールとしてWebを利用したりするようになってくると、見栄えは重要です。

そこで、開発されたのがCSSです。

これを利用すれば、配置や文字の大きさ、色などデザインに関するほとんどの表現が可能になりました!

ですが、世の中のホームページを見ると未だに配置や文字の大きさ色の設定まで、HTMLに書かれているものも多いようです。

しかし、これはあまりオススメできません。
Googleなどの検索エンジンも、本としてHTMLを”読む”ことができないのでページの評価は下がってしまいます。

検索エンジンのためのHTML!人間のためのCSS!

このようにHTMLとCSSの歴史から考えると、

“人間のためのCSS”
“検索エンジンのためのHTML”

が存在しているといっても過言ではないと思います。

これを理解したうえでHTMLを作成するのと理解せず作成するのでは、大きな差が生まれます。

Web制作をしている人もそうでない人も、ホームページを1冊の本として見ると面白いかもしれません!

img_html_book02.jpg

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ホームページ制作

SEO・SEM

関連コラム

Webの歴史と未来

0

大手企業が実践しているリターゲティング広告をする2つのメリット前のページ

世界の「美しい女性」の基準次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. AIに求められているものは、実は意外な物だった
  3. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    対岸の火事ではない!?被害拡大中のwebページ改ざんについて。

    主に企業や大学、公共団体、個人のWebサイトが悪意のある人間によって…

  2. Web関連

    Web制作でも重要!顧客満足度を高めるための3つポイント

    ちょっと前にうちの社長が「本を読むときに、オススメ!コレめっちゃ便利」…

  3. Web関連

    Webデザイナー必見!構図をマスターする黄金テクニック

    皆さんは、Webサイトを見ていて自分がほしい情報が見つからない。なんて…

  4. Web関連

    コピーライトに込められた思い。尾形真理子から学ぶ言葉の作り方

    こんにちは!デザインよりプログラムの方が得意なデザイナー新人の山本です…

  5. Web関連

    海外のハイクオリティな写真まとめサイト3選

    世の中には写真の購入サイトがいっぱいありますが、皆さんは利用したことあ…

  6. Web関連

    「QRコード」+「Webサイト」=「顧客獲得」

    今回はリアルとネットをつなぐO2Oマーケティングにも良く利用されるQR…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    ロボット産業拡大中!気になるロボット集めてみました。
  2. Web関連

    Web制作会社社員だからこそ知りたい!手書きの案件メモを整理するためにやっている…
  3. AI関連

    SDGsについて
  4. Web関連

    レスポンシブデザインのHTMLコーディングにある落とし穴(Viewport編)
  5. AI関連

    無人化・自動化って本当に進んでるの?
PAGE TOP