[HTML] 하이퍼 텍스트 마크업 언어란?

 HTML에 대해서 알아보고, 마크업 언어의 특징과 예시를 살펴보겠습니다.

 

[ Contents ]

 

 

1. HTML

HTML: 웹 페이지의 구조, 형태, 내용을 담당하는 마크업 언어

 Hyper Text Markup Language의 약자로, 본래에는 웹페이지를 서로 연결하는 '하이퍼 링크'에서 시작했습니다. 웹 초기에는 단순히 웹페이지들이 하이퍼 링크로 연결되어 있었을 뿐이죠. 웹이 발전하면서 표, 이미지, 동영상 등이 추가되었고 지금과 같이 다채로운 웹페이지가 탄생했습니다.

 HTML은 웹페이지의 구조와 내용을 담당하며, 주로 '뼈대'라는 표현을 많이 씁니다. 페이지 내 콘텐츠 요소를 적절한 위치에 HTML로 추가합니다.

 

 

 

2. 마크업 언어란?

마크업 언어(Markup language): <태그>를 이용해서 문서 및 데이터의 구조를 표현하는 언어

 HTML을 작성하면서 프로그래밍을 한다고 하면, 펄쩍펄쩍 뛰는 사람들이 있습니다. 왜냐하면 HTML은 프로그래밍 언어가 아니기 때문이죠. 단순히 태그 안에 원하는 내용을 추가하는 형식이기 때문에, 정말 간단하고 쉽습니다.

 

 

<h2>제목</h2>
<img src="이미지 링크">

 예를 들어 제목을 쓰고 싶다면 <제목> 태그 안에 제목을 쓰면 되고, 이미지를 넣고 싶다면 <이미지> 태그 안에 이미지 링크를 쓰면 됩니다. 단지 그러한 역할을 하는 태그만 알면 됩니다.

 HTML에서 주로 사용하는 태그의 종류는 '제목', '본문', '링크', '이미지', '비디오', '목록', '표' 정도로 굉장히 적습니다. 배울 양이 많지 않으니, 앞으로 차근차근 하나씩 태그를 살펴보겠습니다.

 

 

 

3. 웹페이지에서의 HTML

HTML

 F12를 눌러보세요. 그러면 브라우저의 개발자 도구가 뜹니다. 개발자 도구에서는 해당 페이지의 HTML을 볼 수 있습니다. 지금 우리가 보고 있는 페이지도 모두 HTML로 작성된 페이지죠.

 

 

 티스토리를 운영하시는 분들이라면, 에디터에서 HTML 모드로 들어가 보세요. 그러면, 보이는 글이 어떻게 HTML으로 변환되는지 알 수 있습니다. 

 물론 지금은 어색하실 수 있습니다. 하지만, 앞으로 HTML을 배우다 보면 금방 웹페이지 구조와 내용이 이해가 되실 거예요.