Skip to content

DNET_HTML

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 1 revision

HTML

概要

SaaS開発で調べたHTML(HTML5)についてのメモ。

HTML : ウェブ上の文書を記述するためのマークアップ言語

DTD

  • マークアップ言語 SGMLおよびXMLにおいて、
    文書構造（文書型）を定義するためのスキーマ言語

  • マークアップ規則はHTML4まではDTDとして公開

バージョン

HTML 1.0

1993年6月に、IETFのIIIR WGより提出されたHTML仕様

HTML 2.0

1995年11月に、IETFのHTML WGによって RFC 1866として発表された仕様

HTML 3.2

  • HTML 3.0 : ドラフトの段階で策定途中に破棄。
  • HTML 3.2 : 1997年1月14日に、W3C勧告として発表された仕様

HTML 4.0

  • 1997年12月18日に、W3C勧告として発表された仕様
  • 1998年4月24日に、仕様改訂。

HTML 4.01

1999年12月24日に、W3C勧告として発表された仕様

  • いくらかのマイナーな修正が加えられ、
  • 以下の、3つのDTDスキーマを持つ。

Strict DTD

HTML4.01のルールに厳密かつ正確に従う指定

Transitional DTD

HTML 3.2からの移行過渡期のため指定

Frameset DTD

フレームを使うことができる指定

XHTML

SGMLで定義されていたHTMLをXMLの文法で定義しなおしたマークアップ言語

HTMLとの相違点

XML宣言を書く

<?xml version="1.0" encoding="UTF-8"?>

要素名・属性名は小文字で書く

  • XMLでは大文字・小文字が厳密に区別される。
  • 要素名・属性名は全て小文字でのみ定義されている。
  • 要素名・属性名は共にすべて小文字で表記する。

要素の終了タグを書く

要素は必ず開始タグと終了タグが必須（終了タグの省略は許されない）。

空要素の終了タグも書く

  • 空要素についても同様に終了タグを付与するか

    <br></br>（間に文字は一切含めない）

  • 若しくは、開始タグの末尾を「/>」とする（こちらが推奨）。
    スラッシュの前に半角スペースを先行させる表記が一般的

    <br />

属性値はクォーテーションで囲む。

属性値はすべてクォーテーションで囲む。

  • " " （ダブルクォーテーション）
  • ' '（シングルクォーテーション）

属性名・属性値を省略しない。

推奨されるメディアタイプ

application/xhtml+xml

バージョン（XHTML）

XHTML 1.0

  • 2000年1月26日に勧告された仕様

    • HTML 4.01をXMLにて再定義したもの
    • HTML 4.01と同様にStrict、Transitional、Framesetという3種類のDTDが存在。

  • XHTML 1.0 Second Edition
    2002年8月1日に改訂版が勧告

XHTML Basic

XHTMLのサブセットで、PDAや携帯電話などの小規模な端末を含む、より広域の環境のための仕様

  • XHTML Basic 1.0
    2000年12月19日に勧告された仕様

  • XHTML Mobile Profile

    • OMAが定義した XHTML DTD
      携帯電話などのリソースの限られた機器で利用することを目的

    • Version

      • 1.0 : XHTML Basic 1.0 に表示要素をいくつか追加し、基本的なスクリプトをサポート
      • 1.1 : 完全なスクリプトサポート（ECMAScript Mobile Profile）
      • 1.2 : Forms と Object のサポートを追加

  • XHTML Basic 1.1
    2008年7月29日に、XHTML Mobile Profileとの不整合を解消する目的で勧告された仕様

The Modularization of XHTML(XHTML m12n)

XHTMLをその要素の目的や役割ごとに分割し、フレームワーク化したもの。

  • バージョン

    • 1.0が2001年4月10日に勧告
    • 1.1が2008年10月に勧告
    • 2009年7月現在、バージョン2.0が草案の段階

  • XHTML 1.1やXHTML 2.0は、m12nをベースに構築。

XHTML 1.1

  • 2001年5月31日に、機能がモジュール化されたXHTML仕様として勧告された仕様

    • モジュール化による、カスタマイズ性の向上。
    • Strictスキーマ 1 つのみとなった。
    • ルビモジュールの導入。

  • XHTML 1.1 Second Edition
    2010年11月23日に勧告された仕様

XHTML 1.2

策定中であるXHTML Role ModuleやAccess Module、
WAI-ARIAの語彙を組み込んだ新しいプロファイルとして策定予定。

XHTML 2.0

  • XHTML Familyの次期バージョンとしてW3Cが策定していた。
  • 2009年07月03日に策定の打ち切り（HTML5にリソースが主流になったため）

XHTML5

HTML5をXML記法で記述したものをXHTML5(最終草案)と呼ぶ。

HTML5

  • 2014年10月28日に、W3C勧告として発表された仕様

  • 新要素・属性が追加・変更・削除された

    • ブログや記事向けの「article」要素
    • マルチメディアのための「audio」および「video」要素

  • HTML 5.1
    2016年11月1日に勧告された仕様

