요소를 주문하는 모범 사례는 무엇입니까?
어떤 순서로든 사용할 수 있습니까? <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>
W3 에 따르면 다음과 같아야합니다.
- 메타 문자셋
- 표제
- 메타 이름 = "설명"
- 메타 이름 = "키워드"
- 스타일 시트
- JavaScript 파일
대부분의 브라우저 는 요소의 순서를 신경 쓰지 않지만 항상 charset먼저 지정해야합니다 .
Best practices for IE7+ require that the charset, X-UA-Compatible, and base declarations occur before anything else in the head, otherwise the browser starts over and re-parses everything that came before.
Adding a few performance suggestions to Brian's answer, highest priority should logically be things that will need to be downloaded, so the browser can start downloading them asap, and things that will affect how the page is presented. So I'd suggest:
- Metas affecting appearance, such as charset (required early by the spec too), viewport, apple-mobile-web-app-capable
- Title near the top so the browser can render it asap and user has a sense something is happening
- Favicon and touch icons
- CSS (at least CSS for above-the-fold; other CSS can be loaded in the footer if you want to get fancy). This step typically blocks everything else from proceeding, which is why I put the previous items above it, as they provide some feedback during the CSS delay.
- Critical scripts (such as user-agent sniffing that may affect layout) which can't be loaded in the footer
- Everything else (e.g. necessary metadata in the form of links and meta tags)
You might also consider inlining whatever CSS and JS is loaded in head, especially if its small and the external script/sheet is unlikely to be cached according to your typical visitor's profile. And if you do inline it, you'll ideally want to compress it.
Last thing: The user has to wait around for head - and any blocking resources it loads - so it's best to put as much as possible in the body or footer.
You want your content-type first as this denotes the character encoding, otherwise if it comes later on, some browsers attempt to guess the encoding. (I can't remember the specifics, but I think IE will guess if it doesn't find an encoding in the first 75 characters of the document?)
Most webservers send the encoding in the HTTP headers, but if a user saves your page, the headers aren't saved with it.
I'd put CSS references second so the browser downloads them as soon as possible.
JavaScript I wouldn't put in the head, it should go at the bottom of your pages as downloading them blocks rendering of pages.
IIRC, some browsers will re-load the document upon encountering a content-type element. So that element should probably come first within the head element of the document.
참고URL : https://stackoverflow.com/questions/1987065/what-are-best-practices-to-order-elements-in-head
'your programing' 카테고리의 다른 글
| 모듈을 여러 파일로 분할 (0) | 2020.10.07 |
|---|---|
| Gradle 버전 1.10이 필요합니다. (0) | 2020.10.07 |
| Node.js에서 실행되는 javascript에서 NPM 패키지를 설치할 수 있습니까? (0) | 2020.10.07 |
| Jenkins : 파이프 라인 단계에서 변수를 정의 할 수 없습니다. (0) | 2020.10.07 |
| WPF-콤보 상자에 정적 항목 추가 (0) | 2020.10.07 |