-
HTML이란?STUDY/HTML&CSS 2022. 2. 22. 14:59
- HTML이란, Hyper Text Markup Language이다.
[ 여기서 Hyper Text(하이퍼 텍스트)란? ]
순차적으로 텍스트를 읽는 접근을 뛰어넘어, 비순차적으로 텍스트에 접근하는 것을 말한다. 우리가 실제 종이로 된 책을 읽을 땐 앞 페이지부터 뒷 페이지까지 차례로 텍스트를 읽어나가는 게 기본이다. 그러나 위키 백과와 같은 웹사이트에서 글을 읽다가 목차를 클릭하면, 그 페이지 내의 다른 정보로 순식간에 이동이 된다. 이러한 것을 비순차적 접근이라 한다.
[ 여기서 Markup Language(마크업 언어)란? ]
태그 등을 이용해 문서나 데이터 구조를 표현하는 언어이다.
사람들이 읽기 쉽게 하기 위해서, 어딘가에 말 그대로 '표시(Mark)'를 하는 언어인 것이다.
어떠한 문서를 읽을 때 무조건 주루룩 나열되어 있기만 한다면 사람들이 읽기 어렵다.
이때 "어디가 제목인지, 어디가 내용인지, 어디를 강조해야 되는지" 등
문서를 구조적으로 표현하면 더욱 읽기 쉬운 문서가 될 것이다.
Github에서 자주 볼 수 있는 Markdown 역시 마크업 언어 중 하나이다.
간단한 규칙을 이용해, 읽기 쉬운 문서를 만들어주는 언어라고 이해하면 쉽다.
[ 결국 HTML이란? ]
문서를 구조적으로 표현해 컴퓨터와 개발자가 읽기 쉽게 작성된 언어라고 생각하면 된다.
HTML 속의 의미 있는 태그(Semantic tag)들은 개발자의 가독성을 높여주며, 웹 크롤러(웹상에서 데이터를 긁어 수집하는 로봇)가 개발자가 짠 코드의 구조를 파악할 수 있도록 해준다.
HTML에는 수많은 태그가 존재한다.
그 중에선 <head><body><a>처럼 의미가 있는 태그(Semantic tag) 뿐 아니라, <div>처럼 의미가 없는 태그(non-semantic tag)도 있다. 자주 쓰는 태그는 외워두는게 좋지만, 다 외우는 것은 비효율적이니 MDN을 적극 활용하는 것이 나을 것이다.
MDN: https://developer.mozilla.org/ko/docs/Web/HTML/Element
<!--non-semantic tags 이용--> <div id="main"> <div>Hello</div> </div> <!--semantic tags 이용--> <main> <h1>Hello</h1> </main>또한 웹 개발을 하며, 가독성과 웹 크롤링을 위해 semantic tags를 이용해 직관적으로 코드를 짜는 연습을 하는 것이 좋다.
'STUDY > HTML&CSS' 카테고리의 다른 글
HTML: 태그의 중요성, 스크린 리더 (0) 2022.03.03 HTML: DTD(Document Type Definition)란? (0) 2022.02.22