美しいHTMLコードの書き方

美しいHTMLコードの書き方

美しい HTML コードの外観 美しい HTML コードの書き方。
外国人が書いた記事: 美しい HTML コードとは 美しい HTML コードの書き方 がとてもよく書かれているように感じたので、再投稿して皆さんと共有します:
ps: 元のアドレス: http://css-tricks.com/what-beautiful-html-code-looks-like/
1. DOCTYPEが適切に宣言されている
ブラウザに HTML をレンダリングする方法を指示するヘッダー宣言を忘れないでください。
2. 整頓されたヘッドセクション
タイトルと文字セットを設定します。CSS と JS を外部リンクにリンクします (印刷用の CSS を含む)。
3. ボディID
体にIDを付与します。ここで著者が述べている理由は、複数のページでのコンテナの選択を容易にするためです。例えば、page1 と page2 の BODY に異なる ID を設定することで、#page1 h2 と #page2 h2 を通じて 2 つの異なる効果を設定できます。これは状況と具体的なアーキテクチャに依存すると感じています。
4.意味的にクリーンなメニュー
セマンティック メニュー コードを記述します。
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
ps:我個人覺得這樣寫代碼應該更簡單一點吧:
<ulid="menu">
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>

5.すべてのページコンテンツのメインDIV
すべてのコンテンツを含むメインの DIV が必要です。被写体の幅や余白などを固定するのに便利です。
6. 重要なコンテンツを優先する
最初にメインコンテンツを書き、次にセカンダリコンテンツを書きます。ナビゲーションやサイドバーがそれほど重要でない場合は、最後に書くのが最適です。
7. 共通コンテンツが含まれる
PHP include などの動的呼び出しを通じて、ナビゲーションやフッターなどの共通部分をインポートします。
8.コードはセクションごとにタブ分けされています
インデントコード
9.適切な終了タグ
終了タグに注意してください
10.ヘッダータグの階層
適切な場所で段落を区切るには、<h1>~<h6> などの見出しタグを使用します。
11. コンテンツ、コンテンツ、コンテンツ
適切なラベルとサインコードを使用し、©を示すために & copy; を使用し
、</br> は使用しないでください。
12.スタイリング不要!
タグ内にスタイルを入れないでください。HTML は構造を表すためにのみ使用されます。パフォーマンスは CSS に任せましょう。

<<:  VUE 3 テレポート コンポーネントと使用構文をすぐに使い始める

>>:  nginx をベースにリロードなしでアップストリーム サーバーの動的な自動起動と停止を実装する方法

推薦する

Tencent Cloudでhive3.1.2を構築する方法を教えます

環境の準備操作を開始する前に、hadoop バージョンがインストールされていることを確認してください...

アーティストの自己啓発におけるいくつかの経験

会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...

MySQL の重要なパフォーマンス インデックスの計算と最適化方法の概要

1 QPS 計算 (1 秒あたりのクエリ数) MyISAMエンジンベースのDBの場合 MySQL&g...

JavaScript 配列重複排除ソリューション

目次方法1: set: データ型ではなくデータ構造であり、メンバーは一意である方法2: オブジェクト...

Linux でファイルプレフィックスを一括で追加する方法

フォルダー内のすべての txt ファイルのファイル名の前に「gt_」を追加する必要があります。つまり...

Vueはコンピュータカメラを呼び出して写真機能を実現します

この記事の例では、コンピュータカメラを呼び出して写真機能を実現するためのvueの具体的なコードを参考...

CSS で 3 列レイアウトを実装するいくつかの方法と利点と欠点

序文3 列レイアウトは、その名前が示すように、両側が固定され、中央が適応します。実際の開発では、3 ...

vuex の補助関数 mapGetters の基本的な使い方の詳細な説明

mapGettersヘルパー関数mapGettersヘルパー関数は、ストア内のゲッターをローカルの計...

HTMLテーブルレイアウトの実践的な使い方の詳しい説明

テーブルはいつ使用されますか?最近では、Web ページの全体的なレイアウトにテーブルが使用されること...

Webデザインの経験:ナビゲーションシステムをシンプルにする

<br />友人と話し合っていたとき、フレームワークのレイヤー設計の中で最も核となるのは...

Mysql5.7.14 インストールと設定方法操作グラフィックチュートリアル(パスワード問題解決)

この記事は主に、以前のインストール方法を使用して MySQL 5.7.14 をインストールするときに...

一般的なCSS3アニメーションの実装方法

1. 何ですかCSS アニメーションは、CSS を使用して拡張マークアップ言語 (XML) 要素をア...

CSS で平均レイアウトを実現するためにネガティブ マージン テクノロジーを使用する方法

通常、IE ブラウザでの CSS の互換性の問題を解決するために、フロート レイアウトが使用されます...

ウェブサイトのパフォーマンス: 画像とCookieの最適化、モバイルアプリケーションの最適化

前のセクションでは、コンテンツ、サーバー、JavaScript、CSS など、Web サイトのパフォ...

CSS の position 属性の値に関する研究 (概要)

CSS の位​​置属性は要素の配置タイプを指定し、上、下、左、右を使用して要素を具体的に配置します...