Web関連

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

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の歴史と未来

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    鍵からスマートフォンで開閉できるスマートロック

    みなさん、手元に何かしらの鍵をお持ちですか?家の鍵や自転車の鍵、様々な…

  2. Web関連

    初心者でも分かるリッチスニペット対策!

    SEOにおいて、Googleロボットに内部情報を伝えるだけでは足りませ…

  3. Web関連

    フルスクリーンムービーを取り入れたWebサイトのメリット、デメリット

    最近多くのWebサイトで動画を活用しているのを見かけるようになってきま…

  4. Web関連

    ギャップで魅力的なリクルートサイトにしよう

    世の中、ギャップによって印象や魅力が増進・半減とありますが、人やモノだ…

  5. AI関連

    デジタルシフトするアフターコロナの新しい時代のビジネスモデル「DX」とは?

    デジタルトランスフォーメーション(DX)とは「デジタルトランスフォ…

  6. Web関連

    ホントは違った!メールで使う「Re:」は返信という意味では無かった!

    スマートフォンの普及とともにLINEをはじめとするコミュニケーション…

おすすめ記事

最近の記事

  1. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  2. 人が対応するのが正しいの?DX(デジタルトランスフォーメーシ…
  3. 人間拡張って聞いたことがありますか?デジタル化が背中を押して…
  4. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  5. 【初心者向け】ここに注目!スマートフォン用バナーを作成しよう…

アーカイブ

  1. Web関連

    Web制作者必見!!お1人様用コンテンツの需要~旅行編~
  2. AI関連

    【人工知能(AI)×ホームページ解析】Googleアナリティクスの新機能「ユーザ…
  3. Web関連

    ホームページ制作会社がまとめるカスタマーサポートに必要なポイント!
  4. Web関連

    Web制作会社が教えるDDos攻撃からのWEBサイトを守る方法
  5. Web関連

    写真も進化!WEBサイト制作に活用できる動画と組み合わせた写真
PAGE TOP