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

推薦する

HTML テーブルタグチュートリアル (23): 行の境界線の色属性 BORDERCOLORDARK

行ごとに、暗い境界線の色を個別に定義できます。基本的な構文<TR 境界線の色を暗くする=col...

MySQL実行計画を学ぶ

目次1. 実施計画の概要2. 実行計画の実践id:選択タイプ:テーブル:タイプ:可能なキー:鍵:キー...

Robots.txtの詳細な紹介

robots.txt の基本的な紹介Robots.txt はプレーンテキスト ファイルであり、Web...

Mysql トランザクションで Update を実行するとテーブルがロックされますか?

2つのケース: 1. 索引あり 2. 索引なし前提条件:方法: コマンドラインを使用してシミュレー...

MySql データベースのサブクエリと高度なアプリケーションの簡単な分析

MySql データベースのサブクエリ:サブクエリ: 選択クエリ ステートメント内に別の選択ステートメ...

JavaScript BOM ロケーション オブジェクト + ナビゲーター オブジェクト + 履歴オブジェクト

目次1. 場所オブジェクト1. URL 2. 場所オブジェクトのプロパティ3. ロケーションオブジェ...

mysql ローカルログインでポート番号を使用してログインできない問題の解決策

最近、Linux を使用してローカルにログインしていたところ、正常にログインできず、次のエラー メッ...

Vue3はJingdong製品詳細ページの虫眼鏡効果コンポーネントをカプセル化します

この記事では、Jingdong製品詳細ページの虫眼鏡効果コンポーネントに似たvue3カプセル化の具体...

MySQLパスワードを忘れた場合のいくつかの解決策

解決策1完全にアンインストールしてすべてのデータを削除します。まず、MySQLに関連するすべてのプロ...

OpenLayers 3 のベクターマップソースの読み込みの問題を解決する

1. ベクターマップベクター グラフィックスは直線と曲線を使用してグラフィックスを表します。これらの...

HTML メタタグの一般的な使用例のコレクション

マタタグとは<meta> 要素は、検索エンジン向けの説明やキーワード、更新頻度など、ペー...

Nginx プロキシ使用時にヘッダーに「_」が含まれることで情報が失われる問題の解決方法

序文ゲートウェイプロジェクトを開発する場合、署名 sign_key 情報はリクエスト時にリクエスト ...

HTMLはキャンバスを使用して箇条書きスクリーン機能を実装します

導入最近、大きな課題をこなす際に、弾幕プレイヤーを作る必要がありました。他の人のソースコードを借りて...

docker-compose を使用して MySQL を実行する方法

ディレクトリ構造 。 │ .env │ docker-compose.yml │ └─mysql ├...

Vue + OpenLayers クイックスタートチュートリアル

Openlayers は、WebGIS クライアント向けのモジュール式で高性能かつ機能豊富な Jav...