HTMLの基本的な使い方
HTMLとは
HTMLとは「Hyper Text Markup Language」の頭文字を取ったものです。WEBページを表示するためのマークアップ言語でW3C(World Wide Web Consortium)により標準化されています。
HTMLの基本書式
HTML基本書式は以下の通りです。タグと呼ばれる<>で囲まれた要素により構成されます。タグには開始タグ<>と終了タグ</>が有り、この中にその内容を書きます。
以下は最も基本的なHTMLの構造です。htmlタグで囲まれた内容の中にheadタグとbodyタグがあります。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hello World!
</body>
</html>
DOCTYPE
DOCTYPE宣言と呼ばれます。HTMLの一番最初に以下の通り記載します。HTML5より前はDTD等の表記も必要でしたがHTML5以降はシンプルにこれだけです。
<!DOCTYPE html>
html要素
html要素はその範囲内がHTMLで記述されているものだと宣言するものです。DOCTYPEに続き一番最初にhtml要素を記述します。
通常、html要素では以下のように言語設定及び国コードの設定を記述します。lang="ja-JP" です。HTMLの言語設定についてはこちらで詳しくまとめています。
このlang="ja-JP"の部分は、要素の様々なサブ要素を指定してゆくもので属性と呼ばれます。属性には全ての要素で使えるグローバル属性と、要素ごと固有に利用できる属性、ユーザーが独自に規定するカスタムデータ属性があります。
<html lang="ja-JP">
～内容～
</html>
～ 主なグローバル属性 ～
| グローバル属性 | 説明 |
| lang | 言語、国を指定 |
| title | タイトルを指定 |
| style | スタイルを指定 |
| id | 要素を識別するためのIDを指定(CSSで使用) |
| class | 要素を識別するためのクラスを指定(CSSで使用) |
| tabindex | タブストップ、タブ順を指定 |
～ カスタムデータ属性 ～
data-id="" data-name="" を利用して属性をユーザーが独自に規定します。
<div data-id="1" data-name="カスタムデータ"></div>
head要素
タイトル、参照するファイル、そのHTMLページに関する構造化情報などが記述されていると宣言するための要素です。
<head>
～タイトル、参照するファイル、構造化情報など～
</head>
body要素
内容（コンテンツ）が記述されていると宣言するための要素です。
<body>
～内容（コンテンツ）～
</body>
コメント
HTMLでのコメントは以下の通りです。
<!-- ここにコメントを書く。 -->
閉じスラッシュ
先にタグには開始タグ<>と終了タグ</>が有ると書いていますが、<img>、<br>等、終了タグのない要素があります。この場合、HTML5以前は閉じスラッシュを書きましたが、HTML5以降は書いても書かなくてもどちらでも良くなりました。
閉じスラッシュを書く
<br/>
閉じスラッシュを書かない
<br>
HTMLを書く場所
HTMLはテキストエディタで上記タグを書き、拡張子を.htmlにして保存するだけです。コンパイルの必要はないインタープリタ方式のプログラム言語です。