Web Survive

Webで生きる道を模索するブログ

HTMLとは?

Webサイト制作に必須となる「HTML」について簡単に解説します。

HTMLとは?

html-about-mechanism
HTML(HyperText Markup Language)は、
Webページを作成するために開発された言語です。
現在、インターネット上で公開されてるWebページのほとんどは、
HTMLで作成されています。
主に、見出し、段落、リスト、表(テーブル)、フォームといったような、
ページ内のコンテンツそれぞれに役割設定を行う事でWebページを構造化します。
この作業を専門的には「マークアップ」といい、「印をつける」という意味です。
制作したHTMLファイルをブラウザが読み込むことで、
HTMLファイルの内容をブラウザ上にWebページとして表示することができます。

HyperText(ハイパーテキスト)

高機能なテキストのことです。
文書中の指定箇所にリンクを貼ることができ、
他のページに移動することができます。

この機能を、Hyper Text Link(ハイパーテキストリンク)と言います。

Markup Language(マークアップ言語)

人間が一般的に用いる自然言語を
コンピュータにも文脈や意味などが理解できるようにするために
専用の文字列(タグ)で補記した言語のことです。

HTMLの役割

人間が見れば常識的に判断できることも、
コンピューターが処理するためには何らかの明確な仕組みが求められます。
文書内の各部分に目印をつけて、
その部分がどんな要素なのかを明確にすることで、
コンピュータがその文書の構造を理解できるようになります。
具体的には、検索エンジンがWebページの構造を把握して解析したり、
ブラウザがWebページ内の各要素の意味を理解して
閲覧しやすいように表示することなどが可能になります。
このようにコンピュータに理解できるように文書の構造を定義することこそが、
HTMLの最も重要な役割
と言えます。
この際に、目印をつけるための記号として使用されるのがHTMLタグです。

HTMLの種類

HTMLには「HTML」「XHTML」「HTML5」など、いくつか種類があり、
使えるタグやルールに違いがあります。
現在はHTML5が主流となってきていますので
これから覚える方は「HTML5」を覚えていくと良いでしょう。

HTMLファイルの作り方

HTMLを使ってWebページを作る場合、
メモ帳などのテキストエディタを使ってタグを記入していきますが、
それをHTMLファイルとして保存しブラウザで開くと、
タグの指定されたとおりにブラウザに表示されます。
HTMLファイルは、「.html」という拡張子をつけることで、
HTMLファイルであることをコンピュータが認識してくれます。

(例 index.html)

HTMLとCSSの関係性

html-about-relationship
HTMLと、別のページで紹介している
CSS(Cascading Style Sheets)の関係を解説します。
HTMLで構造化したページをそのままブラウザで表示させることはできますが、
シンプルで、ほとんどデザインがされていない状態になってしまい
素晴らしい内容のコンテンツがあったとしても、
魅力の無いページに見えてしまいます。
そこでCSSを利用することで、
ページを見栄えよく魅力的なページにすることができます。

このようにCSSはHTMLで構造化したページに
「ビジュアルデザイン」という価値を加えるための言語
です。
CSSはHTMLに適用するものなので、
HTML自体がしっかりと書かれていないと
CSSを効率的に制作するのが難しくなります。
つまり、HTML自体が合理的に書かれているかどうかが、
CSSのクオリティに大きく影響します。
HTMLで構造をしっかりつくる」次に「CSSで見た目を設定する」
というのが基本的な作業の流れとなりますので
「まずは構造、次に見た目」という順序を忘れないようにしましょう。