HTML5 문서 기본 구조 간단 정리



HTML 형식의 문서를 작성하기 위해서는 기본적으로 HTML 문서의 기본 구조(뼈대) 를 갖춰야 합니다.

HTML 의 문서를 작성하기 위해 필수적인, 기본 구조에 대해서 간단히 정리해보는 시간을 가져보도록 합시다.





아래는 HTML문서의 기본 구조입니다.


HTML

<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML5 기본 형식 간단정리</title> </head> <body>    <p>안녕하세요!</p> </body> </html>


위와 같은 기본 구조에서 추가하고자 하는 태그들을 추가하고 CSS 스타일 까지 입히면서 점점 웹페이지의 비주얼이 완성됩니다.

그럼, 웹페이지의 기본이 되는 위의 태그들에 대해서 간단히 정리 해볼게요.



1.DTD 선언! <!doctype html>


먼저, 여러분의 문서가 HTML로 작성된 문서라는 것을 브라우저에게 알려주기 위해 DTD 선언을 해야합니다.

위와 같이 <!doctype html> 의 방식으로 사용하는 것은 HTML5의 방식인데, HTML4에서는 조금 복잡했는데 HTML5에 오면서 간단해 졌어요.




HTML4의 경우 모드마다 DTD 선언을 다르게 해줘야 했습니다.

아래 홈페이지에 가면 HTML 버전별 DTD 선언 방식을 볼 수 있는데, HTML4에서는 너무 길어서 맨날 찾아써야 해서 조금 귀찮았었는데 짧아져서 좋아요! HTML 버전별 DTD선언 보러가기


이 DTD모드를 지정하지 않을 경우에는 웹문서에서 이를 관용 모드(quirks mode)로 인식하게 되는데, 이렇게 인식될 경우 웹문서가 제작자의 의도와는 다르게 나올 수 있습니다. 또한, 이 관용모드는 오래된 브라우저 들과 호환성도 염두에 둔 모드이기 때문에 웹 표준도 고려되지 않습니다. 그러니까 꼭 선언해 줘야겠지요!




2.html태그 와 lang 속성 <html> </html>


html 태그는 doctype 선언 이후 html 문서의 시작과 끝을 알려줍니다.!

<head> 태그와 <body> 태그를 감싸는 태그입니다.


html 태그에는 lang 속성을 사용해 언어를 지정할 수 있습니다.

이 속성을 사용하지 않으면 구글의 언어별 검색에서 검색되지 않아요. 한글을 표현하고자 하는경우 lang="ko" 를 넣어주세요!

또한, 이 속성을 통해 화면 낭독기(리더기) 가 화면의 내용을 읽어 주는데, 이 속성이 지정되어있지 않으면 낭독기가 내가 문서에서 말하고자 하는 바를 표현하지 못할 수도 있습니다.


lang 속성과 스크린 리더기

lang 속성을 정확히 지정하지 않을 경우




3.head태그 <head> </head>


head 태그에는 웹 문서에서 사용하는 언어지정, 페이지 제목, 키워드, 제작자정보, 참조 스타일시트, 스크립트 참조 등 여러가지 웹문서에 대한 관련 정보들이 들어갑니다.

<body> 태그에 들어가는 친구들처럼 바로 눈으로 확인 할 수 있는 비주얼적인 아이들은 아니지만, 웹문서에 관한 중요한 정보들을 가지고 있는 태그입니다.


여기에는 다양한 메타 태그들이 들어가는데 대표적으로 문자셋 메타 태그와, 타이틀 태그에 대해서만 간략히 알아보겠습니다.




4.title태그 <title> </title>


먼저 <title> </title> 태그에 대해서 설명하자면, 정말 말그대로 페이지의 제목입니다.

브라우저에서 아래부분에 표시되는 내용



타이틀의 경우 사이트의 모든 페이지에 똑같이 넣는 경우가 있는데, 그럴 경우 화면 낭독기가 네이게이터를 읽어줄 때 사용자가 해당 페이지의 내용을 짐작하지 못해 웹 접근성 지침에 어긋납니다.

또한, 너무 긴 문장이나 기호 보다는 페이지 내용을 쉽게 짐작가능한 주요 단어를 넣는 것이 좋다고 합니다.




4.meta태그 charset 속성 <meta charset="utf-8">


charset 속성은 많은 meta태그의 속성 중 하나로 이 속성을 잘못 넣으면 문서의 한글이 다 깨지는 광경을 볼 수 있답니다.

그런의미에서 아주 중요한 태그입니다.! 


HTML4 에서는 

HTML

<meta http-equive="Content-Type" content="text/html;" charset="utf-8" />

이런 식으로 넣었었는데 이 부분도 HTML5 에서 간단해 진 부분 중 하나입니다.! 글자수가 줄었어요~~~~~♥


본론으로 돌아와서! 이 태그의 문자 셋은 주로 파일의 인코딩 방식과 같은 문자 셋으로 맞춰주어야해요!

예전에는 euc-kr 도 많이 보였었는데, 요즘은 웹에서는 대부분 다 utf-8로 사용하는 듯해요

(둘다 한글을 표현가능한 문자 셋인데, utf-8은 훨씬 더 많은 언어를 표현가능 하지만, euc-kr에 비해 리소스를 많이 잡아먹는다는 단점이 있습니다)


이 태그의 default charset 값은 utf-8 으로 이미 맞추어져있어, 메타 태그를 사용하지 않아도 한글이 깨지지 않지만 명시해 주는 것이 좋겠죠!? 파일의 인코딩 방식이 다를 수도 있고!




5.Body 태그 <body> </body>


이 태그도 <html> <head> 태그와 마찬가지로 여는 태그와 닫는 태그가 존재합니다.

앞으로 웹페이지 화면에 표시될 수많은 내용들을 모두 담아 낼 태그이기도 합니다.!!



오늘은 여기까지! 모두들 즐코하세욤 빠이!



+ Recent posts

티스토리 툴바