Programming Style

メニュー

初心者がアプリ開発者になるためのプログラミング学習サイト

[HTML5] HTML5の書式について学ぶ

html5

ここではHTML5の基本的な書式について説明します。

 

広 告

 

目次

前提条件

  • なし

動作確認端末

  • なし

1. DOCTYPE宣言

HTMLファイル(拡張子が.htmlのファイル)を作成するためには、まず先頭行にDOCTYPE(ドックタイプ)宣言を記述する必要があります。DOCTYPE宣言では、「このファイルがHTMLであること」「どのHTMLバージョンで作成されているか」を宣言します。

HTML5のDOCTYPE宣言は以下のように記述します。

 

HTM5のDOCTYPE宣言

<!DOCTYPE html>

Note : 以前のHTML4.01やXHTML1.0では以下のように記述していました。HTML5の場合は、だいぶシンプルな記述になったことが見て取れます。

 

HTML4.01 Transitionalの場合

<!DOCTYPE html public "-//W3C//DTD HTML4.01 Transitional//EN">

XHTML1.0 Strictの場合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

以前のDOCTYPE宣言には、ファイル内であらかじめ使用するタグや属性を定義するためにDTD(Document Type Definition)を記述する必要がありましたが、HTML5ではそれがなくなりました。

 

2. タグと要素の形式

タグとは<記号と>記号で囲った要素名を指します。タグには開始タグと要素名の前に/(スラッシュ)が入った終了タグがあります。

 

開始タグ

<要素名>

終了タグ

</要素名>

要素

<要素名>要素の内容</要素名>

以下に、HTMLの実例を示します。

 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
  </head>
  <body>
  <body>
     <p>本文</p>
</html>

<html>が開始タグ、</html>が終了タグで、<html></html>でマークアップされたテキストの他の要素がhtmlの要素になります。

 

要素は必ず親となる要素の入れ子になっている必要があります。

 

正しい例

<p><span>正しく入れ子になっています。</span></p>

誤った例(開始タグと終了タグが前後している)

<p><span>誤った例です</p></span>
Note : マークアップするとは、タグなどのHTMLの構文を記述し、文章構造やレイアウトを指定していくことを指します。

 

3. 属性

属性とは、要素の持つ付加的な情報をタグの中に記述されたものです。属性を記述することで、要素に対してより細かな指定が可能になります。

 

<要素名 属性名="属性値">要素の内容</要素名>

属性の中にはグローバル属性と呼ばれるものがあります。グローバル属性とは、HTMLのどの要素に対して共通して使用できる属性のことです。グローバル属性には、以下のようなものがあります。

 

属性名 内容
accesskey キーボード、ショートカットキーの設定
class スタイルシートのクラスを指定
contenteditable 編集不可/不可を指定
contextmenu menu要素のid値を指定してコンテキストメニューを表示
dir テキストの方向を指定
draggable ドラッグの有効/無効を指定
hidden 関連性の有り/無しを指定
id 要素を識別する固有のid(識別子)を指定
lang 言語を指定
spellcheck スペルチェックの有効性
style スタイルシートを指定
tabindex タブ、インテックスを指定
title タイトルを指定
data 独自データを指定

属性の中には、checkedのような真偽値(チェックあり/なしのような2つの状態を持つ値)を指定する属性では、いくつかの記述方法があります。

以下の例は、すべてチェックありの状態を示しています。

 

<input type="checkbox" checked>
<input type="checkbox" checked="">
<input type="checkbox" checked="checked">

check属性を定義した時点でチェックありとなります。そのため、例えば以下のように記述した場合でもチェックありと解釈されるため、注意が必要です。

 

<input type="checkbox" checked="false">

4. 文字実体参照

<>などの要素を構成する文字は、そのままHTMLファイル内に記述してしまうと要素として判断されてしまい、正常に表示されません。そのため、そのような文字を記述する場合には、文字実体参照と呼ばれるキーワードを使用します。

 

文字 文字実体参照
(半角スペース) &nbsp;
 < &lt;
 > &gt;
 & &amp;
 “ &quot;

 

 

広 告