HTML / 문법
기본 문법
가장 기본적인 문법은 다음과 같다.
<tagname>Contents</tagname>
- 위 모든 걸 요소(element)라고 한다.
<tagname>
을 시작 태그,</tagname>
을 종료 태그, 둘을 합쳐 태그(tag)라고 한다.- Contents는 내용이다.
예를 들어
<p>Lorem</p>
는 p 요소라 하고, 시작 태그는 <p>
, 종료 태그는 </p>
, 내용은 Lorem이다.
속성
태그는 속성(attribute)을 가질 수 있다.
<tagname attribute="value">Contents</tagname>
예를 들어 blockquote
에 id
속성(attribute)을 추가하고 값(value)을 abc로 정하고 싶으면 다음과 같이 한다.
<blockquote id="abc"> ... </blockquote>
속성값(value)은 큰 따옴표로 감싸도 되고, 작은 따옴표로 감싸도 되고, 따옴표를 사용하지 않아도 된다. 단, 속성값에 공백이 있으면 큰 따옴표 또는 작은 따옴표로 감싸야 한다. 예를 들어
<p style="color:red;">Lorem</p> <p style="color: red;">Lorem</p> <p style='color:red;'>Lorem</p> <p style='color: red;'>Lorem</p> <p style=color:red;>Lorem</p>
는 p
요소의 글자를 빨간색으로 만들지만
<p style=color: red;>Lorem</p>
는 빨간색이 되지 않는다. style
속성의 값을 color:
로 해석하기 때문이다.
글자색이 빨간색이 되지 않을 뿐 Lorem은 출력되고 에러 메시지는 없다. HTML은 문법이 틀려도 나타낼 수 있는 만큼 나타내는 느슨한 언어이다.
주석
주석(Comment)은 웹브라우저가 해석하지 않는 코드이다. <!--
와 -->
로 둘러싸인 부분은 주석이 된다.
<!-- Comment -->
줄바꿈이 있어도 주석으로 처리된다.
<!-- Comment ... Comment -->
주석 안에 주석을 넣으면 원치 않는 결과가 나올 수 있다. 예를 들어 다음의 경우 마지막 줄의 abc -->은 주석으로 처리되지 않고, 웹브라우저에 출력된다.
<!-- <!-- Comment --> abc -->
주석은 웹브라우저가 해석하지 않지만, 소스 보기로 누구나 볼 수 있다는 것에 주의해야 한다.