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