HTML の軽量化、Web ページ作成のための HTML タグの合理化_HTML/Xhtml

HTML の軽量化、Web ページ作成のための HTML タグの合理化_HTML/Xhtml_Web ページの制作

WBOY

リリース： 2016-05-16 16:42:43

オリジナル

1439 人が閲覧しました

HTML 4

HTML (XHTML ではありません)、MIME タイプは text/html で、一部のタグを省略できます。 HTML 4 DTD では、次のタグを省略できます (いわゆる回避可能な要素には取り消し線が付けられています)

<code><del><font face="Consolas" size="2"></area></font></del></code>

ログイン後にコピー

<code><del><font face="Consolas" size="2"></base></font></del></code>

ログイン後にコピー

<code><font face="Consolas" size="2"><body></font></code>

ログイン後にコピー

<code><font face="Consolas" size="2"></body></font></code>

ログイン後にコピー

<code><del><font face="Consolas" size="2"></br></font></del></code>

ログイン後にコピー

<code><del><font face="Consolas" size="2"></col></font></del></code>

ログイン後にコピー

<code><font face="Consolas" size="2"></colgroup></font></code>

ログイン後にコピー

<code><font face="Consolas" size="2"></dd></font></code>

ログイン後にコピー

<code><font face="Consolas" size="2"></dt></font></code>

ログイン後にコピー

<code><font face="Consolas" size="2"><head></font></code>

ログイン後にコピー

<code><font face="Consolas" size="2"></head></font></code>

ログイン後にコピー

<code><del><font face="Consolas" size="2"></hr></font></del></code>

ログイン後にコピー

<code><font face="Consolas" size="2"><html></font></code>

ログイン後にコピー

<code><font face="Consolas" size="2"></html></font></code>

ログイン後にコピー

<code><del><font face="Consolas" size="2"></img></font></del></code>

ログイン後にコピー

<code><del><font face="Consolas" size="2"></input></font></del></code>

ログイン後にコピー

<code><font face="Consolas" size="2"></li></font></code>

ログイン後にコピー

<code><del><font face="Consolas" size="2"></link></font></del></code>

ログイン後にコピー

<code><del><font face="Consolas" size="2"></meta></font></del></code>

ログイン後にコピー

<code><font face="Consolas" size="2"></option></font></code>

ログイン後にコピー

<code><font face="Consolas" size="2"></p></font></code>

ログイン後にコピー

<code><del><font face="Consolas" size="2"></param></font></del></code>

ログイン後にコピー

<code><font face="Consolas" size="2"><tbody></font></code>

ログイン後にコピー

<code><font face="Consolas" size="2"></tbody></font></code>

ログイン後にコピー

<code><font face="Consolas" size="2"></td></font></code>

ログイン後にコピー

<code><font face="Consolas" size="2"></tfoot></font></code>

ログイン後にコピー

<code><font face="Consolas" size="2"></th></font></code>

ログイン後にコピー

<code><font face="Consolas" size="2"></thead></font></code>

ログイン後にコピー

<code><font face="Consolas" size="2"></tr></font></code>

ログイン後にコピー

たとえば、コードは

です。

<code><font face="Consolas" size="2"><li>List item</li></font></code>

ログイン後にコピー

は

と書くことができます

<code><font face="Consolas" size="2"><li>List item</font></code>

ログイン後にコピー

もう 1 つの例は、段落は

で終わる必要があるということです。

<code><font face="Consolas" size="2"></p></font></code>

ログイン後にコピー

最後に、

と書くだけです。

<code><font face="Consolas" size="2"><p>My paragraph</font></code>

ログイン後にコピー

HTML、head、body を削除することもできます (これをコーディング標準として採用する前に、これが快適であることを確認してください)。

タグを省略した後も、HTML は有効であり、ファイルサイズは小さくなります。一般的なページの場合、5 ～ 20% 節約できます。

HTML 5

現在進行中の HTML 5 の開発により、ファイルサイズを削減するいくつかの方法が提供されています。

例: ページドキュメントタイプ宣言

<code><font face="Consolas" size="2"><!DOCTYPE html></font></code>

ログイン後にコピー

比較

<code><font face="Consolas" size="2"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></font></code>

ログイン後にコピー

どうやら HTML 5 の DTD は短いようです。

HTML 5 は、ページのエンコーディングを指定するときに使いやすく、短くなります:

<code><font face="Consolas" size="2"><meta charset="utf-8"></font></code>

ログイン後にコピー

を置き換えます

<code><font face="Consolas" size="2"><meta http-equiv="content-type" content="text/html; charset=utf-8"></font></code>

ログイン後にコピー

通常、ブラウザは HTML を正しく処理します。

また、現在の HTML 5 では、

などの MIME タイプを宣言する type 属性を削除できます。

<code><font face="Consolas" size="2">type="text/css"</font></code>

ログイン後にコピー

または

<code><font face="Consolas" size="2">type="text/javascript"</font></code>

ログイン後にコピー

を使用できます

<code><font face="Consolas" size="2"><script></font></code>

ログイン後にコピー

代わりの

<code><font face="Consolas" size="2"><script type="text/javascript"></font></code>

ログイン後にコピー

使用

<code><font face="Consolas" size="2"><style></font></code>

ログイン後にコピー

代わりの

<code><font face="Consolas" size="2"><style type="text/css"></font></code>

ログイン後にコピー

すべてのタイプのページ (XHTHML も含む) では、

を省略できます

<code><font face="Consolas" size="2">type="text/css"</font></code>

ログイン後にコピー

HTML 5 ではそれが簡単になります。

上記のすべての方法を同時に使用すると、コーディングスタイルとページ内のテキストコンテンツの量に応じて、ファイルが 10% ～ 20% (またはそれ以上) 節約されます。コードがよりクリーンになり、訪問者は Web サイトのコンテンツをより速く取得できるようになります。プライバシーセンタープロジェクトではこれらの技術の多くを使用し、元のファイルサイズの 20% を節約します。