HTML初心者のための15のベストプラクティス

HTML初心者のためのベストプラクティス30選を、参考までに以下の通り共有します。

1. タグを閉じておく

以前は、以下のようなコードをよく見かけました（訳注：何年前の話だ）。

外側のラップされたUL/OLタグが省かれていること（意図的かどうかは誰にもわからない）、そしてLIタグが消され忘れていることに注目してください。今日の基準では、これは明らかにバッドプラクティスであり、100％避けるべきことです。要するに、閉じタグは守れ、ということです。さもないと、htmlタグの検証時に問題が発生する可能性があります。

より良い方法

2. 正しいドキュメントタイプを宣言する

私は以前、多くのCSSフォーラムに参加したことがありますが、ユーザーが問題を抱えたときはいつでも、まず2つのことをするようにと提案します。

1. CSS ファイルを検証し、エラーがないことを確認する。

2. 正しいdoctypeが追加されていることを確認する

DOCTYPEはHTMLタグの前に表示され、ページがHTML、XHTML、またはその両方を含んでいるかをブラウザに伝え、ブラウザが正しく解析できるようにするためのものです。

通常、4種類の文書タイプがあります。

どのような文書型宣言を使うかについては、これまでさまざまな意見があった。最も厳密な宣言を使うのがよいと思われがちですが、調査によると、ほとんどのブラウザはそのような宣言を普通に解析することが分かっており、多くの人は HTML 4.01 標準を使うことにしているようです。宣言の選択における最重要ポイントは、それが本当に自分にとって有効かどうかということです。したがって、あらゆる側面を考慮して、プロジェクトに適した宣言を選択することが望まれます。

3. インラインスタイルを使用しない

コードに埋もれていると、手書きで、あるいはいい加減に、こんな風にインラインのCSSコードを追加してしまうことがよくあります。

This looks convenient and problem-free. However, this is a mistake in your coding practice.

When you write code, it's best not to include style code until the content structure is complete.

Coding this way is like playing guerrilla, a very cottage industry approach. -- Chris Coyier

A better approach would be to complete the tag section and then define the style of this P in an external stylesheet file.

Suggestions

4. Put all external css files inside the head tag

In theory, you can introduce CSS style sheets anywhere, but the HTML specification recommends introducing them in the head tag of the page to speed up the rendering of the page.

During the development of Yahoo, we found that introducing style sheets in the head tag speeds up page loading because it allows the page to render gradually. -- ySlow team

5.javascript文件放在底部

要记住一个原则，就是让页面以最快的速度呈现在用户面前。当加载一个脚本时，页面会暂停加载，直到脚本完全载入并执行完成。因此会浪费用户更多的时间。

如果你的JS文件只是要实现某些功能，（比如点击按钮事件），那就放心的在body底部引入它，这绝对是最佳的方法。

建议

6.永远不要使用内联javascript。现在不是1996年了！

一昔前までは、HTMLタグに直接JSコードを追加する方法が存在しました。 特に、シンプルな写真集に多く見られた。 基本的には、「onclick」イベントがタグに添付され、いくつかのJSコードと同じ効果を発揮していました。 詳細は省きますが、このコードは使用せず、外部のJSファイルに移動して、「addEventListener / attachEvent」を使用してイベントリスナーを追加する必要があります。 または、jqueryなどのフレームワークを使用して、「クリック」メソッドだけを使用します。

7.開発しながら、検証する

これから始める方は、Web Developer Toolbarをダウンロードし（Chromeユーザーはアプリショップで検索、IEユーザーはおそらく運が悪い）、コーディング中は常に「HTML標準検証」「CSS標準検証」を使用することを強くお勧めします。 "CSS標準の検証"。 CSSはとても簡単に学べる言語だと思っているとしたら、それはあなたを殺すでしょう。 そのためには、検証、検証、検証を繰り返すことです。

8.firebugのダウンロード

Firebugは、JavaScriptのデバッグだけでなく、ページのマークアップのプロパティや位置を可視化できる、まさにWeb開発には最適なプラグインです。 もちろん、ダウンロードするのは言うまでもありません。

9.firebugの使用

私の観察によると、ほとんどのユーザーはFirebugの機能の20％しか使っておらず、時間の無駄になっています。

10.タグ名を小文字にする

理論的には、htmlは大文字小文字を区別しないので、例えば、以下のように好きなように書くことができます。

しかし、このような書き方をすると、大きな文字を入力する労力が無駄になり、コードが読みづらくなるので、やめたほうがよいでしょう。

提案

11.使用H1-H6标签

建议你在网页使用中其中全六种标记，虽然大分人只会用到前四个，但使用最多的会有很多好处，比如设备友好，搜索引擎友好，不把你的頁都替换成h6.0。

12. ナビゲーションメニューを順序不同のリスト（UL）で囲む

多くの場合、Webサイトにはナビゲーションメニューがあり、そのように定義することができます。

美しいコードを書きたいのであれば、この方法は使わない方がよいでしょう。

なぜナビゲーションメニューのレイアウトにULを使うのか？-- ULはリストを定義するために生まれたからです

このように定義するのがよいでしょう。

15. IEとの付き合い方を学ぶ

フロントエンド開発者にとってIEは常に悪夢だった!

CSSのスタイルシートが基本的に決まっているのであれば、IE用のスタイルシートを別に作れば、IEにしか通用しないようになります。

 これらのコードが意味するところは、ユーザーのブラウザがIE6以下の場合、このコードだけが機能するということです。IE7も含めたい場合は、"[if lt IE 7]"を "[if lte IE 7]"に変えてください。

以上が今回の内容の全てです、ご参考になれば幸いです。