어떤 순서로든 사용할 수 있습니까? <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">전에 배치하는 것이 중요 합니까<title>
이것이 가장 많이 사용됩니다. 가장 좋은 방법입니까?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5912">
<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#wmd-input").focus();
$("#title").focus();
$("#revisions-list").change(function() { window.location = '/posts/1987065/edit/' + $(this).val(); });
});
</script>
</head>
<body>
<p>This is my web page</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools.js"></script>
</body>
</html>
이 사이트 http://stackoverflow.com 에는 인코딩이 없으며<meta>
나는 <meta>모든 js와 css 후에 SEO를 위해 모든 것을 추가하는 SEO 구성 요소가있는 CMS를 사용합니다 . 파일. 허용되는 순서대로 요소를 배치하면 <head>문서 호환성 및 인코딩 에 영향을 미칠 수 있습니까?
답변
HTML에서는 DOCTYPE먼저 와야하며 그 뒤에는 <html>요소가 포함 된 <head>요소를 포함 해야하는 단일 요소가 <title>오고 그 뒤에 요소가 와야합니다 <body>. HTML 4.01 및 HTML5 초안 에서 HTML 문서의 전역 구조에 대한 설명을 참조하십시오 . 실제 요구 사항은를 제외하고 거의 동일 DOCTYPE하지만 다르게 설명됩니다.
실제 태그 ( <html>, </html>, <head>, 등) 선택 사항입니다 태그가 없으면 요소가 자동으로 생성됩니다. <title>HTML에서 유일한 필수 태그입니다. 가장 짧은 유효한 HTML 4.01 문서 (적어도 내가 생성 할 수있는)는 <p>다음과 <body>같습니다 (유효 하려면 에 무언가가 있어야하기 때문에 a 필요 ).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><title></title><p>
그리고 가장 짧은 유효한 HTML5 문서 :
<!DOCTYPE html><title></title>
XHTML에서는 모든 태그를 명시 적으로 지정해야합니다. 암시 적으로 삽입되는 요소는 없습니다.
브라우저는 Content-TypeHTTP 헤더를 사용하여 지정되지 않은 리소스 유형을 결정하기 위해 일부 상황에서 콘텐츠 유형 스니핑을 수행 하고 Content-Type헤더가 제공되지 않았거나 포함되지 않은 경우 문자 인코딩 스니핑 charset을 수행합니다 (일반적으로 시도해야합니다. 이러한 헤더를 포함하고 올바른지 확인하십시오. 그러나 HTTP를 통해 전송되지 않는 로컬 파일과 같이 불가능한 일부 상황이 있습니다. 그러나 이러한 목적을 위해 문서 시작 부분에서 제한된 수의 바이트 만 감지하므로 콘텐츠 감지 또는 문자 인코딩 감지에 영향을주는 모든 것은 문서 시작 부분에 있어야합니다.
이러한 이유로 HTML5meta 는 문자 집합을 지정하는 데 사용되는 모든 태그 ( <meta http-equiv="Content-type" content="text/html; charset=...">또는 단순히 <meta charset=...>)가 파일의 처음 1024 바이트 내에 있어야 적용되도록 지정합니다 . 따라서 문서에 문자 인코딩 정보를 포함 시키려면 태그를 파일의 앞부분에, 가능하면 <title>요소 앞부분에 넣어야합니다 . 그러나 Content-type헤더 를 올바르게 지정하면이 태그가 필요하지 않습니다 .
CSS에서는 이후 스타일 선언이 이전 스타일 선언보다 우선하며 나머지는 모두 동일합니다. 따라서 일반적으로 이전에 재정의 할 수있는 가장 일반적인 스타일 시트를 배치하고 나중에보다 구체적인 스타일 시트를 배치해야합니다.
성능상의 이유로 스크립트를 </body>로드하면 페이지 렌더링이 차단되므로 페이지 하단의. 바로 앞에 스크립트를 배치하는 것이 좋습니다 .
당연히 <script>태그는 각 순서에 의존하는 스크립트가 먼저로드 된 종속성을 갖도록 정렬되어야합니다.
전반적으로 내가 이미 지정한 제약 사항 외에 태그의 순서는 <head>가독성을 제외하고는 그다지 중요하지 않습니다. 나는 <title>위쪽 을 보는 경향이 있고 다른 <meta>태그는 일종의 논리적 순서로 배치하는 경향이 있습니다.
대부분의 경우 HTML 문서의 본문에 항목을 입력해야하는 순서는 표시되어야하는 순서 또는 액세스해야하는 순서 여야합니다. CSS를 사용하여 항목을 재정렬 할 수 있지만 스크린 리더는 일반적으로 소스 순서대로 항목을 읽고 검색 색인은 소스 순서대로 항목을 추출합니다.
답변
이것은 내가 사용하는 템플릿입니다. 새 프로젝트에 필요하지 않은 것은 삭제하면됩니다.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="robots" content="index, follow">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" href="scss/style.css" />
<!-- http://realfavicongenerator.net/ -->
<meta property="fb:page_id" content="">
<meta property="og:title" content="">
<meta property="og:image" content="">
<meta property="og:description" content="">
<meta property="og:url" content="">
<meta property="og:site_name" content="">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">
<meta name="twitter:site" content="">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
</body>
</html>
답변
Brian의 대답에 몇 가지 성능 제안을 추가하면 논리적으로 가장 높은 우선 순위는 다운로드해야하는 항목이어야합니다. 그래야 브라우저가 최대한 빨리 다운로드를 시작할 수 있고 페이지가 표시되는 방식에 영향을 미칠 수 있습니다. 그래서 다음과 같이 제안합니다.
- charset (사양에서 초기에 필요함), 뷰포트, apple-mobile-web-app-capable과 같이 모양에 영향을 미치는 메타
- 브라우저가 최대한 빨리 렌더링 할 수 있고 사용자가 무언가 일어나고 있음을 감지 할 수 있도록 상단 근처의 제목
- Favicon 및 터치 아이콘
- CSS (최소한 스크롤없이 볼 수있는 부분에는 CSS, 멋지게 보려면 바닥 글에 다른 CSS를로드 할 수 있습니다). 이 단계는 일반적으로 다른 모든 작업이 진행되는 것을 차단하므로 CSS 지연 중에 피드백을 제공하기 때문에 이전 항목을 위에 놓았습니다.
- 바닥 글에로드 할 수없는 중요한 스크립트 (예 : 레이아웃에 영향을 미칠 수있는 사용자 에이전트 스니핑)
- 기타 모든 것 (예 : 링크 및 메타 태그 형태의 필수 메타 데이터)
특히 일반적인 방문자의 프로필에 따라 작고 외부 스크립트 / 시트가 캐시되지 않을 가능성이있는 경우 헤드에로드 된 CSS 및 JS를 인라인하는 것도 고려할 수 있습니다. 인라인으로 처리하면 이상적으로 압축하는 것이 좋습니다.
마지막으로 : 사용자는 머리와 그것이로드하는 모든 차단 리소스를 기다려야하므로 본문이나 바닥 글에 가능한 한 많이 넣는 것이 가장 좋습니다.
답변
W3 에 따르면 다음과 같아야합니다.
- 메타 문자셋
- 표제
- 메타 이름 = “설명”
- 메타 이름 = “키워드”
- 스타일 시트
- JavaScript 파일
답변
대부분의 브라우저 는 요소의 순서를 신경 쓰지 않지만 항상 charset먼저 지정해야합니다 .
IE7 + 모범 사례가 필요 것을 charset, X-UA-Compatible그리고 base선언은에서 다른 어떤 전에 발생 head그렇지 않으면 브라우저를 통해 시작 전에 와서 다시 파싱 모든 것을.
답변
문자 인코딩을 나타 내기 때문에 먼저 콘텐츠 유형을 원합니다. 그렇지 않으면 나중에 나올 경우 일부 브라우저에서 인코딩을 추측하려고 시도합니다. (구체적인 내용은 기억할 수 없지만 문서의 처음 75 자에서 인코딩을 찾지 못하면 IE가 추측 할 것이라고 생각합니까?)
대부분의 웹 서버는 HTTP 헤더로 인코딩을 보내지 만 사용자가 페이지를 저장하면 헤더가 함께 저장되지 않습니다.
브라우저가 가능한 한 빨리 다운로드하도록 CSS 참조를 두 번째로 넣었습니다.
JavaScript는 머리 속에 넣지 않을 것입니다. 다운로드하면 페이지 렌더링이 차단되므로 페이지 하단에 있어야합니다.
답변
IIRC, 일부 브라우저는 content-type요소 를 만나면 문서를 다시로드합니다 . 따라서 해당 요소는 head문서 의 요소 내에서 가장 먼저 와야 합니다.
