HTML이란?
HTML이란 Hyper Text Markup Language의 약자로 HyperText(웹페이지에서 다른 페이지로 이동할 수 있도록 하는 것)기능을 가진 문서를 만드는 언어이다. 다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹페이지를 위한 마크업 언어라고 할 수 있다.
웹 페이지(web page)는 월드 와이드 웹 상에 있는 마크업 문서를 말한다. HTML은
.htm,.html확장자를 가진다. 이 html 문서는 단순히 텍스트 파일에 불과하고 웹 브라우저가 해석을 해서 구조를 통해 화면을 렌더링 해주게 되고 사용자는 View라고 하는 스크린을 통해 접하게 된다.
월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
HTML의 요소
요소를 설명하기에 앞서 HTML문서는 작성하려면 반드시 문서타입이라는 것이 필요하다. 이 문서타입은 DTD(DOCTYPE or Document Type Definition)라고 하며, DTD는 반드시 문서의 최상단에 위치해야 한다. 이러한 문서형 정의로 HTML5, HTML4, XHTML 세 가지 유형의 문서형이 존재하며 각 유형에 따라 마크업 문서의 요소와 속성(attribute)등을 처리하는 기준이 되고 이것은 또한 유효성 검사에 이용된다.
문서형(DTD)정의를 생략하는 경우 웹 브라우저가 표준모드가 아니라 비표준모드(Quirks Mode)로 렌더링되어 크로스 브라우징에 어려움을 겪을 수 있다.
아래는 HTML5 문서의 기본 구조이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>HTML은 웹 브라우저에 표시되는 글, 이미지 등의 다양한 콘텐츠를 표시하기 위해 마크업을 사용한다. HTML 마크업은 <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video> 처럼, 수많은 요소를 사용한다.
HTML의 요소는 문서의 다른 텍스트와 태그로 구분한다. 태그는 < 태그 이름 >으로 이루어 진다. 대부분의 태그는 여는 태그와 닫는 태그가 필요하다. 닫는 태그는 여는 태그의 태그 이름 앞에 /를 추가해주면 된다. </p>처럼 말이다. 여는 태그와 닫는 태그가 필요한 이유는 콘텐츠를 감싸기 위함인데, 닫는 태그가 없는 요소도 존재한다. ex) <meta charset="UTF-8">
이제 위의 HTML5 문서의 기본 구조의 요소에 대해 간단히 설명해보겠다.
-
<html lang="en">: html 요소는 루트 요소라고도 하는데 모든 다른 요소는 html 요소의 후손이어야 한다. 여기서lang="en"은 html 요소의 속성인데 한국형 웹 콘텐츠 접근성 지침(KWCAG) 2.1에는 웹페이지의 head 요소 안에 페이지의 기본 언어 선언을 규정하고 있다. 왜 반드시 명시해줘야 하냐면, 화면 낭독 프로그램 (스크린 리더) 이 언어를 인식하여 자동으로 음성을 변환하거나, 해당 언어에 적합한 발음을 제공할 수 있도록 하기 때문이다. 즉, 시각 장애인들을 위한 속성이라고 보면 된다. -
<head>: head 요소는 기계가 식별할 수 있는 문서 정보(메타데이터)를 담는다. 정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있다. -
<meta>: meta 요소는<base>,<link>,<script>,<style>,<title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타낸다. 여기서charset속성은 어떻게 인코딩을 할 것인지 나타내주는 속성이고,name="viewport"속성은 모바일에서 접속 시 모바일크기에 맞춘 화면을 렌더링하는 속성이다. -
<title>: title 요소는 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다. -
<body>: HTML 문서의 내용을 나타낸다. 한 문서에 하나의<body>요소만 존재할 수 있다.
