優れたHTMLコードは、美しいウェブサイトの基盤です。他の人にCSSに教えるとき、私は常に最初に彼らに話します：良いCSSは良いHTMLタグにのみ存在します。それは家がしっかりした基盤を必要とするようなものですよね？きちんとしたセマンティックHTMLタグには多くの利点がありますが、非友好的なタグライティングを使用する多くのWebサイトがまだあります。
書かれていないHTMLタグを見て、それらについて話し合い、きちんとした標準のHTMLタグを書く方法を学びましょう。
Wulin.com注：Chris Cyierは、ここで2つのドキュメントを使用して、この記事のコードを説明しています：悪いコードと良いコード。勉強するときは、これら2つのドキュメントを参照してください。これを行うには、正しい手順に従う必要があります。 HTML 4.01またはXHTML 1.0を使用するかどうかを議論する必要はありません。
しかし、何があっても、私たちのコードはレイアウトにテーブルテーブルを使用してはならないため、移行中のDoctypeを使用する必要はありません。
関連リソース：<head>セクションでは、最初のことはキャラクターセットを宣言することです。 UTF-8を使用しましたが、<title>の後ろに置きます。キャラクターセットの宣言を上に移動しましょう。なぜなら、ブラウザに何かを読む前にどのキャラクターがそれを処理するかを知りたいからです。
キャラクターセットの宣言の位置に加えて、<title>に表示される奇妙なキャラクターは、注意が必要な問題でもあります。たとえば、最も一般的に使用される文字と文字は、文字エンティティ＆amp ;に置き換える必要があります。
関連リソース：コードを作成する場合、インデントはWebページの外観に影響しませんが、適切なインデントを使用すると、コードがより読みやすくなります。標準的なインデンテーション方法は、新しい要素を開始するときにタブビット（またはいくつかのスペース）をインデントすることです。また、クローズ要素のラベルはStartラベルと整合していることを忘れないでください。
Wulin.com注：一部の友人は、コードを書くときにインデントがより面倒だと考えています。このコードを読んでいるだけなら、問題はないかもしれません。大丈夫だと思います。しかし、それがコラボレーションであるか、あなたの作品が公開され、公開されている場合は、美しく読みやすいコードを書く必要があります。関連リソース：<head>セクションに拡張されたCSSコードがいくつかあります。これは、単一のHTMLページでのみ動作できるため、深刻なファウルです。スタンドアロンのCSSファイルを維持することは、将来のWebページがそれらにリンクして同じコードを使用できることを意味します。 JavaScriptについても同じことが言えます。
Wulin.com注：もちろん、この問題はそれほど深刻ではないかもしれません。たとえば、WordPressテーマとして、<head>で記述されたコードは、すべてのWordPressページで使用されます。しかし、<head>でCSSを書くことは依然として非常に悪い習慣です。当社のウェブサイトのタイトルでは、<h1>をウェブサイトのタイトルタグとして使用しています。これは完璧です。ホームページへのリンクが追加されましたが、エラーはリンクが<h1>の外側に配置され、リンクが<h1>に囲まれていることでした。この単純なネスティングエラーは、ほとんどのブラウザによって適切に処理されますが、技術的には機能しません。
アンカーリンクはインライン要素であり、<h1>タイトルはブロック要素であり、ブロック要素をインライン要素に配置しないでください。
誰が最初にそれを発明したのかわかりませんが、HTMLタグでのDivの過剰な使用を指す「Divitis」という言葉が好きです。学習Webデザインの特定の段階で、DIVを使用して他の多くの要素を包んで便利なレイアウトとスタイリングを実現する方法を学びます。これは、div要素の乱用につながります。必要な領域と完全に不要な領域を使用します。
上記の例では、div（topnav）を使用してULリスト（Bigbarnavigation）を含みます。ただし、DivとULの両方はブロック要素であるため、UL要素をラップするためにDIVを使用する必要はありません。
関連リソース：それでは、命名管理について話しましょう。前の記事で説明した例では、ULはID名BigBarNavigationを使用しています。ナビゲーションはブロックのコンテンツを非常によく説明しますが、Big and Barはコンテンツではなくデザインを説明しています。このメニューは大きなツールバーであると言っているかもしれませんが、このメニューのデザインが垂直になった場合、名前は混乱していて無関係に見えます。
MainNav、SubNav、SideBar、フッター、メタデータなどのフレンドリーなクラスやID名。悪いクラスとIDの名前は、Bigboldheader、ReghtsideBar、RoundedBoxなどのデザインを説明しています。
Wulin.com注：Chrisは、コンテンツまたはデザインで名前を付けるかどうかを強調しています。個人的には、 IDとクラス名に追加して、単語の最初の文字を大文字にしたり、大文字にしたりしたいと思います。まず第一に、完全に大文字の単語は読書を助長せず、除外されます。単語の最初の文字の小文字と大文字を使用するかどうかについては、それはあなたの個人的な習慣に依存します。どのルールが使用されても、一貫性があるはずです。純粋に小文字にならず、一度に最初の文字で大文字になってはいけません。非常に混乱します。さらに、私が個人的に混乱しているのは、アンダーライン_、またはハイフンのいずれか、より長い名前を使用するかどうかです。または多分私はそれがあまりにも複雑だと思います。あらゆるタイプを使用することは良いことであり、一貫性を保つことは問題ありません。
前のページ1 2次のページ全文を読む