HTML 요소(Elements)

HTML 요소(Element)는 요소는 웹페이지에 콘텐츠를 정의하는 기본 단위로, 태그와 그 안에 포함된 내용을 포함하는 개념입니다.

대부분의 HTML 요소는 시작 태그와 종료 태그, 그리고 그 사이의 내용으로 구성됩니다.

HTML 요소 기본 구조
<시작태그>HTML 요소 내용</종료태그>

예를 들어 아래 코드는 <p> 태그로 둘러싸인 안녕하세요는 p 요소를 나타냅니다.

텍스트 콘텐츠를 표현하는 p 요소 예시
<p>안녕하세요</p>

HTML 요소를 사용하면 이미지, 비디오, 오디오, 링크 등 다양한 콘텐츠를 웹 페이지에 표현할 수 있습니다.

주요 HTML 요소 3가지

요소를 구성하는 HTML 태그의 종류는 수백가지가 넘기 때문에 모든 태그를 전부 외울 필요는 없습니다.

아래에서 소개하는 3가지 요소는 웹페이지를 구성하는 데 가장 기본적이고 중요한 요소입니다.

h 요소에서 h는 Heading의 약자로, h1부터 h6까지 수준별로 문서의 제목과 부제목을 나타냅니다.

<h1>이 가장 중요한 제목이며, <h6>이 가장 낮은 수준의 제목입니다.

제목을 나타내는 h 요소
<h1>대제목</h1>
<h2>소제목</h2>
<h3>하위 제목</h3>

p 요소에서 p는 Paragraph의 약자로, p 요소는 텍스트로 구성된 단락을 정의합니다.

단락을 나타내는 p 요소
<p>단락</p>

a 요소에서 a는 앵커(anchor)의 약자로, 다른 웹사이트나 동일 웹페이지 내 다른 섹션으로 이동하는 링크를 생성합니다.

링크를 나타내는 a 요소
<a href="https://www.example.com">링크</a>

이외에도 <div>, <img>, <input>, <ul>, <li> 등 다양한 HTML 요소를 활용해 웹페이지의 콘텐츠를 구성할 수 있습니다.

HTML 요소들은 위계에 따라 부모(Parent)와 자식(Child) 관계를 갖습니다.

부모 요소는 다른 HTML 요소들을 포함하는 상위 요소입니다. 부모 HTML 요소에 포함된 하위 HTML 요소들을 자식이라고 합니다.

부모 요소와 자식 요소
<!-- 이 div는 부모 요소입니다. -->
<div>
  <!-- 이 p는 자식 요소입니다. -->
  <p>안녕하세요!</p>
</div>

위 예시에서 <div> 요소는 <p> 요소의 상위에 위치한 부모 요소이며, <p> 요소는 <div> 요소의 하위에 위치한 자식 요소입니다.

코드의 별표로 강조된 부분을 따라 입력해 보세요.