TECHブログ

【初心者向け】HTMLとは何か?

Webページを作る際に必ず使うであろうHTMLとは一体何かを初心者の方向けにまとめます。

HTMLとは?

HTMLは、正式名称をHyperText Markup Languageといいます。Webページを作成するための言語です。
インターネット上で公開されてるWebページのほとんどがHTMLで作成されています。
HTMLをインターネット上に公開することで、どこでも誰でもWebページを見ることができます。

ハイパーテキストとは

ハイパーテキストとは、文字通り高機能なテキストのことです。
高機能というのは、文書中の指定箇所にリンクを貼ることができ、他のページに移動することができることを指します。
この機能を、Hyper Text Link(ハイパーテキストリンク)と言います。

マークアップとは

マークアップとは「しるしをつける」という意味で、裏側のソ−スがHTMLタグを使って表記されていることに基づいています。

HTMLの種類

HTMLにはHTML4.01XHTMLHTML5などいくつか種類があります。
それぞれ使えるタグに違いがあります。使いたいタグに応じて、HTMLのバージョンを確認しましょう。

HTML4.01

  • 対応しているブラウザが多い
  • 記述方法に比較的決まりごとが少ない
  • 独自の要素(タグ)を定義することができない
  • DOCTYPE宣言は以下のいずれか

<DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>


<DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>


<DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

XHTML 1.0

  • 「HTML 4.01」から派生
  • 対応しているブラウザが多い
  • 記述方法に決まり事が多い
  • 独自の要素(タグ)を定義(厳密にいうと、他の名前空間を持ち込む)ことができる
  • DOCTYPE宣言は以下のいずれか

<DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>


<DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>


<DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

HTML5

  • 一部のブラウザでは対応していない。対応済みのブラウザでもすべての機能は対応していない
  • 記述方法に関して比較的決まりごとが少ない
  • 他の言語やファイルの埋め込みに対して柔軟に対応できる
  • 検索エンジン等がウェブサイトの構造をより詳しく把握できるようになった
  • DOCTYPE宣言は以下

<DOCTYPE html”>

このようにHTMLの種類を把握して、場合によって使い分けができるようにしましょう。

HTMLでできること

先述したように、HTMLをWeb上に公開すれば、世界中の誰もがそのファイルを見ることができるようになります。
例えば、自分の趣味を載せたり、webサービスやwebメディアを作ることもできます。
しかし、気をつけないといけないことも多々有ります。
個人情報や、企業の情報の漏洩や、サーバーを乗っ取られるような攻撃を受けることも考えた上で制作をする必要があります。

HTML5について

HTML5はHTML言語の最新のバージョンとして、標準化作業が進められています。
文章の構造化が進んでいて検索エンジンなどに対してページの内容をより明確に伝えられるようになり、動画や音声データの公開もより便利に、そして、オフラインでWebページの閲覧が可能となります。

タグについて

HTMLはタグと言うものを使って書きます。“< >“で囲まれたものをタグと言います。
タグは基本的に開始タグと終了タグに分かれていて、開始のタグは<タグ>のように書き、終了タグは</タグ名>と書きます。
また、“< >” は必ず半角文字で書きます。

基本的な4つのタグについて。

これらのタグは必ずHTMLに必要なものなので確実に覚えましょう。

<html>~~</html>
「これはHTML文章ですよ」と宣言しているタグ。

<head>~~</head>
このタグの中に基本的なページの情報を書きます。

<title>~~</title>
ページのタイトルを指定します。

<body>~~</body>
実際にブラウザの中に表示させる内容をこの中に書きます。

実際の書き方は以下のようになります。

<html>
<head>
<title>タイトルを指定する</title>
</head>

<body>
  ここにページの内容を書く
</body>
</html>

titleタグについて

<head>から</head>の間にページのタイトルを書きます。書き込んだタイトルはブラウザのタイトルバーに表示されます。

DOCTYPE宣言とは

DOCTYPE宣言とは「Document Type Definition」(DTD)のことで、日本語に訳すと「文書型宣言」という意味です。
つまり、どのバージョンのHTMLやXHTMLで作成されているかを宣言する役目を担っています。 DOCTYPE宣言はページの先頭に書く必要があります。

DOCTYPE宣言がないとどうなるのか

DOCTYPE宣言がないと、一般的なブラウザではレンダリングモード(表示方法を決めるブラウザの状態)が互換モードになります。
互換モードだとブラウザがCSSを正しく読み込まない可能性があるので、レイアウトが崩れてしまうことが有ります。

go top