HTML의 가장 기본적인 문서 구조와, 태그의 구성요소에 대해서 알아보겠습니다.
[ Contents ]
1. HTML 태그의 구성 요소
<태그 속성="속성값"> 콘텐츠 </태그>
HTML은 '태그' 안에 내용을 담습니다. 예를 들어 위에 쓰인 제목은 <h2> 1. HTML의 태그 구성 요소 </h2>로 쓸 수 있습니다. 태그의 종류는 크게 2가지로, '시작 태그만 있는 경우(empty, single-sided)'와 '시작 태그와 종료 태그가 모두 있는 경우(container, double-sided)'가 있습니다.
속성이 있는 태그는 '속성값'을 지정할 수 있습니다. 속성은 해당 태그에 필요한 추가적인 정보를 의미합니다. 예를 들어, 하이퍼링크 태그에는 '링크'가 필요하고, 이미지 태그에는 '이미지 링크'가 필요합니다.
태그와 속성값은 대소문자 구분이 없으며, 속성 값을 지정할 때 등호 사이에는 공백이 없어야 좋습니다. (웹 표준)
2. HTML 문서의 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>모든 웹페이지는 위와 같은 '기본 구조'를 갖습니다. 마치 프로그래밍에서 main() 함수와 같은 기본 틀입니다.
1) <!DOCTYPE html>
HTML5라는 걸 알려주는 태그입니다. 웹페이지를 출력하는 '브라우저'나 페이지를 크롤링하는 '봇'이 해당 태그를 보고, HTML5로 쓰인 페이지라는 걸 인식합니다.
2) <html>
<html>문서의 처음과 끝을 나타냅니다. .html 파일은 해당 태그 안에 웹페이지의 내용을 채웁니다. 프로그래밍에서 main() 함수의 { } 블록 기능과 비슷합니다.
3) <head>
웹페이지에 대한 '메타 정보'를 담는 공간으로, 웹 페이지에 내용이 노출되진 않습니다.
4) <meta charset="UTF-8">
웹페이지의 인코딩 정보를 나타냅니다. 기본적으로 "UTF-8"(유니코드)을 많이 씁니다.
5) <title>
웹페이지 탭에 뜨는 '페이지 제목'을 나타냅니다.
6) <body>
body는 웹페이지의 몸체입니다. body 태그 안에 쓰는 내용은 웹페이지에 그대로 반영됩니다. 우리는 앞으로 body 태그 안에 웹페이지의 내용을 작성하게 됩니다.
'Web' 카테고리의 다른 글
| [HTML] 시맨틱 태그, 웹페이지의 구조를 알려주는 주석 (0) | 2022.04.27 |
|---|---|
| [HTML] 하이퍼링크 태그 <a> (새 탭으로 열기, 페이지 내 이동) (0) | 2022.04.26 |
| [HTML] 띄어쓰기, 줄바꿈 하는 방법 (feat, pre태그 / 유니코드 특수문자 삽입) (0) | 2022.04.25 |
| [HTML] HTML의 기본 태그: 제목(h), 문단(p), 리스트(ol, ul, dl, li) (0) | 2022.04.24 |
| [HTML] 하이퍼 텍스트 마크업 언어란? (0) | 2022.04.23 |
댓글