HTML は 20 年近くの開発を経てきました。 HTML4 から XHTML、そして最近非常に人気のある HTML5 に至るまで、インターネット全体の発展をほぼ目撃してきました。ただし、現在でも、開発者が細心の注意を払う必要がある基本的な概念や原則が数多くあります。以下に、守るべき開発原則を紹介します。
1. レイアウトに DIV を上手に活用する
Web ページを開発するとき、最初に考慮すべきことは、ページのフォーカスを区別することです。これらのコンテンツを DIV タグに含めることで、ページ上のコードがきれいにインデントされて表示されます。
<div id="header"></div>
<div id="body-container">
<div id="content"> <!-- Content -- > </div>
<div id="right-side-bar"> <!-- Right Side Bar Content Area -- ></div>
</div>
<div id="footer"></div>2. HTML タグと CSS スタイル シートを分離する
適切なページでは、HTML タグと CSS スタイル シートを分離する必要があります。これは、すべての Web 開発者が初めて Web 開発に取り組むときに知っておくべき原則です。しかし、今日に至るまで、この原則に厳密に従っていない開発者がまだ多くいます。
HTML タグにスタイルシートコードを埋め込まないでください。開発者は、CSS スタイル シートを保存するための別のファイルを作成する習慣を身に付ける必要があります。これにより、他の開発者がコードを変更するときに作業を迅速に完了することが容易になります。
<p style="color: #CCC; font-size:16px; font-family: arial"> An example to illustrate inline style in html</p>
3. CSS コードを最適化する
現在では、複数の CSS ファイルを Web サイトに追加することが非常に一般的になっています。ただし、Web サイトに含まれる CSS ファイルが多すぎると、Web サイトの応答速度が遅くなります。解決策は、コードを合理化し、複数の CSS ファイルを最適化し、それらを 1 つのファイルにマージすることです。この方法により、Web サイトの読み込み速度が大幅に向上します。さらに、CSS Optimizer、Clean CSS など、CSS ファイルの最適化に使用できるツールが多数あります。
CSS については、知っておくべき 9 つの優れた CSS フレームワークも紹介しています。CSS フレームワークの種類と関連する使用法について学ぶことができます。
4. Javascript ファイルを最適化し、ページの下部に配置します
CSS と同様に、複数の Javascript ファイルをページに追加することも一般的です。ただし、これにより Web サイトの応答速度も低下します。このため、開発者はこれらの Javascript ファイルを合理化し、最適化する必要があります。
ただし、CSS とは異なる点が 1 つあります。ブラウザは通常、並列読み込みをサポートしていません。これは、ブラウザが Javascript ファイルをロードするときに、他のコンテンツを同時にロードしなくなることを意味します。これにより、Web ページの読み込み速度が遅くなったように見えます。
良い解決策は、JavaScript ファイルの読み込み順序を最後にすることです。これを実現するには、開発者は HTML ドキュメントの下部に Javascript コードを配置します。最適な場所は タグの近くです。
5. タイトル要素を上手に活用しましょう
<h1>This is the topmost heading</h1> <h2>This is a sub-heading underneath the topmost heading.</h2> <h3>This is a sub-heading underneath the h2 heading.</h3>
タグは記事の段落を強調表示するのに適しています。段落間に空白行を追加する場合は、
タグを使用しないでください。
<em>emphasized text</em> <strong>strongly emphasized text</strong>
7、避免滥用
并不是所有块元素都应该用
8、使用列表创建导航
使用
9、别忘了封闭标签
现在，每当我回忆起在大学里学到的关于Web开发的第一堂课时，教授提到的HTML结构的重要性总是浮现在我的脑海。根据W3C标准，标签应该被封闭。那是因为，在一些浏览器下，如果没有按照标准来将标签封闭，会出现显示不正常的问题。而这一情况在IE6、7和8里尤为明显。
10、标签小写语法
标签采用小写语法是一项行业标准。虽然大写语法并不影响页面的显示效果，但是，代码的可读性很差。下面这段代码可读性就非常差：
<DIV> <IMG SRC="images/demo_image.jpg" alt="demo image"/> <A HREF="#" TITLE="click here">Click Here</A> <P>some sample text</P> </DIV>
11、为图片标签添加alt属性
在标签里，alt属性通常非常有用。因为搜索引擎通常无法直接抓取图片文件。但是，如果开发者在alt属性里添加了图片的描述内容，将会方便搜索引擎的抓取。
<!-- has an alt attribute, which will validate, but alt value is meaningless -- > <img id="logo" src="images/bgr_logo.png" alt="brg_logo.png" /> <!-- The correct way -- > <img id="logo" src="images/bgr_logo.png" alt="Anson Cheung - Web Development" />
12、在表格里使用
为了提高代码质量，并让用户容易理解表格内容，我们应该用
<fieldset>
<legend>Personal Particular</legend>
<label for="name">Name</label><input type="text" id="name" name="name" />
<label for="email">E-mail</label><input type="text" id="email" name="email" />
<label for="subject">Subject</label><input type="text" id="subject" name="subject" />
<label for="message" >Message Body</label>
<textarea rows="10" cols="20" id="message" name="message" ></textarea>
</fieldset>13、将浏览器兼容代码标明信息并相互分开
对一名Web开发者来说，跨浏览器兼容是一个被重点关注的问题。通常，开发者会针对不同的浏览器来编码，也即是CSS hack。但是，如果开发者在编码时，能注明代码为哪一个版本的浏览器所写，会为以后的维护工作带来极大方便。下面就是一个很好的示例：
<!--[if IE 7]> <link rel="stylesheet" href="css/ie-7.css" media="all"> <![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" href="css/ie-6.css" media="all">
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('#logo');
</script>
<![endif]-->14、避免过度注释
作为一名开发者，在代码中添加注释是一个好习惯，能方便理解并易于维护。这在其它编程语言如PHP、JAVA 和 C#里很普遍。但是，HTML/XHTML是文本标记语言，非常容易理解。因此，无需为每行代码都添加注释。
15、测试代码
開発者はコードをテストするために W3C テキスト マークアップ検証サービスを使用することをお勧めします。これは、ページ内のエラーを見つけるのに役立つ効率的なテスト ツールです。さらに、ページエラーから始まる対応するコードを見つけるのにも役立ちます。多くの場合、コーディングが完了した後にこれを行うのは困難です。ただし、開発者は、検証に合格したコードは優れたパフォーマンスを備えたコードではないことに注意する必要があります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
