[HTML] HTML 정의와 태그와 요소

 

• HTML(Hypertext Markup Language) : 콘텐츠의 구조를 정의하는 마크업 언어(문서)
• HTML은 콘텐츠의 서로 다른 부분을 씌우거나 감싸서 다른 형식으로 보이게 하거나 특정한 방식으로 동작하도록 하는 일련의 요소로 이루어져 있음
• 문서 작업이 가능한 프로그램이라면 모두 구현 가능

HTML 요소 분석

출처 : mdn

위 그림처럼 <p>태그(문단) 로 예시를 두면 이 요소의 주요 부분은 다음과 같음

 

1. 여는 태그(Opening tag) : <p> (여는 p태그), 요소의 이름으로 구성되고 여닫는 꺽쇠괄호로 감싸짐, 요소가 시작되는 곳을 나타냄
2. 닫는 태그(Closing tag) : </p> (닫는 p태그), 여는 태그와 비슷하지만 요소의 이름 앞에 슬래쉬가 포함되고 이는 요소의 끝을 나타냄
3. 콘텐츠(Content) : 요소의 내용(Content)으로 위 그림에서는 그냥 Text임
4. 요소(Element) : 요소는 여는태그와 닫는태그, 그리고 콘텐츠로 이루어짐

HTML에서 "요소(element)"와 "태그(tag)"는 밀접하게 관련된 개념이지만 서로 다르다.

• HTML 요소와 태그는 자주 같은 단어로 사용되지만 서로 다른 의미이다.
• 위의 설명과 같이 요소는 여는태그, 닫는태그, 그 사이의 콘텐츠로 구성되고 태그는 HTML 문서에서 요소를 표시하기 위해 사용되는 마크업(Markup)이다. 마크업에 대한 내용은 하단 게시글에 표기하였음.

2024.05.28 - [Web/HTML] - [HTML] HTML에서의 마크업과 DOM 구조

[HTML] HTML에서의 마크업과 DOM 구조

 

 

• 요소는 HTML문서에서 실제로 렌더링 되며 브라우저가 해석하는 단위이다. 
• 위와같이 대부분의 태그는 여는태그와 닫는태그로 구성되지만 일부 태그는 닫는 태그없이도 사용할 수 있다, 이를 빈요소라고 하고 예를 들어 <img> 태그나 <br> 태그는 닫는 태그없이 단일 태그로 사용 가능하다

• 요소에는 속성(Attribute)도 가질수 있다.

출처 : mdn

• 각 요소마다 다양한 속성이 있다.
• 요소안에 요소를 넣는 중첩(nesting)도 가능하다.

See the Pen Untitled by 김윤석 (@bgvlptwd-the-typescripter) on CodePen.

• 위 코드를 보면 여러가지의 태그를 중첩해서 글씨를 굵게하고 기울이게 중첩을 하여 나타낸 것을 알 수 있다.(Result 클릭)

더 다양한 태그의 정보는 mdn이나 w3schools사이트를 참고하면 된다.

 

참고

https://developer.mozilla.org/ko/docs/Web/HTML/Element   - 요소 참고서

https://www.w3schools.com/tags/tag_head.asp  - 태그 종류