そもそもHMTLって何??WEBサイトの裏側をご紹介します!

プロモーションのこと、制作のこと、気になる話題をお伝えします

  • WEB

そもそもHMTLって何??WEBサイトの裏側をご紹介します!

HTMLって何?WEBサイトの裏側をご紹介します!

どうも!

最近、夜はめっきり寒くなりましたね!今年は気温が下がるのも早く、昨日とうとう風邪をひいてしました…。

もう夏も終わりなんですね…。夏が好きな僕としてはなんとも切ない気分です。

さて、今回は「そもそもHTMLって何?WEBとは??」といった根本的なところをお話したいと思います。

 

WEBサイトが表示される仕組み

そもそも、WEBサイトってどういう仕組で表示されているかご存知でしょうか?

私達が普段よく見るWEBサイトはどれも、HTMLと言われるマークアップ言語で表示されています。

HTMLとは何??

下の引用分にあるように、HTMLとは頭文字をとった略語で、正しくはHyperText Markup Languageと呼びます。

~引用~

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ、HTML(エイチティーエムエル))は、ハイパーテキストを記述するためのマークアップ言語の1つである。
World Wide Web (WWW)において、ウェブページ(1990年代後半頃からはコンテンツという語も利用されている。
「中身」という意味の語であり、大層な意味は無い)を表現するために用いられる。
ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。

Hyper Text Markup Language参照

このhtmlとは、リンクや画像などを文章構造として示すための言語として、コードを組み合わせて実際のWEBサイトを表示させています。

現在では、バージョン5.1までがリリースされています。

よく使われるタグ一覧

見出しタグ

見出しタグとは、文字通りページの見出しを示すタグになります。h1~h6まで見出しのレベルがあり、数字が小さいもの程、レベルが大きくなります。

また、基本的に全ての見出しタグは1ページに対して複数使用しても問題はありませんが、適切な使用をしないとGoogleなどのロボットが巡回した際に、複数同じレベルの見出しタグがあると意味が弱まったりといった弊害が出る可能性もありますので、注意が必要です。

~Point~

h1タグは、基本的に1ページ一つ、その他のh2~h6タグは複数回の使用するよう心がけるのが理想とされています。

リンクタグ

WEBサイトの中で、違うページに移動する際、このリンクタグの示すアドレスを辿ってページが移動します。

イメージタグ

画像を示すタグになります。WEBサイトでは、目の不自由な方も利用されますので、スクリーンリーダーで読み上げる際に、画像の説明が読まれるようalt属性に画像の説明をテキストで入力し、利用するユーザーに優しいWEBサイトになるよう心がけましょう。

 

で、実際のHTMLはどんな風なの??WEBサイトの表側と裏側

つらつらと文章でご紹介してきましたが、文章だけだとイマイチ伝わりづらいと思いますので、ブラウザで見れるWEBサイトの表側(私達が普段目にしている表示部分)と裏側(表示を示すためのコード部分)を画像でご紹介します。

まずは、表側。これは弊社のWEBサイトになります。

シードアシスト HMTL 表示部分

 

次に裏側。表側にキレイに表示させるために、ブラウザの裏側ではこんなコードを組んでいます。

※ソースコードの一部になります。

シードアシスト HTMLソース

 

英語やら文字がわんさかですね…笑

実こうして実際には文章を示すタグを組み合わせて、「ここは画像」「ここはリンク」などを入力してWEBサイトは表示されています。

もう少しだけ説明すると、表側にキレイに表示をする時には、レイアウトや、文字の色などをしているスタイルシートというファイルを組み合わせて表示をさせます。

また、WEBサイトに動きをつけたり、複雑な処理を行う時には、javascripptやphpなどといったプログラムも使ってWEBサイトを構築しています。

 

WEBサイト制作における文章構造は大事です

WEBサイトの構造において、見出しや画像など文章構造しっかり示す事はとても大切です。

インターネットは目の見えない方も利用されますので人やロボットからも見やすいWEBサイトは、グーグルもWEBサイトを利用するユーザーにとって使いやすいWEBサイトを評価する傾向にあります。

 

 

 

いかがだったでしょうか?

WEBサイトは見出しや画像を示すためのタグを使って構築され、見た目のレイアウトはスタイルシートと組み合わせて表示されているんですね。

次回はhtmlの歴史的な事もお話でればと思います!

ではでは!!

 

 

//____________

シードアシストでは適切な文章構造でWEB サイトを利用する全てのユーザーに使いやすいWEB制作を心がけています!

WEBサイトの事なら、お気軽に大阪のWEB制作会社シードアシストへご相談下さい!

 

 

 

その他の最新コラムはこちら