美しい Web サイトにアクセスすると、ソースコードを見ずにはいられません。それは、X 線メガネを持っていると、イチジクの葉を通してでも、誰でも見ることができるようなものです。これはごく当然のことです。この美しい Web サイトが同じ美しいコードで書かれているのか、それとも単なる美しさの中の美しさなのかを知るのが待ちきれません。コード？美しさ？確かに！結局のところ、コードは詩のようなものです。 (翻訳: 「コードは詩である」は、有名なブログ システムWordPressのスローガンです。) これは最も基本的な HTML にすぎません。当然のことながら、他の動的言語ほど複雑でエレガントではありませんが、作成者が与えた芸術性は維持されています。 . ブラシ ストローク。
これをきっかけに、どうすればコードを美しくできるだろうかと考え始めました。 HTML の場合、これはすべて手作業です。マークアップ言語がどのようにして美しい状態に到達できるかを見てみましょう。
画像は十分な大きさ (2000x2000) なので、印刷して個人のロッカーに貼り付けて、友達に感銘を与えることができます。そうは言っても、これは確かに紛らわしいサイズです。誰でも修正できるように、オリジナルの PSD 画像を公開します。
HTML5 - HTML5とその新しい要素は、前例のない美しさをもたらします。
DOCTYPE-HTML5 は最適なドキュメント タイプです。
インデント - タブとスペースを使用してコードをインデントし、タグ間の親子関係を正しく表示し、階層構造を強調します。
文字セット -文字セット宣言は、すべてのコンテンツの前にヘッダー内で行う必要があります。
タイトル - Web サイトのタイトルはシンプルかつ明確です。区切り記号の後にページの機能の説明から始めて、Web サイトのタイトルで終わります。
CSS - 単純なスタイル シートのみを使用し (メディア タイプはスタイル シートで宣言されます)、優れたブラウザのみを対象としています。 IE6 以前では、汎用スタイル シートが取得されます。
本文 -本文にID を与えることで、追加のマークアップを必要とせずに、さまざまなページに対して独自のスタイルを設定できます。
JavaScript - jQuery (最も美しいJavaScriptスクリプト ライブラリ) が Google から呼び出されます。単一の JavaScript ファイルのみがロードされます。各スクリプトはページの下部で参照されています。
ファイル パス - 効率性を高めるため、サイト リソースには相対パスを使用します。コンテンツファイル（写真など）は転載対応の観点から絶対パスを使用します。
画像属性 -画像には、主に画像が欠落している場合の代替テキストが含まれていますが、検証にも使用できます。レンダリング効率を向上させるには、画像の幅と高さを指定するのが最善です。
メイン コンテンツが最初 – ページのメイン コンテンツは、基本的なマークアップとナビゲーションの後、補助コンテンツ (サイドバーなど) の前に配置する必要があります。
適切な説明ブロックレベル要素 - HEADER、NAV、SECTION、ARTICLE、ASIDE... これらの新しい「説明セクション」は、以前の DIV よりも内容を詳しく説明します。
階層 – タイトル タグを大文字にすることで効果があり、明確な「階層」に従います。
適切な説明タグ – 必要に応じて、リストは未ソート、ソート、および一般的に使用されないカスタム リストとしてマークされます。
含まれる共通コンテンツ – 異なるページに表示される同じコンテンツは、サーバー側からページに含めるのが最適です。 (方法、言語、CMS など、自分に合ったものを使用してください。)
セマンティック クラス – 正しい要素名を設定する必要があるだけでなく、クラスと ID にセマンティックな名前を付ける必要もあります。これらは、特定の指示がなくても説明として機能します。 (例: "left" よりも "col" の方が優れています)
クラス – 複数の要素で同様のスタイルを使用する必要がある場合は、それらに同じクラスを定義するようにしてください。 （再利用性）
ID – 要素がページ内に 1 回だけ表示される場合は、それらの要素にID を定義するようにしてください。異なる要素に同じ ID を定義しないでください。
動的要素 –動的効果は、本当に必要な場合にのみ追加されます。
文字エンコード – 特殊文字が表示される場合は、文字エンコードに注意してください。
スタイリングから解放 - ページ上のすべてはスタイリングとは何の関係もなく、希望するスタイルを指定する必要さえありません。ページ上のすべては、必要なサイト リソース、コンテンツ、説明の 3 つの項目に限定されます。
コメント - コードを見るときに、特に強調する必要のない内容や、特に明白ではない内容がコメントに含まれます。
有効 - サイト全体のマークアップは W3C検証に準拠しています。タグのクロージャーに注意し、必要な属性を確保し、廃止されたメソッドを避けるなどします。
原文: http://css-tricks.com/what-Beautiful-html-code-looks-like/
翻訳: http://horans.cn/what-Beautiful-html-code-looks-like/