Web 開発者が知っておくべき 15 のコーディング原則

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>

6. 適切な HTML タグを適切な場所で使用する

HTML タグは、標準化されたコンテンツ構造を構築するための鍵です。たとえば、 タグは重要なコンテンツを強調するために使用されます。

タグは記事の段落を強調表示するのに適しています。段落間に空白行を追加する場合は、
タグを使用しないでください。

<em>emphasized text</em>
<strong>strongly emphasized text</strong>

7、避免滥用

标签

并不是所有块元素都应该用

标签来创建。例如，可以在内联元素的属性里添加display:block，将其以块元素的方式显示。

8、使用列表创建导航

使用

列表标签，再配以相应的CSS样式，可以创建美观的导航菜单。

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(&#39;#logo&#39;);
</script>
<![endif]-->

14、避免过度注释

作为一名开发者，在代码中添加注释是一个好习惯，能方便理解并易于维护。这在其它编程语言如PHP、JAVA 和 C#里很普遍。但是，HTML/XHTML是文本标记语言，非常容易理解。因此，无需为每行代码都添加注释。

15、测试代码

開発者はコードをテストするために W3C テキスト マークアップ検証サービスを使用することをお勧めします。これは、ページ内のエラーを見つけるのに役立つ効率的なテスト ツールです。さらに、ページエラーから始まる対応するコードを見つけるのにも役立ちます。多くの場合、コーディングが完了した後にこれを行うのは困難です。ただし、開発者は、検証に合格したコードは優れたパフォーマンスを備えたコードではないことに注意する必要があります。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.最高のグラフィック設定

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション

1週間前 By DDD

R.E.P.O.誰も聞こえない場合はオーディオを修正する方法

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

Atomfallのクレーンコントロールキーカードを見つける場所

1週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7433

15

CakePHP チュートリアル

1359

52

Steamのアカウント名の形式は何ですか

76

11

Win11 Activation Key Permanent

29

19

もっと見る