웹 개발자가 꼭 알아야 할 15가지 코딩 원칙

HTML은 거의 20년에 걸쳐 개발되었습니다. HTML4에서 XHTML, 그리고 최근 매우 인기 있는 HTML5에 이르기까지 전체 인터넷의 발전을 거의 목격했습니다. 그러나 지금도 개발자가 세심한 주의를 기울여야 할 기본 개념과 원칙이 많이 있습니다. 아래에서는 반드시 지켜야 할 개발 원칙을 소개하겠습니다.

1. 레이아웃에 DIV를 잘 활용하세요

웹페이지를 개발할 때 가장 먼저 고려해야 할 것은 페이지의 초점을 구분하는 것입니다. 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 스타일 시트를 분리해야 합니다. 이는 모든 웹 개발자가 처음 웹 개발을 접할 때 알아야 할 원칙입니다. 그러나 오늘날까지도 이 원칙을 엄격하게 따르지 않는 개발자가 여전히 많습니다.

HTML 태그에 스타일시트 코드를 삽입하지 마세요. 개발자는 CSS 스타일 시트를 저장하기 위해 별도의 파일을 만드는 습관을 길러야 합니다. 또한 이를 통해 다른 개발자가 코드를 수정할 때 작업을 더 쉽게 완료할 수 있습니다.

<p style="color: #CCC; font-size:16px; font-family: arial">
　　　　An example to illustrate inline style in html</p>

3. CSS 코드 최적화

요즘에는 웹사이트에 여러 CSS 파일을 추가하는 것이 매우 일반적입니다. 그러나 웹사이트에 CSS 파일이 너무 많으면 웹사이트의 응답 속도가 느려집니다. 해결책은 코드를 간소화하고 여러 CSS 파일을 최적화하여 하나의 파일로 병합하는 것입니다. 이 방법을 사용하면 웹사이트 로딩 속도를 크게 향상시킬 수 있습니다. 또한 CSS Optimizer, Clean CSS 등과 같이 CSS 파일을 최적화하는 데 사용할 수 있는 많은 도구가 있습니다.

CSS의 경우 꼭 알아야 할 9가지 우수한 CSS 프레임워크도 추천해 드립니다. CSS 프레임워크의 유형과 관련 사용법을 배울 수 있습니다.

4. Javascript 파일을 최적화하여 페이지 하단에 배치합니다.

CSS처럼 여러 Javascript 파일을 페이지에 추가하는 것도 일반적입니다. 하지만 이렇게 하면 웹사이트의 응답 속도도 느려집니다. 이러한 이유로 개발자는 이러한 Javascript 파일을 간소화하고 최적화해야 합니다.

하지만 CSS와 다른 점은 브라우저가 일반적으로 병렬 로딩을 지원하지 않는다는 것입니다. 즉, 브라우저가 Javascript 파일을 로드할 때 더 이상 다른 콘텐츠를 동시에 로드하지 않습니다. 이로 인해 페이지 로딩 속도가 느려지는 것처럼 보입니다.

좋은 해결책은 Javascript 파일의 로딩 순서를 마지막에 두는 것입니다. 이를 달성하기 위해 개발자는 HTML 문서 하단에 Javascript 코드를 배치할 수 있으며 가장 좋은 위치는 36cc49f0c466276486e50c850b7e4956 태그 근처입니다.

5. 제목 요소를 잘 활용하세요

4a249f0d628e2318394fd9b75b4636b1 ~ 4e9ee319e0fa4abc21ff286eeb145ecc 이 요소는 페이지의 핵심 콘텐츠를 강조하는 데 사용됩니다. 이를 통해 사용자는 페이지의 중요한 부분에 더 집중할 수 있습니다. 블로그의 경우, 나는(이 글의 저자를 언급하면서) 블로그 제목을 강조하기 위해 4a249f0d628e2318394fd9b75b4636b1 태그를 사용할 것을 권장합니다. 왜냐하면 블로그 제목이 페이지에서 가장 중요한 부분이기 때문입니다.

<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 태그는 표준화된 콘텐츠 구조를 구성하는 데 핵심입니다. 예를 들어 907fae80ddef53131f3292ee4f81644b 태그는 중요한 내용을 강조하는 데 사용됩니다. e388a4556c0f65e1904146cc1a846bee 태그는 기사 단락을 강조하는 데 적합합니다. 단락 사이에 빈 줄을 추가하려면 df250b2156c434f3390392d09b1c9563 태그를 사용하지 마세요.

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

7、避免滥用dc6dce4a544fdca2df29d5ac0ea9906b标签

并不是所有块元素都应该用dc6dce4a544fdca2df29d5ac0ea9906b标签来创建。例如，可以在内联元素的属性里添加display:block，将其以块元素的方式显示。

8、使用列表创建导航

使用ff6d136ddc5fdfeffaf53ff6ee95f185列表标签，再配以相应的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属性

在a1f02c36ba31691bcfe87b2722de723b标签里，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、在表格里使用2e1cf0710519d5598b1f0f14c36ba674 和 2b5469ab79cf842344327415c3b3bb95

为了提高代码质量，并让用户容易理解表格内容，我们应该用2e1cf0710519d5598b1f0f14c36ba674 和 2b5469ab79cf842344327415c3b3bb95标签创建表格元素。

<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 텍스트 마크업 확인 서비스를 사용하여 코드를 테스트하는 것이 좋습니다. 페이지에서 오류를 찾는 데 도움이 되는 효율적인 테스트 도구입니다. 또한 페이지 오류에서 시작하는 해당 코드를 찾는 데도 도움이 될 수 있습니다. 코딩이 완료된 후에는 이 작업을 수행하기 어려운 경우가 많습니다. 하지만 개발자는 검증을 통과한 코드가 성능이 뛰어난 코드가 아니라는 점에 유의해야 합니다.