[HTML] Element(요소)의 구조

Element의 구조

<!-- Element 구조의 예시 -->
<p class="welcome" disabled>This is my text.</p>

Element(요소)는 아래 태그와 내용, 그리고 속성으로 구성되어 있다.

1. Opening tag(여는 태그) : 요소의 이름과 열고 닫는 꺽쇠 괄호(<>)로 구성되며, 이후부터 Element의 효과가 적용되기 시작한다. Opening tag에는 **attributes(속성)**을 작성할 수 있다.
2. Closing tag(닫는 태그) : 요소의 이름 앞에 슬래시(/)가 있는 것을 제외하면 Opening tag와 같음. Element의 끝에 위치한다. Closing tag를 적어주지 않는 오류가 종종 있으며, 별도의 Error code는 나타나지 않으나, 이상한 결과를 보여준다.
3. Context(내용) : Opening tag와 Closing tag 사이의 text
4. Attribute(속성) : Element에 Context로서 실제로 나타내고 싶지는 않으나 추가적인 내용을 담고 싶을 때 Opening tag에 작성하여 사용한다. 아래 작성법에 따라 만들어 진다.
   • 이름, 등호, 값으로 이루어져 있다.
   • Element 이름 바로 다음에 오는 경우, 이름과 Attribute 사이에 공백이 있어야 하고, 하나 이상의 Attribute가 있는 경우, 그 사이 공백이 있어야 한다.
   • 이름 다음에는 등호(=)가 붙는다.
   • 값은 열고 닫는 따옴표(” ”)로 감싸야 한다. 작은 따옴표, 큰 따옴표 둘 다 사용가능하나, 섞어 사용하지 말아야 한다.
   • Attribute 중 값이 없는 경우가 있는데, 이는 Boolean Attribute로서 허용되는 경우이다. 일반적으로 그 이름과 동일한 하나의 값만을 가질 수 있다.

Empty elements(빈 요소)

모든 Element가 위와 같이 Opening tag, Context, Closing tag 패턴을 따르는 것은 아니다. 주로 문서에 무언가를 첨부하기 위해 Single tag(단일 태그)를 사용하는 요소도 있다.

<!-- Empty elements 예시 -->
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">