HTML減量 HTMLタグを合理化してWebページを作成する

HTML減量 HTMLタグを合理化してWebページを作成する

HTML4 について

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

 </エリア>
 </ベース>
 <body>
 </body>
 </br>
 </col>
 </colgroup>
 </dd>
 </dt>
 <head>
 </head>
 </hr>
 <html>
 </html>
 </img>
 </入力>
 </li>
 </リンク>
 </メタ>
 </option>
 </p>
 </パラメータ>
 <tbody>
 </tbody>
 </td>
 </tfoot>
 </th>
 </thead>
 </tr>

たとえば、コードが

<li>List item</li>

次のように書くことができる。

 <li>List item

例えば、段落は

</p>

最後に、こう書くこともできます

<p>My paragraph

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

タグを省略すると、HTML は有効なまま、ファイル サイズが縮小されます。一般的なページの場合、これにより 5 ~ 20% の節約が可能です。

HTML5 について

HTML 5 の継続的な開発により、ファイル サイズを削減するいくつかの方法が提供されています。

例えば、ページ文書型宣言

<!DOCTYPE html>

対比

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

明らかに HTML 5 の DTD は短くなります。

ページのエンコーディングを指定する場合、HTML 5 の方が使いやすく、短くなります。

 <meta charset="utf-8">

交換する

<meta http-equiv="content-type" content="text/html; charset=utf-8">

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

さらに、今日のHTML 5では、MIMEタイプを宣言するtype属性を削除できます。

 type="text/css"
または
type="text/javascript"

使用できます

<script>
代替
<script type="text/javascript">
使用
<style>
代替
<style type="text/css">

すべての種類のページ(XHTMLも含む)では省略できます

type="text/css"

HTML 5 を使用すると、これが簡単になります。

上記のテクニックをすべて組み合わせて使用​​すると、コーディング スタイルとページ内のテキストの量に応じて、ファイル サイズを 10% ~ 20% (またはそれ以上) 削減できます。コードがよりクリーンになり、訪問者がサイトのコンテンツに早くアクセスできるようになります。プライバシー センター プロジェクトではこれらのテクニックを多く使用し、元のファイル サイズを 20% 削減しました。

<<:  CSS を使用してサブ要素に応じて異なるスタイルを記述する方法

>>:  シンプルな時計を実装するJavaScript

推薦する

Linux システムの busybox に mkfs.vfat コマンドを移植する

オーディオおよびビデオ ファイルを保存するためのディスク寿命を延ばすには、ディスクをフォーマットする...

MySQL が暗黙のデフォルト値を処理する方法

何人かの学生は、マスターとスレーブの間の不一致の問題に遭遇したと述べました。一般的な状況としては、m...

Vue3 テーブルコンポーネントの使用

目次1. Antデザインビュー1. 公式ウェブサイトアドレス2. 使い方3.電子書籍テーブルを表示す...

mysql インストーラ コミュニティ 8.0.12.0 インストール グラフィック チュートリアル

このチュートリアルでは、参考のためにmysqlインストーラコミュニティ8.0.12.0のインストール...

MySQL ストレージ エンジンの基礎

前回の記事では、MySQL トランザクションについて説明しました。これで、MySQL トランザクショ...

ログインと登録機能を実現するjs

この記事の例では、ログインと登録機能を実装するためのjsの具体的なコードを参考までに共有しています。...

Nginx での SSL 証明書のインストールと展開手順の概要

目次問題の説明:インストール手順1. 準備2. サーバーにリモート接続する3. 証明書と秘密鍵ファイ...

MySQL 外部キー (FOREIGN KEY) の使用例の詳細な説明

はじめに: すべてのデータを 1 つのテーブルに保存することのデメリット表の構成構造は複雑で不明瞭で...

負の距離(共感) - 相互影響の反復プロセス

ネガティブな距離は共感を意味します。序文(疑問の提起):プロダクトマネージャーは機能を把握します。機...

CocosCreator ユニバーサルフレームワークデザインネットワーク

目次序文Websocketの使用Websocketオブジェクトの構築Websocket ステータスW...

Linux 面接で最もよく聞かれる 10 の質問のまとめ

序文Linux システムの運用および保守エンジニア職の面接を受ける場合は、次の 10 個の最も一般的...

HTML で選択ドロップダウン ボックスのコンテンツが不完全に表示され、部分的にカバーされる問題の解決策

今日、問題が発生しました。クエリ バーのドロップダウン ボックスの内容が長すぎて、一部が隠れてしまっ...

MySQL 最適化技術における Limit クエリの最適化分析

序文実際のビジネスでは、ページングは​​一般的なビジネス要件です。次に、制限クエリを使用します。制限...