HTML(HyperText Markup Language)
HTML 은 웹 페이지의 구조를 정의하는 마크업 언어입니다.
하이퍼 텍스트(HyperText)
하이퍼 텍스트란 다른 문서나 웹 페이지로 연결되는 텍스트를 의미합니다. 흔히 어떤 텍스트를 누르면 특정 링크로 이동되는 것을 볼 수 있는데, 이걸 하이퍼 텍스트라고 합니다.
아래 예시의 MDN HTML 문서를 클릭하면, 특정 페이지로 이동되는 걸 확인할 수 있습니다.
- 더 자세한 정보는 MDN HTML 문서에서 확인하세요.
- 실제 HTML 로 작성된 코드는 아래와 같습니다.
// HTML 작성 예시
<p>더 자세한 정보는 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN HTML 문서</a>에서 확인하세요.</p>정보의 연결성
하이퍼텍스트 덕분에 웹은 단순한 문서의 모음이 아닌 정보가 서로 연결된 네트워크로 형성될 수 있습니다.
💡 웹의 뼈대는 하이퍼 텍스트다 !
최초에 웹을 만든 팀 버너스 리는 문서들을 서로 연결하는 방식으로 웹을 구상했고, 하이퍼텍스트는 이 아이디어의 뼈대입니다.
마크업(Markup)
마크업은 텍스트에 의미나 구조를 부여하는 표시를 말합니다. 평범한 텍스트에 “이건 제목이야”, “이건 문단이야”, “이건 이미지야” 등 의미를 부여해서 브라우저가 이해할 수 있도록 만드는 것입니다.
마크업 예시
아래 예시에서 <h1> 은 “이건 제목(heading)이야 !” 라고 알려주는 마크업 태그라고 합니다.
<h1>이건 제목이야</h1>
이처럼 마크업은 평범한 텍스트에 태그라는 것으로 감싸면 의미를 갖는 텍스트가 된다는 것을 배웠습니다.
태그 (Tag)
태그는 위에서 설명한 것 처럼 콘텐츠를 감싸서 의미를 정의하는 것입니다.
태그의 종류
쌍태그 (Paired Tags)
쌍태그는 두 개의 태그로 하나의 콘텐츠를 감싸는 구조입니다.
<p>문단 내용</p>
- <p> : 열림 태그 (Opening Tag) - 태그의 시작
- 문단 내용 : 콘텐츠 - 사용자에게 보여지는 정보
- </p> : 닫힘 태그 (Closing Tag) - 태그의 끝
- 태그 이름 앞에 / 가 붙으면 닫는 것을 의미합니다.
빈 태그 / 단일 태그 (Self-closing Tags)
단일 태그는 콘텐츠를 감싸지 않고, 열림 태그만 있고 닫힘 태그는 없는 구조입니다.
<img src="cat.jpg" alt="고양이 사진"> // 이 태그 하나로 이미지를 삽입하는 역할을 한다.
<br>
<hr>
<input type="text">
쌍태그와 달리, 콘텐츠 없이 태그 하나만으로 의미를 전달합니다. 이런 태그들은 태그 자체에 의미가 부여되어 있고, 콘텐츠가 필요하지 않습니다.
💡 빈 요소(Void Elements)
콘텐츠를 포함하지 않고, 태그 자체로 의미가 있는 요소를 의미합니다.
- 콘텐츠가 없기 때문에 불필요한 닫힘 태그는 생략됩니다.
- MDN 참고 링크
자주 사용하는 태그
| 태그 | 의미 | 예시 |
| <h1>~<h6> | 제목 (숫자가 작을수록 중요) | <h1>제목</h1> |
| <p> | 문단 | <p>문단입니다</p> |
| <a> | 하이퍼링크 | 링크 |
| <img> | 이미지 | <img src="img.jpg" alt="이미지"> |
| <ul>, <li> | 리스트 (순서 없음) | <ul><li>아이템</li></ul> |
| <div> | 구역 (의미 없음) | <div>묶음</div> |
| <span> | 인라인 요소 묶음 | <span>강조</span> |
요소 (Element)
요소는 태그가 콘텐츠를 감싸면서 의미를 부여한 하나의 단위입니다. 기본적으로 열림 태그 + 콘텐츠 + 닫힘 태그로 구성되며, 이 전체 구조를 요소라고 부릅니다.
<p>나는 문단입니다.</p>
또한 콘텐츠가 필요 없는 단일 태그도 하나의 요소로 간주됩니다.
<input type="text">
요소의 중첩 (Elements Nesting)
HTML 요소는 또 다른 요소를 내부에 포함할 수 있습니다. 이를 중첩이라고 하며, 올바른 순서로 열고 닫는 것이 굉장히 중요합니다.
<p>문단 중 <strong>강조된 내용</strong>이 있습니다.</p>
- <strong> 요소는 <p> 요소 안에 중첩되어 있습니다.
- 중첩된 태그는 열린 순서의 역순으로 닫아야 합니다.
아무 태그나 막 중첩할 수 있을까?
HTML에서는 콘텐츠 카테고리에 따라, 어떤 요소 안에 어떤 태그를 사용할 수 있는지가 명확히 정의되어 있습니다.
예를 들면, 아래와 같이 <ul> 태그 안에는 반드시 <li> 태그만을 사용할 수 있습니다.
<ul>
<li>항목1</li>
<li>항목2</li>
</ul>
만약, 아래와 같이 코드를 작성한다면 HTML 문법 오류가 발생합니다.
<ul>
<p>문단</p> <!-- ❌ ul 안에는 p 불가 -->
</ul>
이번 글에서는 간단하게 이런게 있다는 것 정도만 인지해 주시고, 콘텐츠 카테고리와 관련된 내용은 따로 글을 작성하도록 하겠습니다.
💡HTML 콘텐츠 카테고리란?
HTML 요소는 단순히 나열만 하는 것이 아니라, 어떤 종류의 콘텐츠인지, 어디에 사용해야 하는지에 따라 정해진 카테고리로 분류됩니다. 의미 있고 문법적으로 올바른 HTML을 작성하기 위해서는 이 카테고리 구분을 정확히 이해하는 것이 매우 중요합니다.
- MDN 참고 링크
마무리 용어 요약
- 하이퍼텍스트: 다른 문서로 연결되는 텍스트
- 마크업: 텍스트에 의미/구조를 부여하는 표시
- 태그: 콘텐츠를 감싸는 마크업 구문
- 요소: 열림 태그 + 콘텐츠 + 닫힘 태그로 구성된 HTML의 기본 단위
- 단일 태그: 콘텐츠 없이 역할(출력 또는 기능)만 수행하는 태그이며, 이 또한 하나의 요소입니다.