홈페이지 만들기 - 좋은 문서 작성 습관

좋은 문서 작성 습관

현재 자신이 사용하는 브라우저에서는 잘 작동하지만, 다른 브라우저와의 호환성이나, 앞으로의 변화에 대하여 문제를 일으킬 수 있는 사용법들은 자제하는 것이 좋다. 몇몇 특수한 효과를 내기 위하여 사용하는 변칙적인 방법들이 역효과를 가져 올 수 있다는 점을 주의하여야 한다. 아래에 주의해야할 몇 가지가 나열되어 있다.

- tag끼리의 겹침을 피하라

아래의 HTML을 한번 살펴보기로 하면 :

<B>This is an example of <EM>overlapping</B> HTML tags.</EM>

출력 - This is an example of overlapping HTML tags.
(대부분의 브라우저에서 우리가 예상할 수 없는 형태로 출력될 것이다)

"overlapping" 이라는 단어가 <B> 와 <EM> tag 사이에 포함되어 있는 것을 볼 수 있다. 브라우저에서는 이것을 어떻게 나타내게 될 지 브라우저를 통하여 그것을 보기 전에는 알 수가 없다. 그리고 서로 다른 브라우저에서는 각각 달리 그에 따른 반응을 보일 것이다. 일반적인 경우에 tag 를 중첩사용하는 것은 피하는 것이 좋다.

- 삽입된 앵커와 문자 tag

다른 HTML 요소간에 앵커를 삽입하는 것이 가능하다. <H1><A HREF = "Destination.html">My heading</A></H1> 그러나 앵커 안에는 머릿글과 같은 다른 HTML 요소를 삽입하지 않는 것이 권장된다.

<A HREF = "Destination.html"> <H1>My heading</H1> </A>

비록 대부분의 브라우저들이 위와 같은 예제를 제대로 처리하지만, 공식적인 HTML과 HTML+ 사양에서는 이러한 것들이 명시되어 있지 않다. 그리고 향후의 브라우저에서는 이것들에 대하여 제대로 작동하지 않을 수도 있다.

- 문자 tag들은 다른 tag들이 나타내는 모양에 대하여 영향을 미친다.

<UL><LI><B>A bold list item</B>
    <UL>
    <LI><I>An italic list item</I>
</UL>

어쨌든 간에 서로 다른 HTML tag들끼리 삽입되는 것은 피하는 것이 좋다. 예를 들어, 리스트 안에서 글자크기를 크게 하기 위해서 머릿글 tag을 사용한다고 하면 :

    <UL><LI><H1>A large heading</H1>
        <UL>
        <LI><H1>Something slightly smaller</H1>
    </UL>

비록 몇몇 브라우저에서는 의도대로 잘 나타나게 될지도 모르지만, 다른 브라우저에서 어떻게 나타날 지는 예측할 수 없다. 모든 브라우저에서의 호환성을 도모하기 위하여 이같은 구성은 삼가는 것이 좋다. <H1>의 의미는 문서의 제 1 수준 머릿글이란 뜻이며, 문서의 내용들이 이 뒤에 따라나오도록 되어 있다. 따라서 리스트 안에 <H1>가 있다는 것은 논리적으로 납득할 만한 상황이 아니다.
문자의 형태를 나타내는 tag들도 일반적으로는 중첩되지 않는 것이 좋다. 아래의 예제에서
<B><I>some text</I></B>
아마도 두껍고 기울어진 서체(bold-italic)로 보여질 것이라고 예상할 것이다. 어떤 브라우저에서는 그렇게 보일 수도 있고, 다른 브라우저에서는 그 중에 한가지만 보여질 지도 모른다.

- 링크들을 점검하라

<img> Tag가 어떤 이미지를 나타내려 하지만 그것이 존재하지 않을 경우에는 아무것도 없는 이미지가 그것을 대신하여 나타난다. 이러한 일이 생기게 된다면 관련된 이미지가 존재하지 않는다는 것을 나타내므로 hyperlink 안에 명기된 URL을 정확히 손봐주거나 파일의 퍼미션을 누구나 다 읽을 수 있게 고쳐주어야 한다.

- head와 body에서 사용하는 tag의 혼용하지 말 것

[나쁜예]

<head>
        <h1>Heading</h2>
</head>
<body>
        <title>Title</title>
        ...
</body>

- tag과 문자들 사이에 white space(공백문자, 탭 등)를 사용을 자제할 것

몇몇 브라우저에서 문제를 일으킬 수 있다.

[나쁜예]

<a href="somepage.html"> link to somepage
</a>

- 적절치 못한 곳에서의 heading <h?> 사용, 단계를 뛰어 넘은 heading의 사용

<h1> 다음에 바로 <h2>가 아닌 <h3>를 사용하는 것, 글자크기를 크게 하기 위하여 <h?>를 사용하는 경우는 논리적으로 잘못 된 사용이다.

- 직접 관련된 의미가 없는 곳에 하이퍼 링크를 시키는 것

[나쁜예]
<a href="source.html">이곳</a>을 누르면 소스를 보실 수 있습니다.

[좋은예]
<a href="source.html">소스 코드</a>도 보실 수 있습니다.

- 가급적이면 물리적 포맷보다 논리적 포맷을 사용할 것

<i> -> <em> 또는 <cite>
<b> -> <strong>

- 텍스트 환경의 사용자들을 위하여 이미지를 넣을 경우 꼭 ALT attribute를 사용할 것

텍스트 환경의 브라우저를 사용한 경우, ALT를 사용하지 않으면 이미지에 해당하는 부분이 단지 [IMAGE]라고만 나오게 된다. 또한 그래픽을 지원하는 브라우저에서도 많은 사용자들이 Auto Load Images 옵션을 꺼둔다. 그렇게 되면, 사용자는 무슨 내용인지 알 수 없게 된다. 따라서, ALT attrubute를 사용하여 텍스트 환경에서도 최소한의 정보를 얻을 수 있도록 하여야 한다.

- 링크를 위하여 URL을 지정할 경우 상대 path를 사용

[나쁜예]
<a href="http://some.site.co.kr/~someone/subdir/sample.html">

[좋은예]
<a href="subdir/sample.html">

- 큰 파일에 링크된 경우 파일의 크기와 경고 메시지를 첨가할 것

[예]

본인의 <a href="picture.jpg">초상</a>(447Kbytes)을 보시고,
<a href="voice.wav">음성</a>(943Kbytes)을 들으실 수 있습니다.

- 모든 문서에 자신의 Home page와 상위 페이지를 연결해 둘 것

일반적으로 문서의 최하단부에 저자 자신의 이름과 홈페이지를 밝혀 둠으로써, 사용자가 글에 관련된 사항에 대하여 질문할 수 있도록 하며, 관련 페이지로 쉽게 이동할 수 있도록 한다.