[HTML] 개념 정리 1 :: HTML 기본 태그 이해

HTML 기본 태그 이해하기

HTML(HyperText Markup Language)은 웹페이지를 구성하는 기본적인 뼈대를 만드는 마크업 언어임. HTML 태그를 사용하여 웹페이지의 구조와 내용을 정의하고, 브라우저가 이를 읽어들여 화면에 표시함으로써 사용자와 상호작용할 수 있게 만들어줌.

---

HTML 구조

HTML 문서는 요소(Element)로 구성되며, 각 요소는 태그(Tag)를 이용해 정의함. 태그는 여는 태그와 닫는 태그로 이루어지며, 이 안에 콘텐츠를 작성함.

예시:

<p>이것은 문단입니다.</p>

• <p>: 여는 태그
• </p>: 닫는 태그
• 이것은 문단입니다.: 콘텐츠

---

마크업 언어란?

마크업 언어는 데이터를 태그로 감싸 구조화하거나 의미를 부여하는 데 사용됨. HTML은 웹페이지를 마크업하는 데 특화된 언어로, 다양한 태그를 활용하여 문서의 제목, 문단, 이미지, 링크 등을 정의함.

---

여는 태그와 닫는 태그

HTML 태그는 일반적으로 여는 태그와 닫는 태그로 구성됨. 여는 태그는 <태그이름> 형식이고, 닫는 태그는 </태그이름> 형식임. 콘텐츠는 여는 태그와 닫는 태그 사이에 위치함.

예시:

<h1>이것은 제목입니다.</h1>

• <h1>: 여는 태그
• </h1>: 닫는 태그
• 이것은 제목입니다.: 콘텐츠

중요한 점: 태그 이름은 대소문자를 구분하지 않지만, HTML5에서는 소문자를 사용하는 것이 권장됨.

---

독립 태그(Self-closing Tag)

여닫는 태그를 모두 사용하는 일반 태그와 달리, 독립 태그는 닫는 태그 없이도 사용할 수 있음. HTML5에서는 닫는 슬래시(/)를 생략해도 됨. 독립 태그는 보통 자체적으로 완결된 기능을 가지며, 콘텐츠를 포함하지 않음.

주요 독립 태그

1. <hr>: 수평선을 추가함.

   <hr>

2. <br>: 줄바꿈을 생성함.

   안녕하세요.<br>반갑습니다.

3. <img>: 이미지를 삽입함.

   <img src="example.jpg" alt="예시 이미지">

4. <meta>: 문서 정보를 정의함.

   <meta charset="UTF-8">

5. <input>: 사용자 입력 필드를 생성함.

   <input type="text" placeholder="이름을 입력하세요">

---

결론

HTML 태그는 웹페이지의 구조와 콘텐츠를 정의하는 중요한 역할을 함. 여는 태그와 닫는 태그를 통해 콘텐츠를 감싸거나, 독립 태그를 이용해 특정 기능을 구현할 수 있음. 이러한 기본 태그를 이해하고 적절히 사용하는 것이 웹 개발의 첫걸음이 될 것임.