きちんとした標準的なHTMLタグの書き方を学ぶ

優れた HTML コードは美しい Web サイトの基礎となります。私が CSS を教えるときは、まず「良い CSS は良い HTML マークアップに基づいてのみ存在する」と伝えます。家にはしっかりした基礎が必要なのと同じですよね？クリーンかつセマンティックな HTML タグには多くの利点がありますが、使いにくいタグを使用している Web サイトもまだ多くあります。

ユーザーフレンドリーではないHTML タグをいくつか見て、これらの問題について議論し、クリーンで標準的な HTML タグの書き方を学びましょう。

123WORDPRESS.COM 注: Chris Cyier は、この記事のコードの説明に「悪いコード」と「良いコード」という 2 つのドキュメントを使用しました。勉強する際にはこの2つのファイルを参考にしてください。

1. 厳格なDOCTYPE

これを実行するには、正しい手順に従うだけです。HTML 4.01 と XHTML 1.0 のどちらを使用するかについて議論する必要はありません。どちらも正しいコードを記述するための厳しい要件があります。

strict doctype example

しかし、いずれにせよ、私たちのコードはレイアウトにテーブルを使用するべきではないので、Transitional DOCTYPE を使用する必要はありません。

関連リソース:

W3C 推奨の DTD (文書型宣言)
適切な DOCTYPE でサイトを修正しましょう!
移行型DOCTYPEはもうやめてください

123WORDPRESS.COM 注: いわゆる DTD は文書型宣言です。簡単に言えば、特定の文書に対して定義された一連の規則です。これらの規則には、一連の要素とエンティティの宣言が含まれます。 XHTML ドキュメントには、STRICT (厳密型)、TRANSITIONAL (遷移型)、FRAMESET (フレーム型) の 3 種類があります。現在、最も多く使用されているのは TRANSITIONAL です。たとえば、この Web サイトでは、現在XHTML 1.0 TRANSITIONALを使用しています。 HTML コードが適切に記述されている場合は、既存の TRANSITIONAL を STRICT に変換すると非常に便利です。一方で、急いで切り替える必要はありません。個人的には、STRICT の方が厳密だと思いますが、TRANSITIONAL を使ってもあまり影響はありません。

2. 文字セットとエンコード文字

<head> セクションでは、まず文字セットを宣言します。UTF-8 を使用しましたが、<title> の後に置きました。コンテンツを読み取る前にブラウザが使用する文字セットを認識できるように、文字セットの宣言を先頭に移動しましょう。

character example

文字セット宣言の場所に加えて、<title> 内に表示される奇妙な文字も注意が必要な問題です。たとえば、最もよく使用される「 & 」文字は、文字エンティティ「 & 」に置き換える必要があります。

関連リソース:

ウィキペディア: UTF-8
文字コードの問題に関するチュートリアル
拡張ASCIIテーブル

3. 適切なインデント

コードを記述する際、インデントは Web ページの外観には影響しませんが、適切なインデントを使用すると、コードが読みやすくなります。標準的なインデント方法は、新しい要素を開始するときにタブ位置 (またはいくつかのスペース) をインデントすることです。また、終了要素のタグは開始タグと揃っていることに注意してください。

123WORDPRESS.COM 注: コードを書くときにインデントをするのが面倒だと感じる人もいます。コードを読むのが自分だけなら、問題ないかもしれません。問題ないと思える限り、それで問題ありません。しかし、共同作業の場合や、作品を公開して共有する場合は、美しく読みやすいコードを記述する必要があります。

indentation example

関連リソース:

HTML TIDYでWebページを整理する

4. 外部CSSとJavaScriptの使用

<head> セクションにはすでにいくつかの CSS コードが拡張されています。これは単一の HTML ページでのみ機能するため、重大な違反となります。個別の CSS ファイルを保持しておくと、将来の Web ページがそれらのファイルにリンクして同じコードを使用できるようになります。 Javascript の場合も同様です。

123WORDPRESS.COM 注: もちろん、この問題はそれほど深刻ではないかもしれません。たとえば、WordPress テーマの場合、<head> に記述されたコードはすべての WordPress ページに適用されます。しかし、<head> 内に CSS を記述するのは依然として非常に悪い習慣です。

external example

5. タグのネストを修正する

私たちのウェブサイトのタイトルでは、ウェブサイトのタイトルとして <h1> タグを使用しており、これは完璧です。そして、ホームページへのリンクを追加しましたが、リンクが <h1> の外側に配置され、<a> リンクが <h1> を囲んでいるという間違いがありました。ほとんどのブラウザはこの単純なネストエラーを適切に処理しますが、技術的には不可能です。

アンカーリンクはインライン要素ですが、<h1> 見出しはブロック要素です。ブロック要素はインライン要素内に配置しないでください。

nesting example

6. 不要なDIVを削除する

誰がこの用語を作り出したのかは分かりませんが、私はHTML マークアップにおける div の過剰な使用を指す「divitis」という用語が好きです。 Web デザインを学習する特定の段階では、誰もが DIV を使用して他の多くの要素をラップし、便利なレイアウトとスタイルを実現する方法を学びます。これにより、DIV 要素が乱用されることになります。DIV 要素は必要な場所でも、まったく必要のない場所でも使用されます。

divitis example

上記の例では、UL リスト ("bigBarNavigation") を格納するために div ("topNav") を使用しています。ただし、DIV と UL はどちらもブロック要素であるため、UL 要素をラップするために DIV を使用する必要はありません。

関連リソース:

分裂炎：それが何であるか、そしてそれをどのように治療するか。

7. より良い命名規則を使用する

ここで、名前付けについてお話ししましょう。前回の記事の例では、UL は ID 名「bigBarNavigation」を使用しました。「Navigation」はブロックの内容を適切に説明していますが、「big」と「Bar」は内容ではなくデザインを説明しています。このメニューは大きなツールバーであると言っているのかもしれませんが、メニューのデザインが縦長になると、名前がわかりにくくなり、意味がなくなります。

naming conventions example

わかりやすいクラス名と ID 名は、「mainNav」、「subNav」、「sidebar」、「footer」、「metaData」など、中に含まれるコンテンツを説明するものです。不適切なクラス名と ID 名は、「bigBoldHeader」、「leftSidebar」、「roundedBox」など、デザインを説明するものです。

123WORDPRESS.COM 注: Chris は、コンテンツによって名前を付けるか、デザインによって名前を付けるかを強調しています。個人的な追加: ID 名とクラス名は大文字または小文字にするか、単語の最初の文字を大文字にする必要があります。まず、完全に大文字の単語は読みにくくなるため、除外します。すべて小文字にするか、単語の最初の文字を大文字にするかは、個人の習慣によって異なります。重要な点は、どのルールを使用する場合でも一貫性を保つ必要があるということです。混乱を招く可能性があるため、小文字を使用したり、最初の文字を大文字にしたりしないでください。

さらに、私は個人的に、長い名前にアンダースコア「_」を追加するか、ハイフン「-」を追加するか、あるいは追加しないかについて混乱しています。あるいは、私が複雑に考えすぎているのかもしれません。どれを使用するかは重要ではありません。一貫性を保つことが重要です。

前のページ1 2 次のページ全文を読む

<<: mysql5.7.33 で誤って ibdata ファイルを削除した後にデータを回復する方法

>>: three.js を使って立体的な矢印線を描く詳細な手順