html5について知るべき5つのこと

 

 

どうしてもhtml5という響きは、プログラミング初心者にとって、「とっつきづらい」難しさを孕んでいますね。特に文系の人にとっては、これを見るだけで「ああ、もう難しそうだからやめておこう」という気持ちになってしまうものです。だからこそ今回は、html5に親しみを持ってもらうための記事をご用意しました。実際、html5の基本であり、html5そのものとも言えるのがコードです。コードは難しいものという先入観を取り払い、どんなコードがあるのか好奇心ベースで探っていきましょう。それでは、基本中の基本として知っておくべきコードとその役割をご紹介しましょう。

 

1 <!DOCTYPE html>

 

まずは<!DOCTYPE html>です。これは基本中の基本…の中の基本です。大丈夫です、何も難しいことはありません。これを書く(記述)することでどのような効果が得られるのかをご紹介しましょう。HTMLドキュメント全ての冒頭にこのコードを書きます。これがあることでブラウザは、「HTMLを読み込んでいるのだ」と理解できるのです。コードはそもそもブラウザに読んでもらわなければ意味がありませんね。FireFoxやChromeといったブラウザがあり、これがコードを読み込んでくれるおかげで、実際に私たちはウェブサイトを見れているのです。なので、まずドキュメントの最初にこれを記述して、「これはHTMLですよ(HTML5ですよ)」と教えてあげましょう。厳密に言えば、これ自体はHTMLのタグではありませんが、基礎の中の第一歩として知っておいて損はないでしょう。逆に知らないと、毎回目に止まるたびに気持ち悪い思いをすることになります。

 

2 <html>

 

さあ、続いてはこちら。これの役割は何だと思いますか?ヒントは…先ほどと同じ。もはやヒントというよりも答えですね。つまり、この<html>もコードの最初に記述されて、「これはHTMLですよ」とブラウザに伝える役目を果たします。何で、二つもブラウザに対する説明が…と思うかもしれませんが、どうかここは寛大になりましょう。最初にブラウザに読み込みをお願いするためにはこれも必要なのだと覚えておいてください。ちなみに、コードの最後には「ここでコードは終わりですよ」と教えるために</html>を記述する決まりになっています。

 

3 <head>

 

基本的なページの場合、<head>タグにはあなたのウェブサイトやページのタイトルが含まれます。それが一番簡単な例でしょう。ただし、他にも記載できる情報やタグはあるので、段階を踏みながら追い追い理解していきましょう。

 

4 <title>

 

ご想像のとおり、これはページのタイトルを定義するためのHTMLタグです。 これの使い方は極めて簡単です。タイトルタグ、そしてもう一対の“閉じる”ためのタイトルタグの間に、ページのタイトルを記入すればいいだけ!簡単ですね。どのページにもタイトルが必要となるので、絶対に理解しておきたいタグの一つです。

 

5 <meta>

 

タイトルタグと同様に、メタタグはページのヘッダー内に配置されます(このメタデータは、モバイルデバイスのメタデータとは異なります)。メタデータは主に検索エンジンで使用されるもので、あるページの中にどのような情報が書かれているのかを説明するために存在します。メタデータの中には、さまざまな種類がありますが、以下が最も一般的に使用されているものです。

 

description – あなたのページの基本的な説明

keywords – あなたのページに該当するキーワード

author – あなたのページの著者

viewport – ページがすべてのデバイスで良好に見えるようにするためのタグ

 

今回は、ここまでにしておきましょう。HTMLはウェブサイトやページに欠かせない要素です。まさに、細胞のような存在でしょう。だからこそ、それぞれのタグやコードの役目を理解することは重要です。勉強をするというよりも、「このタグはどんな仕事をしているのかな」という感覚で知識を深めていくことがオススメです。それぞれのタグが役割をこなしながら全体としてのWebページやウェブサイトができあがるプロセスは実に美しいものです。