HTML이란?

HTML이란 웹 문서를 만드는 언어로, 웹 브라우저에 출력되는 문서 작성을 위해 사용하는 표준화된 마크업 언어를 의미한다.

HTML 구조 파악하기

HTML 문서는 일반적으로 다음과 같은 구조로 구성된다.

<!DOCYTYPE HTML>
<html>
<head>
<title>HTML 기본구조</title>
<meta charset="UTF-8">
</head>
<body>
    HTML 5 구조를 공부합시다.
</body>
</html>

<!DOCTYPE HTML> : HTML5를 사용함을 브라우저에 선언하는 역할
<html> : 전체 html 문서를 감싸는 태그로, 웹 문서의 시작과 끝을 나타냄.
<head> : html 문서에 대한 정보를 나타내는 부분으로, 웹 문서를 실행/해석하기 위해 필요한 정보들을 브라우저에 알려주는 역할을 한다.
<title> : head 안에 들어가는 태그로 제목 표시 줄의 내용을 나타냄.
- 참고로 제목 표시 줄은 이 부분을 의미한다.
<meta> : 문서에 대한 설명을 표시하며, 사람에게는 보이지 않고 브라우저만 읽을 수 있음.
- charset="utf-8" 속성은 브라우저에게 한글 인코딩을 UTF-8로 설정하라고 지시해 한글이 깨지지 않도록 함.
<body> : 실제로 웹 브라우저 화면에 나타나는 내용

웹 문서의 구조를 만드는 시맨틱 태그에 대해 알아보자 !

시맨틱 태그란 이름에 의미를 가지는 태그를 의미한다. 이전에는 아래 그림의 왼쪽과 같이 문서 각 영역에 의미를 부여하지 않고, 하나의 태그만으로 모든 부분을 표현했다. 그러나, HTML5부터는 웹 문서의 각 영역에 의미를 부여해 태그만으로 각 영역의 의미를 파악할 수 있다.

이렇게 하면 문서 구조가 명확히 구분되어 PC, 모바일 등 다양한 화면에서 웹 문서 표현이 가능하고, 검색 엔진이나 화면 낭독기도 각 영역의 성격을 인지할 수 있다.

📖 학습 목표

HTML이란?

HTML 구조 파악하기

웹 문서의 구조를 만드는 시맨틱 태그에 대해 알아보자 !

① <header> 태그 : 웹 페이지의 머리글을 담는 태그

① `<header>` 태그 : 웹 페이지의 머리글을 담는 태그