HTMLとは【Webディレクターなら知っておきたい基礎用語】

マークアップ言語の一つであるHTML。
Webディレクター自身がかけなくても必ず理解していなくてはいけない言語と言えます。
私自身もHTMLとCSSは自分で記述し、一人でサイト制作が行える程度の技術までは一通り習得しました。(10年以上前の話でHTML4やXHTMLが主流の時代の話ですが・・・)
現在ではさらに進化しHTML5が主流となり、HTMLで実現できる範囲も以前に比べるとだいぶ広がっていることは間違いはありませんが、それでもHTMLの理屈を理解していることによってコーダーとのコミュニケーションや品質チェックなどの工程で大変助かっています。
ここではHTMLって何?というWebディレクター初心者の方に、どんな言語なのかを解説していきたいと思います。
HTMLとは?
HTMLとはウェブページを作成するために開発されたマークアップ言語のことで、Hyper Text Markup Languageの頭文字をとりHTMLと呼ばれています。
Markupとは目印をつけるという意味があり、Hyper Text Markup Languageとは、ハイパーテキストに目印をつける言語という意味になります。
目印をつけるとは文章中の要素を明確に示すことを意味していて、文章は基本的に「タイトル」「見出し」「段落」などの要素から成立していますが、コンピューターはこの構造を判断できないため、文章にこれはタイトルです、ここは段落ですなどの目印をつけてあげることでコンピューターに文章構造を理解できるようにさせています。
このように、どの文がどの要素にあたるのかを明確に示して文章構造を定義づけることがマークアップに当たります。
タグと呼ばれる目印を付けることで言葉やテキストに意味を持たせています
【タグと呼ばれる目印を付けることで言葉やテキストに意味を持たせています】
<title>●●●●●</title>→●●●●●がタイトルですよ~
<h1>▲▲▲▲</h1>→▲▲▲▲は見出しですよ~
<p>■■■■■</p>→■■■■■は段落ですよ~
次にハイパーテキストについて、ハイパーテキストとはハイパーリンクというクリックすると別のページに行けるリンクを挿入できる高機能なテキストのことを指します。
ハイパーリンクは別ページへのリンク先以外にも、画像や動画、音声などの様々なデータファイルもテキスト内に埋め込むことができ、色々な情報を表示することができるので、ただのテキストではなくハイパーなテキストと呼ばれています。
このようにHTMLを使うことによってコンピューターは豊富な情報を理解できるようになり、人間に読める形でウェブページを表示してくれます。HTMLの身近な使用例ではウェブサイトや HTML形式の電子メール、スマホアプリなどがあり、文字だけでなく画像が表示されていたり、リンクが貼られていてメールから直接ウェブサイトへ移動できるようになっていたりするメールは、HTMLで作られていて、一般的なメールよりも目立つように作れるので、販促や宣伝など、商用メールとして利用されていますね。
現在のHTMLの主流はHTML5
現在HTMLはHTML5のバージョンが推進されています。
HTML5はその以前の4.01のバージョンに比べて、 videoタグやaudioタグ、canvasタグなどの新しい要素や属性が追加されていて、headerタグやfooterタグなど、構造化タグによって明確に文章構造を示すことができるのが特徴ですね。
さらに加えてフォーム関連の属性によって入力補助やチェック機能などが充実し、ドラッグ&ドロップの機能を取り入れるなど、以前と比べてウェブページを構築しやすい環境になっています。
自分で手を動かしてHTML5を理解してみよう
冒頭でも書きましたがWebディレクター自身がコーダーの役割を果たし、デザイナーから受け取ったデザインをコーディングするということは稀だと思います。
基本的にはコーダーやプログラマーに指示を出し、品質チェックをするという立ち位置ですよね。
コンピューター言語というと苦手意識を持ってしまう方もいらっしゃるかもしれませんが、サイト制作に携わる以上コーダーやプログラマーと一緒に仕事しないわけにはいきませんし、指示しないわけにはいきません。
彼らとコミュニケーションを上手に取り、制作を上手に進めるためにも私はWebディレクターの方にもHTMLやCSSを勉強することをお勧めしています。
上のWebディレクターが知識を身につける方法でも書きましたが、HTMLやCSSであれば一週間あれば大まかなことは理解できます。
1週間頑張れば、これまで知らなかった言語を身につけることができ、コーダーやプログラマ―と上手に付き合っていけるようになるんならお安い御用じゃないですか?
htmlと併せてWebページの成り立ちに必要なCSSも是非理解しておきましょう!