마크업 기본 문법 규칙

마크업을 할 때 기본적으로 알고 있어야 하는 문법 규칙들

1. 요소는 시작 태그와 종료 태그가 있어야 합니다.

<p>요소는 시작 태그와 종료 태그가 있어야 한다.</p> (O)
<p>요소는 시작 태그와 종료 태그가 있어야 한다. (X)

태그 중에는 종료 태그가 없는 요소도 있는데 이러한 요소를 빈 요소(empty element)라고 하며 자주 사용되는 빈 요소에는 <br>, <hr>, <img>, <input>, <meta>, <link> 등이 있습니다.

2. 요소는 제대로 중첩되어야 합니다.

<p>중첩된 요소가 있을 때는 <strong>바르게</strong> 표현해야 한다. </p> (O)
<p>중첩된 요소가 있을 때는 <strong>바르게</p> 표현해야 한다. </strong> (X)

마지막에 정의한 태그를 가장 먼저 닫아야 한다는 뜻이며, 이런 중첩 관계를 부모-자식 관계라고도 합니다. 위의 예시에서는 <p>가 부모, <strong>이 자식 요소가 되죠.

3. img 태그에는 alt 속성이 있어야 합니다.

<img src="images/today.gif alt="오늘"> (O)
<img src="images/today.gif> (X)

alt 속성을 지정해야 하는 이유는 문법적으로도 필요하나, 이미지를 보지 못하는 환경에서도 이에 대한 정보가 제공되어야 하기 때문입니다.

4. 권장하는 사항도 있습니다.

<p>태그나 속성은 소문자로 마크업 하는 것을 권장한다. </p> (권장)
<P>태그나 속성은 소문자로 마크업 하는 것을 권장한다. </P>
<p title="속성 값">속성의 값에는 따옴표 처리를 권장한다. </p> (권장)
<p title=속성 값>속성의 값에는 따옴표 처리를 권장한다. </p>

가급적 소문자로 통일해서 마크업하며, 속성에 대한 값에 따옴표 처리를 하는 것을 권장합니다.

5. 주석처리 방법

주석이란 협업 시 다음 작업자가 현재 작업 중인 내용을 이해하기 쉽도록 도와주는 설명문이며, 이는 브라우저 화면에 출력되지 않고 처리 방법은 다음과 같습니다.

<!-- header -->
<!-- 여기서부터 공지 사항입니다. -->