[HTML+CSS] HTML 기본 구조

2020. 1. 17. 11:09

안녕하세요, 여행벌입니다.

오늘은 HTML 문서의 기본 구조에 대해서 알아보겠습니다.

HTML 기본 구조

HTML 문서는 일반 문서와 달리 정해진 형식에 맞추어 내용을 입력해야 합니다. 웹 문서(HTML 문서)는 아무리 길더라도 <!doctype>, <html>, <head>, <body> 네 가지 태그를 이용해 문서의 시작과 끝을 표시합니다.

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

위와 같이 웹 문서는 기본적인 구조를 가집니다. 하나하나 어떤 의미인지 살펴보도록 하겠습니다.

<!doctype>

문서 유형을 지정하는 선언문으로 <html> 태그보다 먼저 사용해야 합니다. 이때 지정하는 문서 유형이란 웹 브라우저에게 '이제부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라.' 라고 알려주는 것입니다. 과거 HTML4에서는 문서 유형이 여러 가지여서 문서 유형을 지정하는 소스가 길었습니다. 하지만 HTML5부터는 단 한줄로 문서 유형을 선언하면 됩니다.

<html>

문서 유형을 선언한 후 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그가 <html> 태그입니다. <html> 태그는 웹 문서가 시작된다는 뜻이고, </html> 태그는 웹 문서가 끝났다는 뜻입니다. <html> 태그에서는 lang이라는 속성을 사용해 문서에서 사용할 언어를 지정할 수 있습니다. 한국형 웹 콘텐츠 접근성 지침에 의해 웹 페이지의 기본 언어 선언을 규정해야합니다. 그래야 화면 낭독기에서 웹 문서를 소리 내어 읽어줄 때 해당 언어에 맞추어 발음이나 억양, 목소리 등을 다르게 해서 들려줄 수 있습니다. 또한, 검색 사이트에서 '한국어로 된 문서' 로 범위를 제한해 검색할 경우, <html lang="ko"> 라고 된 문서를 우선 검색합니다.

<head>

웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 <head> 부분에 입력합니다. 문서에서 사용할 외부 파일들도 이곳에서 링크합니다.

<title>

<head> 태그 안에서 가장 중요한 태그는 <title> 태그입니다. <title> 태그에서 지정하는 내용은 거의 모든 웹 브라우저의 제목 표시줄에 표시되고 해당 페이지를 방문하는 방문자나 검색 엔진은 제목 표시줄의 제목을 보고 페이지 전체의 내용을 추측할 수 있습니다.

<meta>

<meat> 태그는 화면에 글자를 표시하는 문자 인코딩 방법을 비롯해 웹 문서 키워드 등을 지정할 수 있습니다. <meta> 태그에서 가장 중요한 부분은 문자 인코딩을 지정하는 것입니다. 웹 서버는 영어를 기본으로 하기 때문에 웹 문서에서 한글을 표시하려면 '문자 인코딩'을 지정해줘야 합니다. HTML5에서는 한글과 영문을 비롯해 모든 언어를 표시할 수 있는 'utf-8' 방식을 사용합니다. 또한 <meta> 태그를 이용해 문서에 대한 간단한 설명을 지정할 수 있는데 이렇게 지정한 짧은 설명은 검색 결과에 사이트 설명으로 표시됩니다.

<meta name="description" content="여기에 사이트에 대한 짧은 설명을 입력합니다">

<body>

<body> 태그에는 실제 브라우저에 표시될 내용을 입력합니다.

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 리스트를 만들어 주는 <ul> <ol> <li> <dl> <dt> <dd> 태그 (0)	2020.01.17
[HTML+CSS] 텍스트 관련 <span> <abbr> <cite> <small> <sub> <sup> <s> <u> 태그 (0)	2020.01.17
[HTML+CSS] 텍스트 인라인 레벨 <strong> <b> <em> <i> <q> <mark> 태그 (0)	2020.01.17
[HTML+CSS] 텍스트 블록 레벨 <h> <p> <br> <hr> <blockquote> <pre> 태그 (0)	2020.01.17
[HTML+CSS] HTML이란. (1)	2020.01.17

굳건하게