HTML 강좌 / 문법

HTML 문법은 요소(element)를 태그로 표현하고, 필요한 정보를 속성(attribute)으로 추가하는 방식입니다. 시작 태그와 종료 태그의 범위를 맞추고, 요소를 올바른 순서로 중첩하며, 속성값을 따옴표로 감싸는 방법을 알아두면 HTML 코드를 정확하게 작성하는 데 도움이 됩니다.

HTML 요소와 태그의 기본 문법

HTML 요소는 일반적으로 시작 태그, 내용, 종료 태그로 구성됩니다.

<tagname>내용</tagname>

• <tagname>은 요소가 시작되는 위치를 나타내는 시작 태그입니다.
• 내용은 브라우저에 표시되거나 요소 안에서 처리되는 콘텐츠입니다.
• </tagname>은 요소가 끝나는 위치를 나타내는 종료 태그입니다.

다음 코드는 하나의 p 요소를 만듭니다. <p>는 시작 태그, HTML 문법은 내용, </p>는 종료 태그입니다.

<p>HTML 문법</p>

HTML 태그 이름은 대소문자를 구분하지 않지만, 코드의 일관성과 가독성을 위해 소문자로 작성하는 것이 일반적입니다.

종료 태그가 없는 빈 요소

모든 HTML 요소에 종료 태그가 필요한 것은 아닙니다. 내용을 가질 수 없는 빈 요소(void element)는 시작 태그만 사용합니다.

<br>
<img src="image.webp" alt="푸른 바다 위로 떠오르는 해">
<input type="text" name="username">
<meta charset="utf-8">

br, img, input, meta 등이 대표적인 빈 요소입니다. HTML 문법에서는 이러한 요소에 </br>나 </img> 같은 종료 태그를 작성하지 않습니다.

HTML 속성 작성 방법

속성은 요소의 동작이나 추가 정보를 지정하며 시작 태그 안에 작성합니다. 속성 이름과 값은 등호(=)로 연결합니다.

<tagname attribute="value">내용</tagname>

예를 들어 다음 코드는 blockquote 요소에 값이 quote-01인 id 속성을 추가합니다.

<blockquote id="quote-01">
  인용문
</blockquote>

속성값은 큰따옴표나 작은따옴표로 감쌀 수 있습니다. 따옴표를 생략할 수 있는 경우도 있지만 공백이나 특정 문자가 포함되면 의도와 다르게 해석될 수 있으므로, 일관되게 큰따옴표를 사용하는 편이 안전합니다.

<p style="color: red;">빨간색 문장</p>

다음과 같이 따옴표 없이 공백을 넣으면 브라우저는 style 속성값을 color:까지만 해석할 수 있으므로 원하는 결과가 나오지 않습니다.

<p style=color: red;>빨간색 문장</p>

disabled, checked, required처럼 값보다 속성의 존재 자체가 의미를 갖는 불리언 속성도 있습니다.

<input type="text" disabled>

태그는 안쪽 요소부터 닫기

요소 안에 다른 요소를 넣을 때는 나중에 연 태그를 먼저 닫아야 합니다. 다음 코드는 strong 요소가 p 요소 안에 완전히 포함되어 있으므로 올바르게 중첩되어 있습니다.

<p>이 문장에서 <strong>중요한 부분</strong>을 강조합니다.</p>

다음처럼 태그의 범위가 서로 겹치면 올바른 중첩이 아닙니다.

<p>이 문장에서 <strong>중요한 부분</p></strong>

브라우저가 잘못된 마크업을 가능한 범위에서 보정해 표시할 수는 있지만, 브라우저의 오류 복구에 의존하면 예상하지 못한 문서 구조가 만들어질 수 있습니다.

HTML 주석 작성 방법

HTML 주석(comment)은 <!--로 시작하고 -->로 끝납니다. 브라우저 화면에는 표시되지 않으므로 코드의 목적이나 임시 메모를 남길 때 사용할 수 있습니다.

<!-- 이 내용은 브라우저 화면에 표시되지 않습니다. -->

주석은 여러 줄로 작성할 수도 있습니다.

<!--
  여러 줄로 작성한
  HTML 주석입니다.
-->

HTML 주석 안에 다른 주석을 중첩하면 주석의 범위가 의도와 다르게 해석될 수 있으므로 사용하지 않아야 합니다.

<!--
  <!-- 중첩한 주석 -->
-->

HTML 문법을 확인하는 방법

HTML은 문법 오류가 있어도 브라우저가 가능한 범위에서 내용을 표시합니다. 화면이 보인다는 사실만으로 문법이 정확하다고 판단하지 말고, 태그 중첩과 속성값을 직접 확인하거나 W3C Markup Validation Service로 검사하는 것이 좋습니다.

HTML 문법의 세부 규칙은 WHATWG HTML 문법 표준에서 확인할 수 있습니다.