HTML syntax

태그는 문법, 요소는 결과, 속성은 의미를 더한다

한 줄의 HTML도 시작 태그, 콘텐츠, 종료 태그, 속성을 나누어 보면 브라우저가 해석하는 구조가 또렷해집니다.

Tag <p>, </p> 같은 표시 기호
Element 태그와 내용이 묶인 하나의 단위
Attribute 시작 태그 안에 붙는 추가 정보
1

태그 고르기

<h1> · <p> · <a>

내용의 역할에 맞는 이름을 고릅니다. 제목, 문단, 링크는 서로 다른 의미를 가집니다.

2

요소 만들기

<p>내용</p>

시작 태그, 콘텐츠, 종료 태그를 합치면 브라우저가 하나의 요소로 읽습니다.

3

속성 더하기

href="..." alt="..."

속성은 시작 태그 안에서 대상, 설명, 크기처럼 요소의 세부 정보를 전달합니다.

4

흐름 확인

block · inline

블록은 줄을 만들고, 인라인은 문장 안에서 이어집니다. 배치 감각의 출발점입니다.

한 줄을 분해하기

시작 태그 <a href="/about">
콘텐츠 소개 보기
종료 태그 </a>

점검 질문

✓ 이 태그가 콘텐츠의 의미를 정확히 설명하나요?
✓ 종료 태그가 필요한 요소라면 짝이 맞나요?
✓ 속성 값은 따옴표로 감싸고, 접근성 정보는 빠뜨리지 않았나요?