HTML의 정의와 구조

728x90

HTML(HyperText Markup Language)이란

HTML은 간단히 말하면 웹 문서를 만드는 언어라고 할 수 있다.

각 단어를 풀어서 해석해보자면

하이퍼텍스트(HyperText) : 문서를 서로 연결해주는 링크.
마크업(Markup) : 표시한다.
랭귀지(Language) : 언어

즉, 웹 브라우저에 내용을 보여 주는 텍스트, 이미지, 영상 등의 위치를 언어로 표시하는 것을 의미한다.

웹 문서는 내용을 작성하는 프로그램(HTML, CSS, JS 코드를 작성하고 편집하는 에디터. VSCode 등)과 그 내용을 확인하는 프로그램(웹 브라우저. Chrome, Firefox, Edge 등)이 다르다.

예를 들어, 웹 문서에서 표를 만들 때 웹 브라우저에서 바로 표를 삽입할 수 없다. VS Code 같은 웹 에디터에서 마크업 형식으로 표를 작성해야만 웹 브라우저는 각 제목과 텍스트, 표를 인식할 수 있다. 이때, 웹 브라우저가 제목, 텍스트, 표를 인식할 수 있도록 각각에 꼬리표를 붙여야 하는데, 이 꼬리표를 태그(Tag)라고 한다.

HTML의 기본 기능은 웹 브라우저에 보여 줄 내용에 마크업하고 문서끼리 링크하는 것이다. 글자를 보기 좋게 꾸미거나 문서의 배치를 다양하게 바꾸는 것은 둘째마당에서 공부할 스타일 시트의 기능이다.

HTML의 구조

<!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>

1. <DOCTYPE html> : 현재 문서가 HTML 언어로 작성한 웹 문서라는 의미

2. <html></html> : 웹 문서의 시작과 끝을 나타내는 태그. 웹 브라우저가 <html> 태그를 만나면 </html> 까지 코드를 읽어 화면에 표시한다.

3. <head></head> : 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분

4. <body></body> : 실제로 웹 브라우저 화면에 나타나는 내용

<DOCTYPE html> 태그 : 웹 문서의 유형을 지정

웹 문서의 첫 부분은 문서 유형(Document Type)을 지정하는 <!DOCTYPE html> 태그로 시작한다. 웹 브라우저에게 현재 문서가 HTML 문서라고 알려 주는 것이다.

<html> 태그 : 웹 문서의 시작을 알림

<html> 태그로 HTML 파일의 시작을 표시하고, </html> 태그로 HTML 파일의 끝을 표시한다. </html> 태그 뒤로는 아무 내용도 없어야 한다.

<html> 태그에서 lang 속성으로 문서에서 사용할 언어를 지정할 수 있다. <html> 태그에서 사용하는 언어를 표시하는 이유는 검색 사이트에서 특정 언어로 제한해 검색할 때 필요하기 때문이다. 예를 들어, 검색 결과 중 "한국어로 된 문서"

로 범위를 제한할 경우 <html lang="ko">인 문서를 우선 검색한다.

<head> 태그 : 웹 브라우저에 문서 정보를 알림

<head></head> 태그 사이에 작성한 내용은 웹 브라우저 화면에는 보이지 않는다. 웹 브라우저가 알아야 할 정보를 입력하는 곳이기 때문이다. 또한 문서에서 사용할 스타일 시트 파일도 이곳에서 연결해 준다.

문자 세트를 비록해 문서 정보가 들어 있는 <meta> 태그

메타 정보란 '데이터에 관한 데이터'를 의미한다.

<meta charset="UTF-8">

그 밖에 웹 사이트의 키워드나 간단한 설명, 제작자 등의 정보를 지정할 때에도 <meta> 태그를 사용할 수 있다.

문서 제목을 나타내는 <title> 태그

<title></title> 사이의 웹 문서의 제목을 입력하면 웹 브라우저의 제목 표시줄에 표시된다.

<body> 태그 : 웹 브라우저의 내용을 표시

<body></body> 태그 사이에 실제 웹 브라우저에 표시할 내용을 입력한다.