본문 바로가기

프론트엔드 입문 가이드/HTML 기초

[HTML 기초] 1. HTML이란?

반응형

1. HTML이란?

HTML은 웹 브라우저가 이해하는 문서를 작성하는 언어입니다.

한국인이 이해하는 문서를 작성하는 언어가 한국어이듯, 브라우저가 이해하는 언어를 HTML이라 하는 것입니다.

 

브라우저는 뭔데?

브라우저란 인터넷에 접속하기 위한 프로그램을 말하며,

크롬, 사파리, 오페라, 익스플로러, 파이어폭스, 엣지와 같은 것입니다. (익스플로어는..RIP..)

대표적인 웹 브라우저

 

우리가 HTML을 통해 브라우저가 이해하는 문서(=HTML 문서)를 작성하면,

브라우저는 HTML 문서를 보고 웹 페이지를 구성합니다(=우리에게 보여줍니다). 

 

즉, HTML을 알면 누구나 웹 페이지를 만들 수 있습니다! 

 

2. Hypertext Markup Language

이제 HTML의 커다란 의미는 알았습니다. 인터넷 접속할 때 필요한 프로그램을 위한 언어구나! 

하지만 뭔가 부족한 느낌이 드시는 분들을 위해 HTML 단어 자체의 의미를 살려 조금 더 자세히 알아보겠습니다.

 

HTML은 Hypertext Markup Language의 약어입니다.

HypertextMarkup Lanaguage 각각을 이해한 뒤, 합쳐서 전체 정의를 이해해봅시다. 

 

Hypertext

하이퍼텍스트는 문서와 문서 간의 연결을 의미하는 링크를 말합니다.

 

일반적으로 우리가 사용하는 하나의 웹 페이지에는 수많은 링크들이 연결되어 있습니다. 네이버만 생각해도 우리가 쓸 때 홈페이지에만 머물러 있지 않고 뉴스를 보거나, 메일함을 들어가거나, 검색을 하는 등의 행위를 통해 다른 페이지로 이동하며 사용하잖아요? 이런 웹 사이트의 특성을 담은 말이 Hypertext라고 보면 됩니다.

네이버 홈페이지

 

Markup Language

마크업 언어는 문서의 구조를 명시하는 언어를 말합니다.

일반적으로 사용하는 그냥 언어와 달리, "이거는 제목이고, 이거는 내용이야"라고 알려주며 문서를 작성하는 언어입니다.

 

일반적인 그냥 언어 vs. 마크업 언어

예를 들어, 그냥 언어는 왼쪽과 같이 생겼습니다. 워드나 한글을 작성할 때 혹은 읽을 때를 생각해보세요. 우리는 이게 제목과 목록, 내용으로 각각 의미가 다르다는 것을 본능적으로 식별합니다. 하지만, 브라우저 입장에서는 그냥 모두 같은 텍스트일 뿐이지요.

 

반면, 마크업 언어는 오른쪽과 같이 생겼습니다. < > 를 이용해 문서의 각 부분의 의미와 구조를 명시해 작성합니다. 브라우저한테 "<title> 안에 있는 텍스트는 제목이고, <list> 안에 있는 텍스트는 목록들이고, <content> 안에 있는 텍스트는 내용이야"라고 알려주는 것입니다. (참고로 여기서 < >를 태그라고 부릅니다. 앞으로 다양한 태그들에 대해 알아갈 것입니다)

 

웹 브라우저는 이렇게 마크업 언어로 작성된 문서를 보고 웹 페이지를 구성합니다. 

HTML 문서 -> 웹 브라우저 -> 우리가 보는 웹 페이지

 

즉, 태그를 통해 문서의 의미와 구조를 명시하는 언어를 Markup Language라고 합니다.

 

 

결론

Hypertext: 문서 간의 연결 (= 웹 사이트의 특성)

Markup Language: 문서 안의 콘텐츠의 의미와 구조를 명시하는 언어

 

Hypertext Markup Language

  • 웹 사이트의 특성을 고려해 작성하는 언어
  • 웹 브라우저가 이해하도록 콘텐츠의 의미와 구조를 명시해 문서를 작성하는 언어
  • 즉, 웹 브라우저가 이해하는 문서를 작성하는 언어!
반응형