BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

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

2022-02-04 16:26:38

良いHTMLコード は、美しいウェブサイトの基礎となるものです。私がCSSを教えるとき、最初に必ず言うのは、優れたCSSは、優れたHTMLマークアップという土台があってこそ、ということです。家も基礎がしっかりしてないとダメなのと同じですね。クリーンでセマンティックなHTMLマークアップには多くの利点がありますが、フレンドリーでないマークアップを使用しているサイトもまだたくさんあります。

不親切な HTMLマークアップ を作成し、それについて議論することで、きちんとした標準的なHTMLマークアップの書き方を学ぶことができます。

<スパン スクリプトハウスからのお知らせ : Chris Cyierは、この記事のコードを説明するために、ここで2つのドキュメントを使用しました。  悪コード と 良いコード . この2つのファイルを参照しながら学習してください。

1. 厳格なDOCTYPE

そのために必要なことは、正しい手順を踏むことです。HTML 4.01を使うかXHTML 1.0を使うかを議論する必要はなく、どちらも正しいコードを書くために厳しい要求を課しています。

しかし、私たちのコードでは、レイアウトにテーブルを使うことはないはずなので、Transitional DOCTYPEを使う必要はない。

関連資料です。

  • <フォント W3C推奨DTD(文書型宣言)
  • <フォント 正しいDOCTYPEでサイトを直そう!
  • Transitional DOCTYPEはもうやめてください。

<スパン スクリプトハウスノート : DTDとは、文書型宣言のことで、簡単に言えば、要素や実体の宣言のセットを含む、特定の文書に対して定義されたルールのセットです。 XHTMLの文書タイプには3種類あります。STRICT、TRANSITIONAL、FRAMESETの3種類です。 . 現在、最も多く使われているのは TRANSITIONAL で、例えばこのサイトでは現在 xhtml 1.0 トランジショナル . HTMLコードがうまく書けていれば、既存のTRANSITIONALをSTRICTに変換するのは簡単です。逆に言えば、あまり変換を熱心にする必要はありません。個人的にはSTRICTの方が厳密だと思いますが、TRANSITIONALを使ってもあまり支障はないでしょう。

2. 文字セット &amp; エンコード文字

head>セクションで、まず最初に文字セットを宣言します。UTF-8を使用しますが、それを<title>の後に記述しています。ブラウザがコンテンツを読み込む前に、どの文字セットを処理するかを知ってもらいたいので、文字セット宣言を一番上に移動させましょう。

文字セット宣言の配置だけでなく、<title>に出てくる変な文字も注意すべき問題で、最も多いのは" &です。 "文字、我々は文字エンティティを使用する必要があります"。 &amp; "に置き換えてください。

関連資料です。

  • <フォント ウィキペディア UTF-8
  • 文字コードの問題についてのチュートリアル
  • 拡張ASCII表

3. 適切なインデント

コードを書くとき、インデントはページの見栄えには影響しませんが、適切なインデントを使用することで、コードがより読みやすくなります。標準的なインデント方法は、新しい要素を始めるときにタブビット（または数個のスペース）分インデントすることです。また、閉じる要素のタブは開始時のタブと揃えることを覚えておいてください。

<スパン スクリプトハウスからのお知らせ このコードを一人で読んでいる場合は問題ないかもしれませんし、問題ないと感じるかもしれません。しかし、もしあなたが共同作業をしていたり、あなたの作品が公に共有されるのであれば、素敵でより読みやすいコードを書くことが重要です。

関連資料です。

  • <フォント HTML TIDYでウェブページをきれいにする

4. 外部CSSとJavaScriptを利用する

CSSコードが、<head>セクションに拡張されています。これは重大な反則で、1つのHTMLページにしか適用できないからです。CSSファイルを分けておくと、将来のページがそのファイルにリンクして、同じコードを使用することができます。

<スパン スクリプトハウスからのお知らせ : もちろん、問題はそれほど深刻ではないかもしれません。例えば、WordPressのテーマとして、<head>の中に書かれたコードは、WordPressのすべてのページで動作するようにもなっています。しかし、CSSを<head>の中に書くのは、やはり非常に悪い習慣です。

5. 適切なタグのネスト

サイトタイトルの内部では、サイトタイトルタグとして <h1> を使用していますが、これは完璧です。そして、トップページへのリンクを追加しましたが、間違いは、リンクを <h1> の外側に置いてしまい、 <a> のリンクが <h1> を取り囲んでしまったことです。この単純なネストエラーは、ほとんどのブラウザでうまく処理されますが、技術的にはダメなことなのです。

アンカーリンクはインライン要素、<h1>タイトルはブロック要素であり、ブロック要素はインライン要素の中に入れてはいけません。

6. 不要なDIVを削除する

誰が最初に発明したのか知りませんが、私は「divitis」という言葉が好きです。 HTMLマークアップ ウェブデザインを学ぶある時点で、人々はレイアウトやスタイリングを簡単にするために、DIVを使って他の多くの要素をラップする方法を学びます。そのため、DIV要素を必要なところで使い、まったく不要なところで使うという、誤った使い方をするようになったのです。

上記の例では、ULリスト（"bigBarNavigation"）を含むためにdiv（"topNav"）を使用しています。しかし、DIVとULは両方ともブロック要素なので、UL要素を包むためにDIVを使用する必要はありません。

関連資料

  • <フォント ディバイス：ディバイスとは何か、そしてそれを治す方法。

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

さて、ネーミングの管理についてですが、先ほどの例ではULはID名として "bigBarNavigation." を使用しています。"Navigation" はブロックの内容をよく表していますが、"big" や "Bar" は内容ではなく、デザインについて述べています。メニューが大きなツールバーであることを言っているのでしょうが、メニューのデザインが縦長になれば、この名前は紛らわしく、無関係なものに見えてしまうでしょう。

Friendly class and id names such as "mainNav," "subNav," "sidebar," "footer," "metaData," これらは何が含まれているかを説明するものである。bigBoldHeader, " "leftSidebar, " "roundedBox のように、悪いクラス名と ID 名がデザインを記述しています。

<スパン スクリプトハウスの注意事項 : クリスが重視するのは、内容によるネーミング、あるいはデザインによるネーミングです。個人的なメモです。 IDとクラス名には大文字と小文字を使い分ける その を大文字にするか、単語の最初の文字を大文字にします。 . まず、完全な大文字の単語は読解に適していないため、除外されます。すべて小文字にするか、頭文字を大文字にするかは、個人の好みによります。 重要なのは、どのルールを使うにせよ、一貫性を持たせることです。 . ある時は純粋な小文字を使い、次の時は最初の文字を大文字にするなど、混乱させないようにしましょう。

また、長い名前の場合、アンダースコア "_"をつけるのか、ハイフン "-"をつけるのか、何もつけないのか、迷うところです。それとも、私が複雑に考えすぎているだけなのでしょうか。いずれにしても、一貫性を保つことができれば問題ありません。

前のページ 1 2 次のページ もっと読む

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します