HTML 문서 기본 구조
| <!DOCTYPE html> <!--①--> <html lang="ko"> <!--②--> <head> <!--③--> <meta charset="UTF-8"> <!--④--> <title>Document</title> <!--⑤--> </head> <body> <!--⑥--> </body> </html> |
<!-- 주석내용 --> : 주석 처리를 사용할 떄는 <!-- --> 을 사용합니다. 주석은 소스에만 나타나고, 웹 브라우져 화면에는 나타나지 않습니다. 소스 내용을 설명하거나 특이점등을 기록하거나, 또는 유지보수시에 소스 내용을 쉽게 파악하기 위해 사용합니다.
① <!DOCTYPE html> 은 이 문서가 HTML 5 로 작성되었음을 의미합니다. HTML5문서의 명세를 따르려면 반드시 <!DOCTYPE html>을 HTML문서의 제일 첫 줄에 표기해야 합니다.
② <html> ~ </html> 태그는 html 웹문서의 시작과 끝을 의미합니다. 웹 브라우져는 이 문서를 <html> 로 시작하는 부분부터 </html> 까지 읽어서 문서를 분석한 후 화면에 디스플레이해줍니다.
“Visual studio code”에서 lang 속성값은 디폴트로 “en” 으로 되어 있으나, 이는 미국의 영어권 언어를 의미하므로 한국을 의미하는 “ko”로 바꾸어 줍니다. 참고로 일본은 “ja”입니다. lang속성은 검색엔진이 어느 언어로 되어 있는지를 알기 위해 시용되나, 생략도 가능합니다.
③ <head> ~ </head> 는 웹 브라우져에 표시되지 않는 영역입니다만, meta 정보나 tittle 그리고 css 등의 링크 정보등이 포함됩니다. meta 정보는 데이타에 대한 데이터를 의미합니다.
④ meta 정보는 문자세트 정보, 해당문서의 키워드 정보, 작성자 정보등 해당문서에 대한 정보등을 담고 있습니다.
<meta charset=”UTF-8”>
: 문자세트를 UTF-8 로 지정합니다.
<meta name=”author” content=”nogadax”>
: 저자에 대한 정보를 제공합니다.
<meta name=”keywords” content=”HTML 문서 구조, meta tag”>
: 검색엔진에 의해 검색될 키워드를 정의합니다.
<meta name=”description” content=”HTML. 문서 기본 구조”>
: 웹 페이지에 대한 설명을 제공합니다.
<meta name=”Filename” content=”index.html”>
: 문서 파일 네임
<meta name=”robots” content=”ALL”>
: 모든 검색 로봇의 검색 허용
⑤ title는 웹페이지의 제목을 나타내는 태그로서 웹 페이지의 본문에는 나타나지 않으나 브라우저의 탭에는 나타난다. 주로 즐겨찾기 등록시 즐겨찾기 제목으로 지정되며 검색엔진에서는 검색결과 문서의 제목으로 쓰여진다. 반드시 웹문서에 하나만 존재해야 한다.
⑥ <body> ~ <body> 에는 웹 브라우져 화면에 나타나는 내용들이 들어갑니다. 대부분의 태그들이 <body> 태그내에 들어갑니다.
'HTML' 카테고리의 다른 글
| b 태그와 strong 태그 (0) | 2022.03.02 |
|---|---|
| i, em, cite 태그 (0) | 2022.03.02 |
| <p>, <hr>, <br> 태그 (0) | 2022.02.13 |
| Hn(h1~h6) 으로 제목쓰기 (0) | 2022.02.13 |
| 시맨틱 태그 (0) | 2021.12.13 |