기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>1. <!DOCTYPE>
<!DOCTYPE html>- 해당 문서가 html5로 쓰였다는 것을 알린다.
2. <html>
<html lang="ko"></html>- 문서에서 사용할 언어를 지정할 수 있다.
- 언어 표기는 두 자리 혹은 네 자리를 사용할 수 있다. (두 자리 언어별 코드 -> ISO 639-1 표준안)
3. <head>
<head></head> 브라우저에게 문서의 정보를 주는 태그<title> 태그
-
<title></title>탭 제목이자 즐겨찾기 디폴트 제목으로 추가된다. -
웹 접근성을 위해서 제목은 항상 있는 것이 권장되며 너무 길거나 특수문자가 있는 것은 좋지 않다. 핵심 문구만 넣을 것.
<meta> 태그
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">-
<meta>태그의 가장 중요한 역할은 화면에 글자를 표시할 때 어떤 인코딩 방법을 사용할지 지정하는 것이다. 영어를 제외한 다른 문자를 화면에 표시하기 위해 약속된 문자 세트 'utf-8'을 사용한다고 브라우저에게 알려준다. -
모바일 기기에서도 문서 제대로 보여주기 위해 viewport 설정 (?)
-
인터넷 익스플로러 사용자도 고려해야하는 경우 최신 표준 모드로 해석하라고 알려줄 수 있다.
<meta http-equiv="X-UA-Compatible" content="ie=edge"> -
검색 엔진에서 사이트를 검색할 때 참조할 정보를 입력할 수 있다. 검색 엔진에 따라 참고하는 정보는 달라질 수 있다.
<meta name="keywords" content="html5, 웹표준">- 해당 문서의 키워드
<meta name="description" content="html5를 통해 웹 표준 공부하기">- 해당 문서의 설명
<meta name="author" content="Kyunghee Ko">- 해당 문서의 소유자 혹은 제작자
4. <body>
<body></body> 브라우저에 보여지는 부분-
특수 기호를 사용하려면 미리 약속된 '엔티티 이름' 혹은 '엔티티 기호' 표기법을 사용해야한다.
-
엔티티 코드 표 확인 http://dev.w3.org/html5/html-author/charref
-
%의 엔티티 이름 한개와 엔티티 코드 두개이다. 아무거나 사용해도 되며 뒤에 오는 세미콜론은 필수로 붙여야한다.
'%','%','%'
출처 : Do it! HTML5+CSS3 웹 표준의 정석
