[HTML] HTML 태그

1. HTML 소개

---

 
HTML(Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드이다. 
 
HTML은 일련의 요소(element)로 이루어져 있는데 이 요소는 태그(tag)라고도 부른다.
태그는 HTML 문서를 구성하는 기본 단위이기 때문에 중요하다.

 

 

2. 여는태그, 닫는태그, 컨텐츠, 요소(element)

---

다음과 같은 문장이 있다고 해보자.
 

요새 마라탕이 너무 맛있다.

 
만약 위의 문장을 하나의 독립적인 구문으로 만들고 싶다면 <p>태그를 이용하면 된다.
<p>태그를 사용한 문장은 하나의 문단 역할을 한다.
 
 

<p>요새 마라탕이 너무 맛있다.</p>

 
 
 
다음으로 <p>태그 요소들을 분석해보겠다.

<p>는 여는 태그(opening tag),
</p>는 닫는 태그(closing tag),
요새 마라탕이 너무 맛있다. 는 컨텐츠(content),
<p>요새 마라탕이 너무 맛있다.</p>는 요소(element)이다.
 
 
 
하나씩 살펴보겠다.
 
여는 태그(opening tag)는 요소가 시작되는 곳임을 나타낸다. 여는 태그는 <요소의 이름>으로 구성된다. 
 
닫는 태그(closing tag)는 요소의 끝을 나타낸다.여는 태그와 같은 모양이지만 반드시 요소의 이름 앞에 /를 적어주어야 한한다. 
 
컨텐츠(content)는 요소의 내용이다.
 
요소(element)는 여는태그, 닫는태그 그리고 컨텐츠로 이루어진다.

 

 

3. 중첩(nesting), <strong>태그

---

이제 마라탕을 강조해보겠다.

<p>요새 <strong>마라탕</strong>이 너무 맛있다.</p>

 
 
 
아래는 위의 코드를 실행시켰을 때의 결과물 이다.

 
이 예제를 통해 요소는 중첩(nesting)될 수도 있다는 것과 <strong>태그가 단어를 강조하는 용도로 쓰이는 것을 알게 되었다.
 

 

4. 잘못된 예제

---

아래는 잘못된 예제다.
 

<p>요새 <strong>마라탕이 너무 맛있다.</p></strong>

 
가장 먼저 <p>태그를 열었다. 그 다음으로 <strong>태그를 열었다. 따라서 <strong>태그를 먼저 닫고 <p>태그를 닫아주어야 한다.
 
만약 요소들이 적절히 열고 닫히지 않으면 우리가 의도한 것과 다른 결과물을 볼 수 있다.
 
 
 
 

---

아래 통계는 가장 많이 쓰이는 HTML elements들을 순서대로 나타낸 것이다. 오늘 공부한 <p>태그와 <strong>태그 이외에도 많은 태그들이 존재한다.
 

https://www.advancedwebranking.com/seo/html-study/

 
 
위의 태그들을 한번에 암기하기보다 공부하면서 알아가는 게 훨씬 효율적일 것 같다.