HTML은 웹페이지의 뼈대를 구성하는 언어입니다. 웹사이트를 만들기 위해 첫 번째로 작성하게 되는 것이 바로 HTML 파일이며, 그 구조를 이해하는 것이 웹 개발의 출발점입니다. 이 글에서는 HTML 파일의 가장 기본적인 구조와 각 태그의 역할을 이미지와 함께 쉽게 설명합니다.
| 번호 | 태그 이름 | 간략한 설명 |
|---|---|---|
| 1 | <!DOCTYPE html> | 문서가 HTML5로 작성되었음을 선언 (표준 모드로 해석됨) |
| 2 | <html lang="ko"> | HTML 문서의 시작을 나타내며, 언어를 한국어로 설정 |
| 3 | <head>...</head> | 메타데이터와 설정을 담는 영역 (브라우저에 표시되지 않음) |
| 4 | <meta charset="UTF-8"> | 문자 인코딩을 UTF-8로 설정 (한글 포함 다양한 문자 지원) |
| 5 | <meta name="viewport" ...> | 모바일 화면 대응을 위한 반응형 설정 |
| 6 | <title>...</title> | 웹페이지의 제목을 지정 (탭 이름이나 즐겨찾기에 표시됨) |
| 7 | <body>...</body> | 사용자에게 실제로 보이는 콘텐츠를 포함하는 영역 |
<!DOCTYPE html>
이 선언은 이 문서가 HTML5 문서라는 것을 웹브라우저에 알려주고 표준 모드로 해석되도록 선언을 하는 역할을 합니다.
이러한 선언이 존재하는 이유는 예전에 HTML 4.01, XHTML 등 HTML도 다양한 문서 유형으로 존재하고 발전해왔습니다. 하지만 결국 HTML5로 통일 되었고, 그 명령을 선언하는 것이 <!DOCTYPE>입니다. 이 선언은 대소문자 구별이 없으나, 대문자로 표현하는 것이 일반적입니다.
이러한 선언이 존재하는 이유는 예전에 HTML 4.01, XHTML 등 HTML도 다양한 문서 유형으로 존재하고 발전해왔습니다. 하지만 결국 HTML5로 통일 되었고, 그 명령을 선언하는 것이 <!DOCTYPE>입니다. 이 선언은 대소문자 구별이 없으나, 대문자로 표현하는 것이 일반적입니다.
<html lang="ko"> ... </html>
HTML 문서의 시작과 끝을 나타내며 문서의 가장 바깥쪽을 감싸는 루트 요소(root element)이며 HTML 문서 내 모든 코드의 부모 요소입니다.
그리고 같이 사용되는 속성인 lang="ko"는 언어를 기본적으로 한국어로 설정한다는 의미이고, 웹브라우저, 검색엔진, 음성 낭독기 등에서 콘텐츠를 이해하고 처리하는데 도움을 주게 됩니다. 특히 시각장애인이 스크린 리더를 통해 이 페이지를 읽을 경우에 한국어로 읽어지도록 언어 환경이 자동 설정되는 기능을 하게 됩니다. 더불어 웹페이지를 다국어 페이지로 만들 경우에 lang 속성을 언어마다 다르게 설정하므로써 웹의 접근성을 높일 수 있습니다.
그리고 같이 사용되는 속성인 lang="ko"는 언어를 기본적으로 한국어로 설정한다는 의미이고, 웹브라우저, 검색엔진, 음성 낭독기 등에서 콘텐츠를 이해하고 처리하는데 도움을 주게 됩니다. 특히 시각장애인이 스크린 리더를 통해 이 페이지를 읽을 경우에 한국어로 읽어지도록 언어 환경이 자동 설정되는 기능을 하게 됩니다. 더불어 웹페이지를 다국어 페이지로 만들 경우에 lang 속성을 언어마다 다르게 설정하므로써 웹의 접근성을 높일 수 있습니다.
<head> ... </head>
문서의 정보를 설정하는 영역입니다. 메타데이터를 정의하는 곳인데 이는 사용자가 보는 화면에는 직접 보이지는 않지만 중요한 설정들이 포함됩니다.
예를 들어 기본 정보, 설정, 외부 자원 연결을 하는 데 사용이 됩니다. 상세하게는 문자 인코딩 설정, 반응형 디자인 설정, 웹페이지 제목 설정, 외부 Style Sheet의 연결, 외부 Javascript 파일 연결, 같은 문서에 포함되는 CSS의 연결 등에 사용됩니다.
<head> </head> 안의 내용은 브라우저의 검색 결과, SNS 공유할 때 보여지는 정보 등에도 영향이 있고, SEO와 같은검색엔진 최적화 측면에서도 매우 중요한 역할을 합니다. 일종의 뇌와 같은 부분으로 이해하면 좋겠습니다.
예를 들어 기본 정보, 설정, 외부 자원 연결을 하는 데 사용이 됩니다. 상세하게는 문자 인코딩 설정, 반응형 디자인 설정, 웹페이지 제목 설정, 외부 Style Sheet의 연결, 외부 Javascript 파일 연결, 같은 문서에 포함되는 CSS의 연결 등에 사용됩니다.
<head> </head> 안의 내용은 브라우저의 검색 결과, SNS 공유할 때 보여지는 정보 등에도 영향이 있고, SEO와 같은검색엔진 최적화 측면에서도 매우 중요한 역할을 합니다. 일종의 뇌와 같은 부분으로 이해하면 좋겠습니다.
<meta charset="UTP-8">
인코딩하는 방식을 UTF-8로 설정하여 한글을 포함한 다양한 문자를 정상적으로 표시할 수 있게 해줍니다.
이 선언이 포함되지 않는 경우에는 글자가 깨지거나 나타나지 않는 현상이 나타날 수 있습니다. 특히 가장 중요한 것은 이 선언이 한글을 정상적으로 출력하는 데 있어서 필수적이라는 것입니다. 예전에는 EUC-KR, ISO-8589-1 등의 다른 인코딩 방식도 사용되었지만 현재는 UTF-8로 전 세계적으로 통합하여 사용하는 추세입니다.
이 선언이 포함되지 않는 경우에는 글자가 깨지거나 나타나지 않는 현상이 나타날 수 있습니다. 특히 가장 중요한 것은 이 선언이 한글을 정상적으로 출력하는 데 있어서 필수적이라는 것입니다. 예전에는 EUC-KR, ISO-8589-1 등의 다른 인코딩 방식도 사용되었지만 현재는 UTF-8로 전 세계적으로 통합하여 사용하는 추세입니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
컴퓨터와 같은 PC(Personal Computer) 뿐만 아니라 모바일 기기에서도 웹페이지가 해당 기기의 너비에 맞게 보이도록 설정하는 선언 입니다.
content="width=device-width 라는 선언은 기기 화면의 너비에 맞게 표시하게 해주는 선언이며, initial-scale=1.0 라는 선언은 기본 확대/축소 비율을 1로 설정하는 선언입니다. 이 선언이 없다면 반응형 웹 디자인(responsive web design) 구현할 수 없습니다. 기기가 다양하고 화면의 크기가 다양한 요즘 시대에는 이 코드가 정말 필수적인 코드라고 할 수 있겠습니다.
content="width=device-width 라는 선언은 기기 화면의 너비에 맞게 표시하게 해주는 선언이며, initial-scale=1.0 라는 선언은 기본 확대/축소 비율을 1로 설정하는 선언입니다. 이 선언이 없다면 반응형 웹 디자인(responsive web design) 구현할 수 없습니다. 기기가 다양하고 화면의 크기가 다양한 요즘 시대에는 이 코드가 정말 필수적인 코드라고 할 수 있겠습니다.
<title> ... </title>
웹브라우저 탭 이름이나 즐겨찾기 제목에 표시되는 웹페이지의 제목을 설정하는 부분입니다.
이 안의 텍스트는 사용자가 현재 어떤 페이지를 보고 있는지 식별하는 역할을 하며, 검색엔진 최적화(SEO)에서도 중요한 요소로 작용합니다. 주의할 점으로는 <title></title>태그는 반드시 <head>와 </head> 사이에(안에) 위치해야 합니다.
이 안의 텍스트는 사용자가 현재 어떤 페이지를 보고 있는지 식별하는 역할을 하며, 검색엔진 최적화(SEO)에서도 중요한 요소로 작용합니다. 주의할 점으로는 <title></title>태그는 반드시 <head>와 </head> 사이에(안에) 위치해야 합니다.
<body> ... </body>
사용자에게 실제로 보이는 콘텐츠를 담는 영역으로 본문의 내용, 이미지, 버튼, 링크 등이 보여지는 화면 입니다.
실제로 우리가 웹페이지를 볼 때 보여지는 화면이 이 <body>와 </body> 사에 작성되어진 것을 보는 것이며 이곳이 정보의 주요한 핵심 위치라고 할 수 있습니다. 그래서 이 부분에 각종 디자인이 부여되고 각종 콘텐츠와 글들이 기록됩니다. 더불어 CSS를 통해서 이 부분에 작성되고 보여지는 내용이나 디자인을 변경하는 것이 가능합니다.
실제로 우리가 웹페이지를 볼 때 보여지는 화면이 이 <body>와 </body> 사에 작성되어진 것을 보는 것이며 이곳이 정보의 주요한 핵심 위치라고 할 수 있습니다. 그래서 이 부분에 각종 디자인이 부여되고 각종 콘텐츠와 글들이 기록됩니다. 더불어 CSS를 통해서 이 부분에 작성되고 보여지는 내용이나 디자인을 변경하는 것이 가능합니다.
마무리
<!DOCTYPE html>
<html lang=”ko”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title></title>
</head>
<body>
</body>
</html>
이 글에서 설명 드린 코드는 위 코드이며 복사하여 Visual Studio Code에서 사용할 수 있습니다. 물론, CSS 설정이나 header, main, footer 등의 분할이나 그 밖에 기타 요소들이 포함되는 기본 HTML 코드가 있을 것입니다.
하지만 이 글에서는 HTML 파일을 처음 만들 때 꼭 알아야 할 기본 태그와 구조를 이미지와 함께 살펴보았습니다. 왜냐하면 처음 사용자 분들이나 초보자 분들을 위해서 작성된 글인만큼 가장 기본적인 태그의 역할을 이해할 수 있도록 가장 기본적인 태그를 위주로 설명을 하였습니다.
각 태그의 역할을 정확히 이해하면, HTML 작성은 생각보다 훨씬 쉽고 체계적으로 느껴질 것입니다. 다음 단계에서는 body 내부에 들어가는 요소들을 소개하는 글을 통해서 이 글을 통해 여러분이 하나씩 실습해보는 좋은 연습이 될 수 있도록 할 예정입니다.
