예시용 코드
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>뼈대가 되는 필수 기본 태그들</title>
</head>
<body>
</body>
</html><!DOCTYPE html>
개념
1. HTML 문서에서 <html> 태그를 열기 전에 가장 먼저 선언되어야 하는 요소
※ HTML 태그에 포함되지 않음
2. SGML / XML 기반의 문서가 특정 DOCTYPE의 형식을 따른다는 것을 지정해주는 것으로, 문서 형식 선언( = DTD, Document Type Declaration )을 한다고 함.
→ HTML5부터는 SGML을 기반으로 하지 않기 떄문에 DTD를 참조할 필요가 없으나, 웹 브라우저들과의 호환을 위해 최소한의 형태만을 갖추고 있음.
※ SGML : 표준 마크업 언어 규약이란 뜻으로, 국제 표준으로 정한 마크업 언어( = Standard Generalized Markup Language )
※ 마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어
주의점
- 대소문자를 구분하지 않습니다.
- HTML 4.01와 같은 HTML5 이하의 버전에선, SGML을 기반으로 하기 때문에 DTD를 참조해야 합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
참고 링크
<html lang="ko">
개념
1. 페이지 전체의 컨텐츠를 감싸며, 루트(root) 요소라고도 합니다.
2. lang="ko" 는 해당 문서의 언어를 명시해주는 것으로 생략 가능하나, 웹 접근성을 위해 사용하는 것이 권장됨.
예시
1 ) 스크린 리더기가 lang의 언어를 참조하여, 음성으로 낭독
2 ) 검색 엔진이 lang의 언어를 참조하여 데이터를 크롤링
3. xmlns 속성을 이용하여, 다양한 형식의 태그를 충돌 없이 사용가능
→ xmlns는 필수적인 속성이나, 기본값으로 <html xmlns="http://www.w3.org/1999/xhtml">이 삽입 되어 있어 생략이 가능
→ <html xmlns:th="http://www.thymeleaf.org">와 같이 입력하는 것으로, 해당 링크에서 태그들을 불러와 <th:block>같은 외부 태그 사용 가능
주의점
- lang 속성은 html 태그 내부가 아닌 전역에 사용이 가능합니다. (body, div 태그 등에 사용 가능하다는 뜻)
- xmlns 속성은, XHTML 문서에서만 사용이 가능하기 때문에 HTML5 이상의 버전부터 사용이 가능합니다.
참고 링크
<head>
개념
1. 해당 페이지에 대한 정보(=메타데이터)를 내부에 포함하는 태그로, 페이지에 직접적으로 표시되지 않음.
2. 내부에 들어가는 태그의 종류로는 title / style / link / meta / script ( + base / noscript ) 가 있음.
※ <base> : href와 같은 속성을 이용하여 링크를 삽입할 때, 특정 주소값을 자동으로 삽입해줄 때 사용
※ <noscript> : 클라이언트 사이드에서 스크립트가 지원되지 않거나 작동하지 않을 때, 태그 내부의 내용이 노출 됨
주의점
- <noscript> 태그는 body 내부에서도 사용 가능
참고 링크
<body>
개념
1. 문서에 직접적으로 노출되는 모든 컨텐츠를 포함하는 태그.
주의점
- <body>태그는 한 HTML 문서 내에서, 하나만 존재 가능합니다.
- HTML5 버전부터는, body 태그 내에 alink / background / bgcolor / link / text / vlink 와 같은 속성이 지원되지 않음.
→ 태그 내부에 style 속성을 이용하여 간접적으로 지정하는 것은 가능.
참고 링크
<meta charset="utf-8">
개념
1. head 태그 내부의 다른 태그들이 나타낼 수 없는 메타데이터를 대신 제공할 떄 사용
2. 사용되는 속성으로는 http-equiv / content / name / charset 가 있음
※ http-equiv : response 헤더와 함께 웹 브라우저에 전송되었을 떄, 해당 정보에 대한 content 값을 전달하기 위한 HTTP 헤더 제공
※ name : 특정 meta 정보들에 대한 이름을 지정 할 수 있으며, 지정하지 않으면 'http-equiv'와 같은 기능을 함
※ content : http-equiv나 name에 지정된 정보에 대한 값을 전달
※ charset : HTML5부터 간편화를 위해 추가된 속성으로, 해당 문서의 문자 인코딩 방법을 지정
3. <meta> 태그를 통해, 문서의 세부 정보 및 검색 엔진과 관련된 여러 기능을 삽입 할 수 있음
참고 링크
<title>
개념
1. 해당 문서의 제목을 지정할 때 사용되어, 브라우저의 탭에 표시되는 이름이나 북마크명의 디폴트 값으로 사용.
주의점
- 검색 엔진에 가장 크게 영향을 끼치는 요소로써 중요 키워드를 삽입하여 상세하게 적는 것이 중요.
- title 태그가 없는 문서는 브라우저는 HTML 문서로 인식하지 않음.
- 두 개 이상 지정 할 수 없음.
참고 링크
<link>
개념
1. 외부 리소스와 연결할 떄 사용하는 태그로써, css 스타일 시트 / 파비콘 등을 지정할 때 주로 사용.
2. 보편적으로 사용하는 속성 외에도 다양한 속성이 많아, 잘 사용하면 유연한 웹 페이지를 만드는 데 많은 도움이 됨
주의점
- 태그 내부에 내용을 삽입할 수 없으며, 속성만을 가지고 있음
참고 링크
<script>
개념
1. 자바스크립트와 같이 클라이언트 측에서 사용되는 스크립트를 삽입할 때 사용
2. src 속성을 이용하여 외부의 스크립트 내용을 참조할 수 있음.
주의점
- src 속성이 이용된 <script>태그의 내부에는, 스크립트 코드가 삽입되면 안 됨.
- HTML5버전부터는 type 속성을 명시할 필요가 없으나, 그 이전 버전에서는 필수적으로 명시해줘야 함.
- body 태그 내부에서도 사용 가능.
- 페이지를 로딩할 때 영향을 많이 끼치므로, 가능하면 body의 최하단에 삽입하는 것이 좋음.
