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. 新しい販売形態であるDtoCについて考えてみる
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. Web関連

    就職活動解禁直前!知っておくとライバルに差をつけられるメールマナー

    こんにちは、採用担当の真野です。最近では、内定者への連絡や次年度へ向け…

  2. Web関連

    携帯電話の歴史の移り変わり

    スマートフォンを使っていてふと思ったのですが、時代の移り変わりは早いな…

  3. Web関連

    【バズるコラム】休みなしで10年記事を書き続けた無名ブロガーの「10分で書けるコラム」

    ・コラムをたくさん書いて新規ユーザーを獲得したい・でも、書く時間が…

  4. Web関連

    ECサイトは個別接客が売れる!

    突然ですが、絶対にお客さんが商品を買ってくれる方法があるのをご存知です…

  5. Web関連

    いろいろ使える!よくわかるTwitterのつぶやき分析

    国内ユーザー数、1,980万人(2014年6月時点)を誇るSNSサービ…

  6. Web関連

    Webデザイナーだからこそ、一味違うものを送りたい!オリジナル年賀状作成の3ステップ

    みなさん、年末年始の楽しみはなんでしょうか?私は、日ごろお世話にな…

おすすめ記事

最近の記事

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

アーカイブ

  1. img

    AI関連

    IKEA原宿でみた今後の実店舗の役割
  2. Web関連

    ECサイトの売上を向上させたい 第3回目
  3. Web関連

    【Web最新技術】クラウドが現実世界を変え始めた 駐車場編
  4. AI関連

    AIは人に寄り添う!? 人工知能=冷たいという考えは古い!
  5. Web関連

    ポジティブでいることは成功への近道?! Web制作会社だからこそ求められる理由と…
PAGE TOP