基本ルール

  • 開始タグ終了タグ、間にコンテンツ。
  • コンテンツはInnerTextやタグのネスト
<aaa>xxx</aaa>

空要素

<aaa/>

属性記述

  • yyy値のxxx属性

    <aaa xxx="yyy"></aaa>

  • ブーリアン属性

    <aaa required></aaa>

タグ省略

範囲は自動判別される。

  • 開始・終了タグを省略可能

    • <html>
    • <head>
    • <body>

  • 終了タグを省略可能

    • <p>
    • <li>
    • <tr>
    • <td>
    • <th>

セマンティクス

現在のセマンティクス要素数は108

セクション

  • <section>

    • 汎用的なセクション。

    • <article>/<aside>/<nav>以外のセクションは全て<section>

    • 基本的に<h1-6>タグとセットで使用する（基本的に<h1>タグのみ使用する）。

    • <h1-6>要素

      • <h1-6>要素を纏める場合は、<hgroup>タグを使用する。
      • セクション無しに<h1-6>要素を使用すると、暗黙のセクションが生成される。

  • <article>

    • 独立した「本文」としてのセクション。
    • 配信しても意味が通じる。

  • <aside>

    • 頁の他の部分との関連が低いセクション。
    • 削っても意味が通じる。

  • <nav>

    • サイト内の主要なナビゲーション・メニュー。
    • 中で<ul>と<a>を用いてリンク一覧を作る。
    • このナビゲーション部が提供されて有益な場合。

ヘッダ・フッタ

  • <header>

    • ヘッダ
    • 一般的には<h1-6>要素を含める。

  • <footer>

    • フッタ
    • <small>要素でcopyrightなどの記載を行なう。

その他（セマンティクス）

  • <time>タグで、親の<body>/<article>要素の公開日時（ISO 8601）を表示（pubdate属性がtrueの場合）。
  • <address>タグで、親の<body>/<article>要素の問い合わせ先アドレスを表示。

テンプレート

<!DOCTYPE html>
<!-- コンテンツの言語を指定 -->
<html lang="ja">
<head>
<!-- IE8+に対して「IE=edge」と指定することで、利用できる最も互換性の高い最新のエンジンを使用するよう指示できます
     参考: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- ページのタイトルを記述 -->
<title></title>

<!-- パフォーマンスのために使用する文字のエンコーディングを記述
     参考: https://developers.google.com/speed/docs/best-practices/rendering#SpecifyCharsetEarly -->
<meta charset="utf-8">

<!-- content属性にページの紹介文を記述 -->
<meta name="description" content="">

<!-- content属性にページの著者情報を記述 -->
<meta name="author" content="">

<!-- モバイル端末への対応、ページをビューポートの幅に合わせてレンダリング（Android, iOS6以降）
     ズームを許可しない設定「user-scalable=no」は加えない -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- スタイルシートはできるだけ早くレンダリングされるため、HTMLドキュメントの上の方に記述
     href属性にスタイルシートファイルのURIを記述 -->
<link rel="stylesheet" href="">

<!-- IE8以下用に2つのスクリプトを記述
     html5shiv.js: IE8以下にHTML5の要素を認識するようにさせる
     respond.js: IE8以下にMedia Queriesの代替え機能を提供 -->
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- href属性にファビコンファイルのURIを記述 -->
<link rel="shortcut icon" href="">

<!-- コメントアウトしてあるコードは、iOS/Android用のアイコン指定 -->
<!--
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="196x196" href="">
<link rel="apple-touch-icon" sizes="152x152" href="">
-->

<!-- スクリプトでブロッキングを起こさないものはここに記述
     可能であれば「async（文書の読み込みが完了した時点でスクリプトを実行）」を使用
     Example: <script src="" async></script> -->
</head>
<body>

<!-- コンテンツを記述 -->

<!-- スクリプトでブロッキングを起こすものはここに記述
ブロッキングを起こす原因としては、CSSのセレクタ操作（IE）、負荷の高いDOM操作、多数のスクリプトなど -->
<!-- SCRIPTS -->
<!-- 例: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
</body>
</html>

JavaScript API

JavaScript API（JavaScriptの該当節を参照）
→ HTML5 JavaScript API

参考（HTML5）

移行メモ

  • 同名の見出し（「バージョン」「その他」「参考」）が複数あり GitHub Wiki でアンカが衝突するため、括弧で文脈を補って一意にした。
  • 「JavaScript API」の節に、本 Wiki 側で移行済みの HTML5 JavaScript API へのリンクを補った。
  • HTML タグの記述は、GitHub Wiki でタグとして解釈されないよう 本文中では \< / \> でエスケープした（コードブロック内はそのまま）。
  • PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。

Tags: 移行, HTML, HTML5, XHTML, DTD, セマンティクス, マークアップ, W3C

このWikiは「Open棟梁Project」,「OSSコンソーシアム 開発基盤部会」によって運営されています。

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally